Sitecore SXA | How to Export, Update and Import a Web Design with Creative Exchange

Sitecore SXA (Sitecore Experience Accelerator) is the buzzword nowadays in the Sitecore World. The Sitecore Experience Accelerator provides reusable, templated UX layouts and components to help you get up and running quickly. One of the important features of Sitecore SXA is Creative Exchange, which is helpful for executing the development and designing process to be done in parallel. The Creative Exchange process is designed to facilitate several different teams working on a website. For example, the team that is working on the theme of the site can work in parallel with other teams.

In this post, I will go through the step by step process to show you how to export, change the color of the text and then import back in Sitecore with the Creative Exchange.

I installed:

Create New Site

Create new site – I’m creating a new Sitecore site called sxasite. 

Create New Theme

Go to THEME tab and enable Create new theme and provide new theme name and press Ok. It will take approx. 5 minutes to get the Site ready for you.

IMPORTANT: It is must to create a new theme for your site. If you do not create a new theme and try to export, update and import then it won’t import in Sitecore. Sitecore won’t allow updating the existing theme styling. So make sure to create new theme while creating a new Site.

Experience Accelerator

Our new site is ready, now select the Home Item and click on Experience Editor.

04-Change Theme

You’ll see the three placeholders – header, main and footer where we can drag and drop components from the Toolbox which appears in right. But before we do that, let’s change the theme in Experience Editor and select the new theme which we created specifically for this site.

In Sitecore content tree new theme media data will be at : /sitecore/media library/Themes/Tenants/SXA/SXASite/Sxasite

05-Page Content

06-RichText

Drag and Drop Page Content from Toolbox in the main content area, enter text you want and save.

07-Export

Click on Export in Experience Accelerator Tab. All the default settings are proper – Make sure – Agency drop is enabled. Click Next. You’ll get an option to download the Zip file. You can share this zip file with the Creative Agency for the designing purpose.

In Directory Zip file is created at – D:\inetpub\wwwroot\sitecoresxa\Data\packages\CreativeExchange\2017-09-09_19-42_SXA-SXASite_en_Default_AgencyDrop

08-Exported Zip Data

Extract zip file — You’ll see index.html and a folder with the name – (Hyphen).

09-Add-Your-Classes-Here

Open index.html in any editor and navigate to the text which you have entered in Page Content Rich Text. Above that there will be a class called add_your_classes_here – After that just enter myCustomClass class name and save index.html.

10-Update CSS Styling

Add styling in component-context-content.css as shown in above screenshot and save.

You can now open index.html in any of your favorite web browser and see the color of the text.

Now create a zip file of the – folder and index.html – In a similar fashion as it was exported.

Import the newly created zip file using the Creative Exchange Import Option in Experience Accelerator.

11-Media Update

We should get the message saying Media Item updated and new style added for Page Content in Home page.

12-ColorChanged

Hooray — We see that color is changed! Try to hard refresh your page if you don’t see the changes.

Do shoot your suggestions/feedback/queries in the comment section below!

Happy Sitecoring! 🙂

 

Share

Leave a Reply

Your email address will not be published. Required fields are marked *