Spotlight products
To add this section, please follow the below steps:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Add section and choose "Spotlight products".
Setting | Description |
---|---|
Layout style | Select the style of the card layout:
|
Heading width | Select the heading width from the dropdown menu:
|
Custom heading width | Determines the width of the section when you choose 'Custom heading width' option at 'Heading width' setting . Can be from 1000px to 1800px, increasing arithmetically of 50px (pixel) |
Image | Set up an image |
Heading | Add text to display as a section heading (Leave the field blank to hide the heading) |
Link text | Add text to display as a link label on the section (Leave the field blank to hide the link) |
Carousel
Setting | Description |
---|---|
Collection | Select a collection to show |
Maximum products to show | The number of products from the (collection or products) to display. Must be an even number. Minimum: 1. Maximum: 5. |
Show second image on hover | When the customer hovers their cursor over the product image, displays the second product image if the product has one. |
Show vendor | Displays the vendors of the products. |
Show product rating | Displays the average product rating in stars with the number of reviews in parenthesis |
Enable quick add button | When the customer hovers their cursor over the product image, displays a quick add to cart button. If product has variants, the button links to the product detail page. |
Show color swatch | Select this checkbox to show/hide color swatch on cart item. |
Choose button style | Select the style button from the dropdown menu:
|
Text transform | Select the font style transform of the text:
|
Enable arrows | Display arrows on devices:
|
Enable pagination | Display pagination on devices:
|
Pagination type | Display pagination type on devices:
|
Point [1..5]
Setting | Description |
---|---|
Horizontal position | Determines the horizontal position of point. Can be from 0% to 100%, increasing arithmetically of 1% |
Vertical position | Determines the vertical position of point. Can be from 0% to 100%, increasing arithmetically of 1% |
Colors
Setting | Description |
---|---|
Color scheme | Select a color scheme to set the text and background colors for the section |
Use background gradient special | Select this checkbox to use custom color for this section. (The 2 following settings only take effect if this checkbox is ticked) |
Background | Select a background color for this section (If a background gradient is set, the section's background will be set according to the background gradient setting) |
Background gradient | Select a background gradient color for the section |
Product card
Setting | Description |
---|---|
Color scheme | Select a color scheme to set the text and background colors for the product card. |
Section padding
Setting | Description |
---|---|
Top padding | Determines the height of the top inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel). |
Bottom padding | Determines the height of the bottom inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel). |
Top padding on mobile | Determines the height of the top inner space of the section on mobile. Can be from 0px to 100px, increasing arithmetically of 1px (pixel). |
Bottom padding on mobile | Determines the height of the top inner space of the section on mobile. Can be from 0px to 100px, increasing arithmetically of 1px (pixel). |
Last updated