Recommended products

Shows products Shopify recommends based on the product being viewed. You can show related or complementary products, and set a manual fallback list. Available on product and cart pages only.

Recommended Products overview

Shopify's recommendations improve as your store gathers order and browsing data. For new stores or new products, set a manual fallback list until recommendations settle in.

---

Settings

Layout

Setting	Description
Width	Page — Keeps the content within the page width set in your theme settings. Full — Stretches the content across the full browser width, with a small space at the edges.
Alignment	Alignment of the section header.

Gap

Setting	Description
Gap — Desktop	Space between the header and the product list on desktop.
Gap — Mobile	Space between them on mobile.

Background

Setting	Description
Media	Show an image or video behind the section.
Image	Background image.
Image — Mobile	Separate background image for mobile.
Video	Shopify-hosted background video. Plays muted.
Show overlay	Add a color layer over the background media.
Overlay color	Color and opacity of the overlay.
Parallax effect	Scroll effect applied to the background media.

Appearance

Setting	Description
Color scheme	Color scheme for the section.

Spacing

Setting	Description
Padding top / bottom	Space above and below the section.
Custom padding — Mobile	Set separate top and bottom padding for mobile.

---

Available Blocks

The section has a fixed two-block structure.

Only one Recommended Products section can be added per page. It is available on product and cart templates.

Heading

The section title above the recommended products.

Setting	Description
Text	The heading content.
Size	Heading 1–6.
HTML tag	Semantic tag rendered (Paragraph, H1–H6). Use headings in order for SEO.
Animation	Entrance effect (Fade, Scale, Slide, Rotate words) played on scroll, with an optional Delay. Shown when block animations are enabled in theme settings.

Product list

The recommended products.

Setting	Description
Type	Related or Complementary products. Complementary products must first be set up in the Search & Discovery app.
Products	An optional manual list, shown when no recommendations are available.
Max products	The most products the section will show.
Type (Layout)	Grid or Carousel. The settings below change with this choice.
Desktop columns / Mobile columns	Number of cards per row on each device.
Enable swipe on mobile	Lets the cards scroll horizontally on mobile. Grid only.
Show next slide preview on desktop	Reveals part of the next card to hint that it can be swiped. Carousel only.
Custom columns	Set the column count per breakpoint yourself, via Columns per breakpoint.
Gap — Horizontal / Vertical	Spacing between cards, with independent mobile values. Grid only.
Gap — Desktop / Mobile	Spacing between cards in carousel mode. Carousel only.
Show navigation on desktop	Previous / next arrows, with Position, Style, Icon, and Behavior. Carousel only.
Show pagination on desktop	Slide indicators, with Type, Top padding, and an optional Limit width / Max width cap on the progress bar. Carousel only.
Auto-rotate slides	Advances the carousel automatically, at a set Speed, and can Pause on hover. Carousel only.

---

Need help?

Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.

Chat with us Submit a ticket