The Highlights settings allow you to customize the appearance and layout of your product highlights. Below is an explanation of each setting and how it affects the display on your storefront.
1. Style
The Style setting determines how the icon, title, and description are arranged.
For example, when Text Right of Icon is selected:
- The icon is displayed on the left.
- The highlight title appears to the right of the icon.
- The description is displayed below the title.
2. Columns
The Columns setting controls how many highlights appear in a single row on different devices.
- Desktop – Number of highlights displayed per row on desktop screens.
- Tablet – Number of highlights displayed per row on tablet devices.
- Mobile – Number of highlights displayed per row on mobile devices.
Example:
- Desktop: 2
- Tablet: 2
- Mobile: 1
3. Body
The Body settings control the appearance of the highlight container.
Shape : Choose the shape of each highlight box.
Available options may include:
- Rectangle
- Curved Rectangle
Spacing : Controls the internal padding inside each highlight.
Options generally include:
- Small
- Medium
- Large
Shadow : Adds a shadow effect around the highlight container.
Common options:
- None
- Shadow
4. Border
The Border settings customize the border around each highlight.
Border Display : Enable or disable the border.
Example:
- No – No border is displayed.
- Yes – A border is displayed.
Border Color
Choose the color of the border using the color picker or by entering a HEX color code.
Example:#D9D9D9
Border Style : Select the border style.
Common options:
- Solid
- Dashed
- Dotted
5. Tite Font Style
These settings customize the appearance of the Highlight Title.
Font Size
Sets the size of the title text.
- Maximum supported size: 50px
Example:18px
Font Color
Choose the title text color.
Example:#212529
Text Formatting
You can apply:
- Bold
- Italic
- Underline
These options can be used individually or in combination.
6. Text Font Style
These settings control the appearance of the Highlight Description.
Font Size
Sets the size of the description text.
- Maximum supported size: 50px
Example:13px
Font Color
Choose the description text color.
Example:#666666
Text Formatting
You can apply:
- Bold
- Italic
- Underline
7. Font Family : The Font Family setting allows you to choose the font used for both the title and description.
Options include:
- Default Font – Uses your Shopify theme's default font.
- Select Font – Choose a custom font from the available list.
Using the default font helps maintain consistency with your store's design.
8. Image : These settings control the appearance of the highlight icon.
Image Size : Sets the maximum height of the icon.
- Maximum supported height: 150px
Example:30px
Vertical Alignment
Controls how the icon aligns with the title and description.
Available options include:
- Top
- Middle
Example:
Vertical Align Middle centers the icon vertically alongside the text.
Right Spacing
Sets the space between the icon and the text.
- Maximum value: 50px
Example:15px
Increasing this value creates more space between the icon and the title.