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.
Troubleshooting
The Highlight block does not appear in the Apps list
- Confirm your theme supports Online Store 2.0 app blocks.
- Ensure the Smart App is installed and enabled on your store.
Frequently Asked Questions
Can I get help with setup?
Yes! Raise a support ticket, and our team will help with installation and styling.