Online Store 2.0 themes let you add Highlights using app blocks — no theme code editing required. This is the easiest way to display Highlight Boxes on your product pages.
Before You Begin
- Use an Online Store 2.0-compatible theme (for example, Dawn).
- Create at least one Highlight in the Smart App dashboard.
Step-by-Step Instructions
Step 1: Open the Theme Editor
- Open your Shopify admin.
- Go to Online Store > Themes > click Customize.
Step 2: Select a Product Template
- In the theme editor, navigate to a product page template.
Step 3: Add the Smart App Block
- Click Add block from the left sidebar.
- Under Apps, select the Smart App block.
- Drag and drop the block to your preferred location — we recommend below the product price.
Step 4: Configure Block Options (Optional)
Customize the block using these app block settings:
Option | Description |
|---|---|
Group | Select which Highlight group to display |
OuterClass | CSS classes applied to the outer container |
OuterStyle | Custom CSS applied to the outer container |
InnerClass / InnerStyle | CSS applied to the inner Highlight container |
Built-in placement classes are listed in Placement of Highlight Box.
Step 5: Save
- Click Save.
Expected Result
The Highlight Box is visible on product pages at the location where you placed the app block.
Can I get help with setup?
Yes! Raise a support ticket or email us at [email protected] and our team will install Highlights for you.