Themes control how your Commerce Cloud storefront looks and feels. A theme defines your layout, typography, colors, and reusable sections so you can create a visually consistent, branded experience without rebuilding pages from scratch.
Each sales channel (for example, your website) can have its own theme. By installing and editing themes, you can:
- Match your storefront to your brand identity
- Highlight products with clean layouts and sections
- Improve the overall shopping experience for your customers
Accessing Themes for a Sales Channel
- In the left navigation, go to Sales Channels.
- Click the sales channel you want to manage (for example, Furniture Care).
- In the channel sidebar, click Themes.
You’ll see:
- Current Theme – the theme that is active for this sales channel.
- Themes Installed – a list of themes already installed for this channel.
- Upload Theme – button to upload a new theme ZIP file.
- Themes in Focus – curated themes you can explore and install.
If no theme is selected yet, the Current Theme area will show “No theme selected”.
Installing a Theme
You can add a new theme to your sales channel in two ways:
- Choose a theme from the library
Browse the available theme options and install one directly from the built-in theme library. - Upload a theme ZIP file
If you have a custom theme or one provided by your developer, you can upload it as a ZIP file and install it manually.
Option 1: Install a Theme from Library
- Scroll to the Themes in Focus section.
- Browse the available themes and click on the theme you want to use.
- Select Add Theme option.
- Once you click Add Theme, Commerce Cloud automatically downloads and installs the theme for your sales channel.
After installation: - The new theme will appear under the Themes Installed section.
- You will also see a confirmation banner at the top of the page indicating that the theme was successfully added.
Option 2: Upload a Theme ZIP File
- On the Themes page, click Upload Theme (top-right of the Themes Installed section).
- In the file picker, select your theme ZIP file.
- Confirm the upload.
- Once the theme is uploaded, you will see a notification: Theme uploaded successfully. The new theme will not appear in the Themes Installed list.
Note: Theme files must be uploaded as a ZIP archive containing the required theme folders (assets, sections, templates, etc.).
Setting a Theme for Your Store
Once a theme is installed, you can make it live for your sales channel by publishing it.
You can review, customize, and preview the theme before publishing to ensure it matches your brand and layout preferences.
- In Themes Installed, find the theme you want to use.
- Click the Actions menu (three dots)
- Select Publish.
- The theme will now appear in the Current Theme area and will be used for your storefront.
Theme Action Menu
Each installed theme includes an Actions menu (three-dot icon) that gives you several options to manage, preview, edit, or remove the theme. These actions help you safely work on theme customizations without affecting your live storefront until you choose to publish.
Here is an explanation of each option in the menu:
Action | Description |
|---|
Publish | Makes the selected theme the active live theme for this sales channel. Once published, the storefront immediately shows this theme to customers. |
Preview | Opens the theme in preview mode so you can see how it looks before publishing. Changes in preview are visible only to you. |
Share Preview Link | Generates a shareable preview URL to send to teammates or clients for review without backend access. |
Rename | Allows changing the theme name to something more meaningful, useful for managing multiple versions. |
Download | Downloads the entire theme as a ZIP file. Useful for backups, offline development, or migration. |
Edit Code | Opens the theme’s code editor to modify HTML, Liquid, CSS, JS, and other files for advanced customizations. |
Duplicate | Creates a copy of the theme. Recommended before major changes to avoid affecting the main theme. |
Delete | Permanently removes the theme from Installed Themes. This action cannot be undone, so be sure before deleting. |
Editing a Theme
Once you’ve selected a theme, you can customize it to reflect your brand — including colors, fonts, layouts, homepage sections, and content elements.
In Themes Installed, find the theme you want to edit.
- Click the Edit icon (pencil) under Actions. It allows you to edit theme in the builder
- This opens the theme editor, where you can:
- Adjust colors, fonts, and typography
- Add or remove sections and blocks on key pages
- Configure header and footer layouts
- Update banners, hero sections, product grids, and more
- Make your changes and click Save in the editor.
- Preview your storefront to confirm everything looks correct.
Tip: Start with global settings like logo, colors, and typography before fine-tuning individual sections. This helps you get a consistent look across pages.
For a detailed step-by-step guide, click here.