Product recommendations

Featured links

1. Shopify documentation on product recommendations
2. Company XYZ documentation on the product recommendations section
3. Company XYZ documentation on layout settings
4. Company XYZ documentation on slideshow controls settings
5. Company XYZ documentation on colors settings
6. Company XYZ documentation on headers settings
7. Company XYZ documentation on product cards settings
8. Company XYZ documentation on product variants
9. Company XYZ documentation on section padding settings
10. Company XYZ documentation on section backgrounds settings
11. Company XYZ documentation on separators settings
12. Company XYZ documentation on visibility settings
13. Company XYZ documentation on layout widths settings

Helpful videos

Shopify video: 9 tips to optimize your product pages for more sales

Shopify video: 9 tips to optimize your product pages for more sales

Use this section to surface related products on product pages with automatically generated recommendations. It is a practical way to add cross-sells without manually curating products for each item, while still giving you strong control over layout, card presentation, and section styling.

Recommendations improve over time based on product and order data, and can also be influenced through Search & Discovery. For more about how Shopify handles recommendations, see Shopify documentation on product recommendations. You can review the section reference in Company XYZ documentation on the Product recommendations section.

Core settings

The main section-level control is Number of items. Use it to cap how many recommended products appear, or set it to 0 when you want the section to return as many items as available up to the built-in maximum.

Smaller counts usually work best in tighter layouts or when the section appears lower on the page. In larger layouts, a higher count can make the section feel more complete, especially when customers are likely to browse beyond the first few items.

The section can show fewer products than your limit when only a smaller set of relevant recommendations is available.

Layout settings

These settings control how recommended products are arranged across desktop, tablet, and mobile. You can choose between grid and slideshow layouts per device, then set the column count for each screen size.

See Company XYZ documentation on layout settings. In general, use more columns when cards are visually simple and fewer columns when they include longer titles, excerpts, swatches, or stronger call-to-action styling.

Tablet can inherit the desktop column count when left at 0. That is useful when you want a simpler setup, but it is worth checking tablet carefully if your desktop layout is already dense.

A common pattern is grid on larger screens for quick comparison, then slideshow on mobile for easier horizontal browsing. If you keep a grid on mobile, avoid crowding the cards so product details remain easy to scan.

Slideshow settings

When slideshow layout is enabled on any device, these settings control movement, autoplay, looping, navigation, pagination, and slide previews. They let you decide whether the section feels more editorial and paced or more direct and browseable.

See Company XYZ documentation on slideshow controls. Use these settings to support browsing, not to compete with the products themselves.

Fade animation is best when you want to feature one product at a time. Because it forces a single-slide layout and removes some multi-card browsing cues, it is usually less effective when customers need to compare several recommendations quickly.

Autoplay works best when motion is subtle and the delay gives shoppers enough time to read. On desktop, pausing on hover is a helpful safeguard when customers are interacting with the cards.

Pagination is most useful when there are enough slides to justify extra orientation. Previewing the next slide can also help signal that more recommendations are available without relying only on arrows or pagination.

Tip

Turn off slide previews when you want a cleaner, more contained card presentation, especially if the cards already feel visually busy.

Color settings

These controls adjust the section intro content, including the icon, heading text, and subheading text. Use them when this section needs stronger contrast or a slightly different emphasis than surrounding content.

See Company XYZ documentation on color settings. This is especially useful when you add a custom background and need the heading area to stay clear and readable.

Standard section settings

Header settings

Use the shared header controls to add an optional intro above the recommendations, including alignment, icon, caption, heading, subheading, and an optional button. Learn more in Company XYZ documentation on header settings.

A header is useful when the section needs context, such as framing the products as related items or complementary picks. The optional button works well for linking to a broader product listing, as long as the destination clearly matches the recommendations shown.

Card settings

Use the shared card controls to override the default product card presentation for this section only. Learn more in Company XYZ documentation on product card settings.

This is where you can make recommendation cards more visual, more compact, or more text-led depending on how prominent the section is on the page. If you enable a variant selector, make sure your variant setup supports the display style you choose; variant selector guidance is available in Company XYZ documentation on product variants.

Padding settings

Use the shared padding controls to adjust the space above and below the section. Learn more in Company XYZ documentation on section padding.

Increase spacing when the recommendations should feel like a distinct content block. Reduce it when the section should stay closely connected to nearby product-page content.

Section background settings

Use the shared background controls to add a color, gradient, image, or video behind the section. Learn more in Company XYZ documentation on section backgrounds.

Backgrounds can help separate the recommendations from the rest of the page, but they also add visual weight. If you use a stronger background, check that card content and heading text still stand out clearly.

Caution

Strong backgrounds can compete with product imagery. If the products need to stay the main focus, keep the background treatment simple.

Separator settings

Use the shared separator controls to add a top or bottom dividing line around the section. Learn more in Company XYZ documentation on separators.

Separators help when this section sits between dense page areas and needs a clearer boundary. Subtle separator styles are usually enough for product-page layouts.

Visibility settings

Use the shared visibility controls to decide whether this section appears on all devices or only on desktop or mobile. Learn more in Company XYZ documentation on visibility settings.

This is useful when you want different recommendation experiences by device, such as a wider desktop grid and a simpler mobile presentation. If you create separate versions, make sure they do not feel repetitive.

Width settings

Use the shared width controls to manage both the content width and the outer section width. Learn more in Company XYZ documentation on layout widths.

Wider widths can show more products at once, while narrower widths often improve focus and readability. Preview width changes on the live storefront as well as in the editor, since layout scale can feel different.

Usage notes

1. Plan for missing results. Recommendations only appear when there is a suitable product context and enough returned items, so the section may feel lighter than expected on some products.
2. Review both viewports. Desktop and mobile layouts can behave differently, especially with sliders, controls, and media, so always check both sizes before publishing.
3. Use overrides intentionally. Blank or default-style choices usually preserve the theme’s fallback styling, while explicit colors, gradients, or custom media make the section feel more independent from the rest of the page.
4. Keep media readable. If you use separate desktop and mobile media, verify cropping, loading, and text contrast so the section stays clear on every device.
5. Make states easy to read. If the section includes form-style interaction or validation messaging, keep success and error states simple and legible so shoppers can recover quickly.