Collection slider
Add the section to display products from a specific collection as a carousel.
Last updated
Add the section to display products from a specific collection as a carousel.
Last updated
Tip: To hide the title, description, or button, leave the corresponding fields blank.
Paste the section's title to the "Heading" field. The "Heading font size" can be changed to "Small", "Medium" or "Large" sizes. If you need to colorize the title, use the "Heading color" picker.
To represent the section, insert any text lines to the "Description" placeholder. If you need to change a paragraph color, use the "Description color" picker.
In the "Collection" source selector, set the required collection by pressing the "Select" button.
Activating the "Show recently viewed products" option will replace the specified collection with products recently viewed by a visitor.
The number of products visible in a row can be set in the "Products in row" picker. Decide if to display 2, 4, or 6 items in each row.
To control the number of products displayed in the section, use the "Maximum products to show" scale. It can be changed from 2 to 48 items.
Choose one of the options "Heading on top" or "Heading top center" in the "Layout" drop-down.
Use the "Mobile align" settings to change the alignment of the heading, description, and navigation to the "Left" or "Center". Leave the "Auto" option to use the pre-designed theme settings.
Decide on the position of the divider using the "Top", "Bottom", or "Both" options in the "Dividing line" drop-down. It will be hidden once you use the "None" option.
On the "Top spacing" and "Bottom spacing" scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.
Activate the "Enable "View all" checkbox to show the "View All" button on desktop and mobile if the collection contains more products than is displayed in the section.
Use the "Style" drop-down to change the button's appearance in the sections. The theme includes three styles that can work out in your store: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following .
Use the "Color" picker to change the button background color for the "Primary" style. For the "Secondary" style the colorized text and border inside the button will be added. If you used the "Link style", the color will be applied to the text link.
Use the "Information align" drop-down to decide whether to display the product information below the product card on the "Left", "Center", or "Right" side.
Enable or disable the following options to display the desired product information:
Show second image on hover
Use the option to display a second product image when hovering over the product card.
Show vendor
Display the product vendor above the product title by simply enabling the checkbox.
Check the following examples of how the section might be displayed on desktop and mobile:
Choose the appropriate aspect ratio of the product images in the "Image ratio". You can use one of the options that display well on both desktop and mobile views: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". Each image ratio you can check .
Tip: The product information will be displayed for each product with the configured settings in your Shopify admin -> Products. Read more information on how to configure products and collections in your admin .
