Using the Style editor to create product themes

• EARLY ACCESS:
• If you're interested in using this feature and you're on the Enterprise plan, please reach out to your success manager, who will activate this for you.
• Not all available variables are listed as imported attributes in this article. This list is updated as soon as the feature is released officially.

Add dynamic content to your online publications effortlessly with the Product hotspots that render product details directly onto the page. Learn more about dynamic content by clicking here.

You can take control of your product details' display and personalize the layout of elements to perfectly match your brand's look and feel using the Product Theme Editor. With the editor's intuitive interface, you can easily modify text colors, sizes, add shapes, use custom fonts, and more.

How to Find and Use the Style Editor:

The Style Editor is a powerful tool that allows you to customize your hotspots and enhance the appearance of your content. To access it, follow these simple steps:

Customizing Layout Options:

The Style Editor enables you to adjust various layout options for your content. Here's how you can customize the positions of your product details:

Choose your layout: Select any of the following layout combinations to change the specific positions of the content:

• Details below (details below the product image)
• Details left (details on the left side of the image)
• Details right (details on the right side of the image)
• Details above (details above the product image)
• Image only (shows just the image, no other details)
• Details only

Note: Layout options are only available for new custom themes created after April 10 2023.

Personalizing Product Details and Appearance:

• Title
• Effective price
• Original price
• SKU
• Brand
• Custom label 0

Follow these steps to tailor your data fields:

• Show or hide data fields: Easily choose which ones you want to display.
• Adjust data fields: Modify the size, color, background, and padding of the data fields to suit your preferences.
• Preview with colors: Select a background color to see how your hotspot will look against it.
• Use your custom fonts: You can use different custom fonts to change how the text is displayed

Saving Your Changes:

Once you've made your desired adjustments, remember to save and apply the created layout. Click the "Save & Apply" button to save your changes immediately.

Important Notes:

• The Style Editor does not allow editing of the 'Default' theme with custom changes on its HTML template.
• Similarly, custom themes with changes on their HTML template cannot be edited using the Style Editor.
• Changes to the theme will affect all hotspots of publications using that theme in the same group.

By following these steps, you can effortlessly enhance the appearance of your hotspots and create a more engaging and visually appealing experience for your audience. Enjoy exploring the possibilities!