The Highlight Box can be placed at virtually any location on your product page. This guide covers integration parameters that control placement and spacing.
Before You Begin
- This guide is for users comfortable with Shopify Liquid code and basic CSS.
- Duplicate your theme before editing code files.
- Ensure Highlights integration code is already added to your theme.
How Placement Works
You can control Highlight Box position in two ways:
- Change the integration code location — move the render line to a different spot in your theme file.
- Pass parameters in the integration code — use built-in CSS classes or custom styles for fine-tuned spacing.
Parameter 1: smarthOuterClass
CSS classes passed using this parameter are applied to the container DIV that wraps the Highlight Box.
Built-in Margin Classes
Class Name | Result | Class Name | Result |
|---|---|---|---|
| margin: 0 |
| margin: .25rem |
| margin-top: 0 |
| margin-top: .25rem |
| margin-bottom: 0 |
| margin-bottom: .25rem |
| margin-left: 0 |
| margin-left: .25rem |
| margin-right: 0 |
| margin-right: .25rem |
Suffixes 2, 3, 4, and 5 add margins of .5rem, 1rem, 1.5rem, and 3rem respectively.
Example:
{% render 'smarth', product: product, smarthOuterClass: 'smart-mt-4 smart-mb-2' %}
This applies a top margin of 1.5rem and a bottom margin of 0.5rem to the Highlight Box container.
Parameter 2: smarthOuterStyle
Pass custom CSS using this parameter — applied directly to the Highlight Box container.
Example:
{% render 'smarth', product: product, smarthOuterStyle: 'border: 1px solid black' %}
This adds a black border around the Highlight Box.
Expected Result
Highlight Boxes appear exactly where you want them on the product page, with precise spacing and styling.
Important Notes
- If you are not comfortable editing theme code, raise a support ticket and our team can adjust placement for you.