Sitecore Experience Commerce – XC9 – Creating a product landing page within 5 minutes!

This is going to be a fun post and will show the real power of Sitecore Experience Commerce 9 combined with SxA Storefront components in “powerful ways”.

We are going to create a landing page for our brand new model of a laptop. If you manage a commerce website, this is a very common scenario. As a company, you would be interested in creating a special landing page for promotional purposes. The blog is based on Sitecore Experience Commerce 9 initial release and the default Storefront, so lets start!

Step 1 – Create a ‘Default Commerce Page’

Open content editor, right-click on the Home item and create a new ‘Default Commerce Page’

Step 2 – Open up ‘Experience Editor’

Right-click the newly created page and open up ‘Experience Editor’

Step 3- Drag and Drop Catalog Item Container’ component

In the middle part of the page, drag and drop ‘Catalog Item Container’ component. This is a special type of component which will serve as a ‘current context’ for all of the child components within this component.

Set the data source for the product:

Step 4- Drag and Drop ‘Column Splitter’

Drag and drop ‘Column Splitter’ inside ‘Catalog Item Container’. Column splitter is a powerful component which can create bootstrap like columns for any given placeholder. Right now we are only interested in 2 columns so we will leave it at as is:

Step 5- Drag and Drop ‘Product Images’

Drag and drop ‘Product Images’ component. This will take the context of the product from ‘Catalog Item Container’ component and the images will show up.

Step 6- Drag and Drop ‘Product Information’

Drag and drop ‘Product Information’ component. This will take the context of the product from ‘Catalog Item Container’ component and information will show up.

Set associated content item (there is one predefined)

Step 7- Drag and Drop ‘Product Inventory’ component

Drag and drop ‘Product Inventory’ component. This will take the context of the product from ‘Catalog Item Container’ component.

Set associated content item (there is one predefined)


Step 8- Drag and Drop ‘Product Price’ component

Drag and drop ‘Product Price’ component. This will take the context of the product from ‘Catalog Item Container’ component.

Step 9-Drag and Drop ‘Product Variant’ component

Drag and drop ‘product variant’ component and select pre-defined associated content.

Step 10- Drag and Drop ‘Add to Cart’ component

Drag and drop ‘Add to Cart’ component.

Save and Preview the page.

That’s it, all done. Click save and preview the page. It should look something like this:

Final output the page

Publish the page and you are all set to rock the world!


As you see, within 5 minutes I was able to setup a landing page for one of the product with help of some powerful components. I had the full flexibility over the page structure and design. Now that is the real power of Sitecore Experience Commerce with SxA Storefront components. Go check it out!


Updated March 5, 2018 with Video

The video actually takes 3 minutes! There is no voice as it is self explanatory.


Sitecore Experience Commerce – XC9 – First Look and Feel

Sitecore released their much awaited module – Sitecore Experience Commerce (or XC9 in short) in late January 2018. As an avid Sitecore enthusiast, I was eager to learn more about it. On a free weekend, I decided to install and play with it. This blog is about the first look and feel about the XC9 module and only explores very high level features. The detailed documentation about the module can be found at the official site.

The Storefront

Once the installation is complete, the modules comes with an sample store called the Storefront.

The home page comes with featured carousel and product list components (SXA based)

Clicking on any of the top menu items (for example Appliances) will present the list of products with filtering and sorting options:

Clicking on an individual item will take the user through to the product details page, where the user can add the product in their shopping cart:

The Checkout Process

The checkout process is very user friendly and can be compared with any top of the line commerce stores. For example if the user decides to add a laptop and click on the ‘View Cart‘ link from the top right, the user will be shown the summary of cart:

The user can either click ‘checkout‘ or click ‘continue shopping great products‘. If the user decides to click the ‘checkout‘ button, the next screen asks for delivery details to calculate additional shipping charges:

The user can check ‘Ground’ option and click ‘Continue to billing’. The next screen asks for ‘Billing’ details and also includes shipping charges:

Before the user can continue,  the user must validate credit card details. At the moment, the system is configured to use Braintree sandbox account. The user can enter any of the test credit card details available from the Braintree website and click ‘Validate Payment’:

Once the credit card has been validated, the user can proceed to the final review screen before hitting ‘Confirm Order‘ button:

The final screen will show order confirmation number:

That was an amazing experience for buying a product and as a user, I am very much impressed!

The Business Tools

So that was the customer experience, now lets see what is there in the for the back office administrators. After installing the XC9 module a new icon as ‘Business Tools’ should be available for admin users from the Sitecore Experience Platform dashboard.

The Business Tool dashboard comes with 7 sub-modules to manage the store.

  • Merchandising
  • Inventory
  • Pricing
  • Promotions
  • Orders
  • Customers
  • Relationship Definitions

Since the user has just made a purchased, lets checkout what is in the ‘Order’ module

Clicking on the ‘Order’ link from the dashboard or side link, the admin user can see one order is in the ‘Pending’ state:

Clicking on the pending order link, the admin user can see the details about the order:

This out of the box back office processing system for admin users looks amazing as they can instantly see all the order summaries and details. I will pause the exploring rest of the commerce modules as they require much more detail and perhaps another blog.

The Storefront Content Tree

The Storefront content tree is based upon conventions and structure introduced by SXA module. The SXA modules comes with 80+ components for speeding up the development process.

A new set of commerce components are added in the SXA toolbox library.

All of the pages in the Storefront are developed using SXA or Commerce-SXA components.


As you can see, Sitecore Experience Commerce 9 is a very rich and extensive module for developing an online store. In this blog, I have only scratched the surface of the module and I am super excited about it. The 40+ commerce SXA components, the 7 back office processing modules, and additional 80+ standard SXA components for rapid website development, all together deliver a knockout punch in the online commerce industry

In my opinion, Sitecore XC9 module will definitely meet the expectations of any business looking for a modern, cloud-ready and secure online store. So, if you manage an online store and looking for replacement options, do evaluate  Sitecore Experience Commerce out before making any decisions.



SXA Rendering Variants – The Hidden Gem of Sitecore Experience Accelerator (SXA)

Sitecore Experience Accelerator  (SXA) is a great productivity tool as it reduces your development time by giving you pre-built components. There were few new concepts and features that were also introduced with SXA like Page design and Partial design, pluggable themes, grid and column layout etc, but as the topic suggest, I will be focusing upon “Rendering Variant” concept and will try to explain how can this change the way you architect your website (assuming that is based on SXA).

Problem Statement

Let’s begin with a problem statement, the UX team have prepared a landing page and they have the various content components on the page displaying Image, Rich Text and Link all in a box but in various styles as below:

  1. Half-width component with Image and Text
  2. Half-width component with Image, Text and Link
  3. Full-width component with Image on Left, Text and Link on Right
  4. Full-width component with Image on Right, Text and Link on Left

They also want the content authors to have the ability to add them, remove them and order them in any way they like.

Sounds familiar ?

If I am not using SXA module, one of the approach would be to make these different components available via Experience Editor which content editor can add/remove/order from the content page. This means that there will be different “View Renderings” for each of the components types. Different view rendering mean different Data Source Templates and Data Folder Templates. So for the simple content based components above, we end up having 4 different view renderings, which more or less have same content but it is displayed differently.

SXA Approach


There is nothing wrong with the above approach, but if you website is based on SXA module you would have another tool to  meet your goal in a more effective manner.

The SXA provides a feature called Rendering Variant which optimizes the process of showing different variations of the same component. The variations can be setup via content editor and can also be supplemented with predefined styles and scripts.

The best way to explain Rendering Variants is by an example. I will be using the out of the box “Promo” component that comes with SXA. I am only interested in 3 data fields PromoText, PromoIcon and PromoLink (there are other properties too, but let’s keep it simple)

Promo Data Template

Rendering Variants are located under the /Site/Presentation/Rendering Variants node. In my case, the location was:

/sitecore/content/Tenant Folder/Tenant 1/Site 1/Presentation/Rendering Variants/Promo

Out of the box there was one rendering variant already present as ‘Default’.

Default rendering variant

I made a copy of that component and called it ‘Promo with Image and Text’

Promo with Image and Text rendering variant definition

I then deleted last child item ‘Promo Link’ from the recently created rendering variant and clicked save. The ‘Default’ rendering variant was renamed to  ‘Promo with Image Text and Link’ for readability purposes. And just by doing these few content item operations, I was able to achieve my 2 component variations (under like 1 minute, thanks to SXA)

To verify my changes I tested them out in experience editor. First I added a column splitter component to divide the page into 2 equal halves, then I  uploaded some stock images, added the Promo component from the Toolbox in each of the half , added random text and selected my variants via the dropdown. They worked like a charm!

Promo with Image and Text, Promo with Image, Text and Link

Similarly, I created a copy of the existing variants and called it “Promo with Image left” . I then added a ‘Section’ item for the variant definition and called it ‘Container’. I then moved “Promo Icon” under it. I also added the bootstrap class of ‘col-xs-6’ to ‘Container’ item and to the ‘Promo Text’ item.

Section item surrounding PromoIcon field in rendering variant definition

As you can see in the screen shot above, there are other types of variant definition items as well, check them out from the official site and see how flexible they are to give you almost any kind of rendering variation that you like.

For “Promo with Image Right” I created a copy of the “Promo with Image Left” and just reversed the order ‘Promo Text’ and ‘Container’ sections:

Image Left and Image Right rendering variant definitions

To verify my changes, I navigated to the Experience Editor, dropped the ‘Promo’ component on the page and changed its rendering variant via the dropdown to get the results below:

Promo component with Image Left
Promo component with Image Right

And that’s it, without even writing a single line of code, I was able to get all 4 component variations. In theory the number of variations that could be achieved using rendering variants are unlimited and totally depend upon your UX and Design.


If you are starting a new website based upon SXA module, you must consider rendering variants for your components as it will change the way you architect the website. This was a simple post but it showed the true power of SXA and how Rendering Variants can reduce back-end development efforts and also improve the content authoring experience. Kudos to SXA development team for this awesome feature!

Have fun

Note: If you want to play around with the, here is the link to the rendering variant package. I have used Sitecore 8.2 update 5 and SXA 1.5.