How to use Sitecore Experience Accelerator (SXA) Creative Exchange Live – How To Implement Series

This topic has been long on my list but I could not write about it. This is the first part of the my next blogpost that I will be sharing with you guys in a few days.

If you have not used the Sitecore Experience Accelerator Creative Exchange and Creative Exchange Live, you are doing it all wrong. You are not taking the full advantage of what SXA offers.


What is SXA Creative Exchange?

Creative Exchange is a headless architecture based process. It offers multiple teams to work parallel on a website. It is a handy tool specifically designed for the frontend developers, so that they can work with the static HTML offline. It not only reduces the development time but also, the frontend and backend developers can work parallel, because of its unique cycle of development and deployment.

There are around 80+ pre-built components components available to choose from. Bootstrap, Foundation and Grid 960 to choose for grid system for the website, along with the WireframeTheme and the BasicTheme. In the exported markup it gives you annotation of renderings and components by showing CSS classes alongside. You can also find the renderings based on ID which it gives on every single component. This is how it works:

  • Build basic site structure with Wireframes Theme or Basic Theme
  • Create the User Experience before development, by dropping all of your required components using Experience Editor
  • Once done, you can export generated Site markup in a Zip format. ( you can either choose to save it on the server folder as well)
  • Add the CSS styles and animations based on the User Interface Design
  • Implement any required Javascript modifications, if needed, in Exported Markup
  • Import it back into the Sitecore Solution, as simple as that.

What is SXA Creative Exchange Live?

Along with the offline mode, there is a Creative Exchange Live. It is an SXA feature that enables front-end developers to modify themes other site content on run-time, without importing the files back into the Sitecore solution. It provides fast pace of work for Frontend Developers, saves time and efforts.
You can modify themes without Importing into Sitecore. With its headless architecture, you can work UI-First instead of Sitecore First and synchronize the website with Gulp tasks.
You don’t need to worry about adding classes on markup, the Creative Exchange will automatically associate that to the relevant renderings based on the IDs , which it associates with every renderings while you export.

 In order to use SXA Creative Exchange Live you need node –version 10.x.x npm –version 6.4.x, gulp –version 3.9.x.

1. Enable the Gulp Powershell Service

In order to get started you need to enable the gulp config in the App_Config in your Sitecore solution.

Enable the z.SPE.Sync.Enabler.Gulp.config.disabled  by going to the \Website\App_Config\Include\z.Feature.Overrides in your server folder and rename  z.SPE.Sync.Enabler.Gulp.config.disabled to z.SPE.Sync.Enabler.Gulp.config

Now you are ready to use the gulp tasks in your themes.

2. Export the Website

In the Experience Editor, on the ribbon, on the Experience Accelerator tab, click Export. you can export generated Site markup in a Zip format. ( you can either choose to save it on the server folder as well). Once the markup is generated, you can download the zip.

3. Configure the Gulp

Extract the exported zip in your folder directory.  You need to configure the [Your Theme] config to communicate with the Sitecore Solution. Navigate to the Themes\[Your Tenant]\[Your Site]\[Your Theme]\gulp and open config.js. Update your server relevant to the domain name you have for your Sitecore Solution.

Open Command Prompt and navigate to the

[Your Site]\-\Media\Themes\[Your Tenant]\[Your Site]\[Your Theme]

Now run the command npm install, this will install all the node_modules required to perform the gulp tasks.

Now run gulp. You can choose from different tasks, e.g. if you only want to use the sass compiler, you can use watch-sass

 In order to use SXA Creative Exchange Live you need node –version 10.x.x npm –version 6.4.x, gulp –version 3.9.x.

4. Testing the Feature

You can now test your markup by adding any new-class . You need to be careful to add class only after the add-your-css-classes-here before SXA needs to an end point to look for the classes to import into the Sitecore Solution.

You can also modify in your scss files. and the watcher will look for changes and upload it on the Sitecore Solution, in the respective directory.

If you have multiple themes, you have to run the Step 3 for each of the themes separately.

Feel free, to use it and share your feedback if you find it useful. Cheers!

Reference Links

Sitecore Experience Platform 9.1 update 1
Sitecore SXA 1.8.1

How To Implement Series for SXA
Don’t forget to check my previous articles for SXA.

Create a Phone Link with the SXA Link Component – How To Implement Series
Setting up the Not Found and Internal Server Error pages with SXA – How To Implement Series
Progressive and optimized loading images with SXA – How To Implement Series

2 thoughts on “How to use Sitecore Experience Accelerator (SXA) Creative Exchange Live – How To Implement Series

Share what's in your Mind :)

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.