SXA is a great way to quickly create a website. These websites can vary between small, medium or even large. Depending on the features that are required it could be a very good option to consider the use of SXA.
Before you start
Sitecore SXA is easy to use and quickly to start with. Before you start creating your pages and adding all the components, sit back and take a breath.
Start planning what you want to use and how you want to use it.
It would be a shame if you have built your website and made some mistakes along the way that can cost you a lot of time to fix.
When you have all the pieces that you want, find a way on how to structure them.
For each requirement, analyze if out of the box Sitecore SXA components are
available, or maybe the feature needs custom code.
In order to make this decision you will have to understand the possibilities of what SXA can offer.
A good overview of the possible options you have with SXA can be found at the Sitecore documentation: https://doc.sitecore.com/users/sxa/17/sitecore-experience-accelerator/en/the-sxa-renderings-and-rendering-variants.html.
Other considerations and possibilities
Grid StructureSome features of the newer versions of Bootstrap are not available in SXA. You can however add a custom Experience Accelarator Grid structure.
If you decide to start styling your components, you have multiple options on how to achieve this.
Two of these options could be:
- Set up presentation styles
- Variant Css Class
For the presentation styles:
You can set multiple styles you plan to use and place the values within the items.
Here you can specify for what component the certain style can be used. On the component style properties you can then check this styling under the styling section.
This is an easy way of having styling throughout the website with the same options.
For example you could place a top and bottom margin for a component if you need additional spacing in between of the components.
For variant css class:
When creating a variant for a component like the Promo component, you can specify an Css Class (multiple classes can be added here) for a specific section or field.
For example if you have the Promo component and you place the “PromoText” field in this variant you specify the class you want to use. In the item “Variant Details” you can specify your class name in the “Css Class” field.
This will now be available for this Variant.
Planning and structure
The insert options can be found under “/sitecore/system/Settings/Rules/Insert Options”.
If you make for example a page list of all news items, you could have 1 root item that will contain all the news items. When you make the page list and select your root item and set it to show all children it will display all the items under the root item.
If you allow news items to be added anywhere it can be confusing for content editors. Using the insert option rules can help content editors to be able to only add items where they are supposed to be placed.
Building your pageA page will be constructed from 3 types of items. Your template, page design and partial design. Each template can have its own page design. For example you can specify a specific page design for your home page and another for a news overview page or a news detail page. On a page design you can add multiple partial designs. You can add for example the default partial designs that come with SXA, these are the “Metadata” and “Empty” partial designs. If you created your own partial designs you most likely have a header and footer partial design. Partial designs are reusable parts of your page. For example in a header you always will have a logo navigation and maybe a language selector. These items will need to be available on every page. Once you have set up your partial design you can add them to your page design. Once your page design is setup you link them to the template it needs to be on.
By default Sitecore SXA provides a Partial Design called "Metadata". This Partial design can be used for adding items to the HTML head section.
This includes (and others):
- Browser Title
- Google Analytics
This partial design is different from others and it takes from the template "Metadata Partial Design".
For SEO compliance you might want to add your brand name within your header.
By default you have the item within the Settings of your SXA website. This items has the title field, this field will take the title of an item to be placed within your browser title.
If you want to add for example "- Sidewalk" as brand name for all pages you can add a variant text field. This will then include the text combined with your title field.
If in any case you would like to exclude pages for example your home page that might have a similar title already, you can use "Rules" to include or exclude certain pages.
Once you have added the Google Analytics component to the Metadata Partial design you need to edit the properties
Here you will be able to set your Google Analytics Key.
Once you have set this all pages that include the Metadata Partial design will have the Analytics feature active.
When starting your SXA project it is best to involve a Sitecore partner as early as possible.
Together with we can establish a listing of all the requirements. We can help describe and clarify the requirements for future developments. This will save you a lot of time and since we are familiar with the requirements this will make the process to development even faster.
A Sitecore partner can always give you the best advice whether your ideas can be implemented using SXA or if it would be better to use a different Sitecore implementation approach.