Related products
The section shows the cards with recommended related products. You can manually assign products for this section or rely on the Shopify Search & Discovery app. Learn more about related products in Shopify.
GENERAL
Color scheme
Choose a separate color scheme for the section.
Width
Choose the width of the section on the page.
Desktop layout
Choose the layout of the section on desktop.
Grid | a static view with multiple rows |
Carousel | a scrollable view with one row and navigation arrows on sides |
Slider | a scrollable view with one row and a progress bar at the bottom |
Mobile layout
Choose the layout of the section on mobile.
Carousel | a scrollable view with one and a half cards showing at a time |
1 column | a static one-column view |
2 columns | a static two-column view |
RECOMMENDATIONS
Heading
Fill in the heading to introduce the related products.
Heading size
Choose the font size for the heading.
Heading alignment
Choose the heading alignment over the product cards.
Show recommendations
Choose the products to show in the section.
App-based | dynamic recommendations managed by Shopify Search & Discovery app |
Manually-selected | featured products or a featured collection that you choose manually |
Collection
Select a collection from the list of your collections on the setting panel. Note that if you already selected products, the collection will not appear.
Products
Select the products from the list of your products on the setting panel. Note that products have priority over a collection.
CARDS
Image ratio
Choose the view and orientation of product media within cards.
Content alignment
Choose product information alignment under the image.
Cards to show
Adjust the maximum number of products to show in the section. Note that the limit of up to 50 products is for manually-selected recommendations, for app-based the limit is only up to 10.
Desktop cards per row
Adjust how many cards show in the row at once.
Desktop space between cards
Adjust the spacing between the cards within the section.
Mobile space between cards
Adjust the spacing between the cards within the section.
Show arrows on hover
Select to show arrows on the sides of the carousel only when you place the pointer on cards.
AUTOPLAY
Autoplay mode
Choose the way the cards change on the screen. Note that the autoplay pauses when you place the pointer on the cards on desktop or swipe them left or right on mobile.
Disabled | turns off the autoplay |
One-at-a-time | turns on the instant change of one card to another on the screen |
Seamless | turns on the smooth and gradual card change |
Autoplay speed
Adjust the card change speed.
PADDINGS
Add side paddings
Select to add extra space on the sides between the section and the screen.
Top padding
Adjust the space between the section and the previous element on the page.
Bottom padding
Adjust the space between the section and the following element on the page.
Last updated