My new blog present here.

Featured Post

Insights into Sitecore Search: A Definitive Introduction

A key component of digital experience management is effective information retrieval. A simplified approach is required for websites, applications, and platforms containing a lot of material so that consumers can easily get the data they require. This need is met by Sitecore, a well-known name in the field of digital experience platforms (DXPs), which provides powerful and comprehensive search functionality. We will travel into the realm of Sitecore Search in this article, learning about its capabilities, architecture , and the enormous value it offers both developers and end users. Introduction to Sitecore Search    A headless content discovery platform powered by AI , Sitecore Search enables you to build predictive and custom search experiences across various content sources. To extract and index you
Post a Comment

Customize Sitecore Experience Accelerator (SXA) OOTB Components: Part-2

Apply Custom Styling (CSS) on Sitecore Experience Accelerator (SXA) Site and OOTP Components:

In the previous article "Customize Sitecore Experience Accelerator (SXA) OOTB Components: Part-1 " we created the custom css style file, which contains the customization for Sitecore Experience Accelerator (SXA) OOTB Carousel component.

Now, we have to apply the custom css style file in the SXA website and for this we will be utilizing the Themes which created during the creation of SXA Site.

For this login into Sitecore CMS as ADMIN and go to SXA website custom theme location /sitecore/media library/Themes/Company/Brand A/India/IndiaTheme/styles :


In the above content tree the details about Tenant Folder/Tenant/Site are:
=>Company (Tenant Folder)
      > Brand A (Tenant)
                    o   India (Site)

For example name of custom css style file is company-component-carousel.css. Now upload the file at /sitecore/media library/Themes/Company/Brand A/India/IndiaTheme/styles folder:

One important things, the files which are present at /sitecore/media library/Themes/Company/Brand A/India/IndiaTheme/styles loaded on to the page in the order they are displaying in the Styles folder, because, first it will load all the required framework files from SXA Base Themes folder then it will come to individual Site Theme folder and load the files one by one, so in order to render custom css styling, its suggested to load those styling at the end.

For this navigate to Appearance > Sortorder attribute and set the higher number, so that file will come automatically at the end or give the name of the file starting with alphabet which come at the end.

If you are not able to see Sortorder attribute then from top navigation go the VIEW > Select the Standard fields check box.

The above steps also applicable, if you are applying the custom branding to your SXA website. By following above steps, you can customize any Sitecore Experience Accelerator (SXA) Site and OOTP Components.

Comments

Post a Comment

Popular posts from this blog

Sitecore GraphQL Queries

Image
This article will provide the details about Sitecore GraphQL queries usage and how it will be useful in creating Sitecore projects especially Sitecore JSS projects. The topics covered under this Sitecore GraphQL article are: •    Overview of Sitecore GraphQL (GQL) •    Setup GraphQL (GQL) in Sitecore •    Usage of Sitecore GraphQL (GQL) in Sitecore JSS •    GraphQL (GQL) Queries Usage         o   Get an item by path and show field id and name       o   Return the name and value from all fields       o   Get the values of Treelist or Multilist field type       o   Get the template field details with values of current item       o   Get the field values using Aliases       o   Return a specific field with Alias       o   Get Child Items using GraphQL       o   Get specific Child Items using GraphQL and alias       o   Get multi-level children details       o   Get repeated fields using Fragments       o   Get list of all languages       o   Sitecore GraphQL Search - using Search quer
Read more

Sitecore Experience Edge GraphQL Queries

Image
The Headless development in Sitecore is powered by a layer of services, API endpoints, and rendering SDKs: Services and API endpoints Sitecore Headless Services Sitecore Experience Edge for XM Rendering SDKs Sitecore ASP.NET Rendering SDK Sitecore JavaScript Rendering SDKs (JSS) In this article, we will explore about Sitecore scalable API layer called Sitecore Experience Edge which provides you a Sitecore-hosted GraphQL (GQL) API. With these Edge GraphQL (GQL) endpoint you can build your solution in any language and pull the required content with the help of GraphQL (GQL) . The major GraphQL APIs of Sitecore Experience Edge are: Preview API Delivery API You can check more details about these APIs at Type of Sitecore Experience Edge API . GraphQL is a query language for these APIs t
Read more

Configuring Sitecore Next.js Headless SXA Multisite App in a Sitecore Container

Image
Leading digital experience platform Sitecore offers strong capabilities for developing reliable websites and applications. The headless CMS and Jamstack architecture trends have been very popular in recent years. Sitecore provides Headless SXA (Sitecore Experience Accelerator) as a solution to decouple the front-end presentation layer from the content management capabilities since it recognizes the value of headless capabilities. In this article, we will guide you through the process of configuring a Sitecore Next.js multisite app and integrating it with Headless SXA in a Sitecore container. This setup allows you to leverage the benefits of Next.js, a popular React framework for server-side rendering, and the flexibility of Headless SXA for managing and delivering content. Table of Contents Step 1: Set Up the Sitecore Container Step 2: Add support for Sitecore SXA in Sitecore Headless Container setup St
Read more