Tips for working with Sitecore Experience Accelerator (SXA)

If you have spent time in the Sitecore community in recent years (or read Luke LaReau’s recent blog post), you have probably heard some buzz about the Sitecore Experience Accelerator (SXA). For those who are less familiar, SXA is a product that allows you to bypass a lot of the basic site setup and custom rendering work that we find ourselves doing on most projects. Among many other things, it comes with scripts to build out your site structure and a toolbox full of ‘drag-and-droppable’ renderings that can be custom-themed by frontend developers.

I have been part of a team that recently completed a Sitecore site built using SXA. As with any new tech, there is always a learning curve and some adaptations to your day-to-day workflow. In this post I will share a few nuggets from our experience across several SXA sites, and some pointers that will be useful for folks as we see adoption of SXA becoming more widespread.

Theming and the Asset Optimizer

Sitecore Experience Accelerator comes with a couple of base themes to get started, however when building out your own site you will want to generate a custom theme. A custom SXA theme enables you to modify and add to the theme with your own CSS and JS. Creative Exchange and Creative Exchange Live are the well-documented ways of bringing theme changes into your SXA site. The Asset Optimizer is a module that will automatically minify and bundle your custom theme files – the recommended approach, and the one we have taken, is to leave this off in local/development environments and enable it in test/production environments.

If you will be using Unicorn to sync your SXA instance, I highly recommend Michael West’s blog post to help you get started. One additional inclusion you will probably want to put in your project-specific configuration is the path of your custom theme. It is also a good idea to exclude the paths of the optimized-min files that are generated by the Asset Optimizer – since they are dynamically updated as needed during page requests, there is no real need to pass them between environments.


Include Script Example



A Word About Columns and Rows

Among the many useful items included in the Sitecore Experience Accelerator toolbox, one that is often misused is the Column Splitter. The Column Splitter allows you to divide the page up into columns of various widths, with a placeholder in each column where you can add components.

It can be tempting at first to drop column splitters all over the place, set column widths, and drop renderings into the generated placeholders. However, through our hands-on experience and various discussions we have had (including with Sitecore support), we have found this is not always the correct approach and can add a lot of overhead. Instead, much of the time you should just drop renderings directly into a full-width container, then modify the column settings at a component level.

For example, in one row let’s say I want a half-width Image on the left and a half-width Rich Text on the right. I can simply drop the Image component onto the page, then do the following:

  1. Click the Edit style and behavior of the component button on the Image’s toolbar
  2. Set the Size property to 6
    Column Style
    Note: In this example I am using the ‘Phones’ setting which will trickle down to Desktop, however in practice you may want to keep the rendering full-width for mobile and just set the ‘Desktops’ value to 6.
  3. Drop a Rich Text component into the same container and complete the same steps. You now have multiple components on the same row without the extra placeholders and scaffolding that come along with Column Splitters.

Custom Components in SXA

While SXA comes with a bunch of ready-to-use components, there may come a time where you need to build something custom. Ideally you would want to follow the SXA component guidelines and make use of the base Controllers and Repositories that SXA provides you. This document provides an excellent overview for the process, including how to set up the Experience Editor toolbox to display your custom component.

One point of confusion for me when I was going through this process was that the toolbox did not categorize my custom components exactly how I expected. I assumed they would be organized based on which item they were grouped under in ‘Available Renderings’. Rather, this step just serves as a kind of ‘filter’ to determine which of your components will be shown in the toolbox. The toolbox section where your rendering appears is based upon the folder where the rendering item lives. Thus, if I want several custom components grouped together in the toolbox, I need to ensure that they are kept in the same rendering folder.

Working with Sitecore Experience Accelerator has caused me to change the way I think about (and go about) building a Sitecore site. A lot of what used to require coding can now be done within the Sitecore UI, and a big part of learning SXA is figuring out where that line is drawn. As the community has been an excellent resource for me and my team, I plan to share more posts based on my experience and show how SXA can expedite your projects.

Stay updated by subscribing to our newsletter today!

Don't miss out

It's more than digital, it's your business
The Reference is nothing without its customers. Carglass is the car window repair and replacement specialist for whom we've built a fully responsive Sitecore website. Read more about this client.