Cross-sell products
Overview
Use Cross-sell products to show a hand-picked set of add-ons or complementary items. This section is controlled directly in the Theme Editor: it does not read Shopify Search & Discovery recommendations.
Choose it when every visitor should see the same curated products, such as accessories beside a featured category or care products below a landing-page offer.
Add the section
CREATE A CROSS-SELL SECTION
| Open a template | In the Theme Editor, choose the template where the products should appear. |
|---|---|
| Add the section | Select Add section and choose Cross-sell products. |
| Select products | Open Selected products and add products in the order you want to present them. |
| Set the display limit | Use Products to show to display between two and eight selected products. |
Manual product source
Selected products supports up to 12 products. Products to show limits how many of that selection are rendered; it does not automatically find related items.
Add a heading and supporting content
Add theme blocks inside the section to create its header content. A Custom text block can combine a subheading, heading, text, and button. Arrange the blocks in the sidebar to control their reading order above the product list.
Choose a layout
LAYOUT STYLES
| Standard grid | Displays a familiar multi-column product grid. |
|---|---|
| Compact catalog | Uses a denser catalog presentation. |
| Editorial feature | Gives the product selection a more editorial composition. |
| Horizontal rail | Places products in a horizontally browsable row. |
Configure product cards
Use global product card settings to keep the section consistent with collection grids and other commerce sections. Turn the option off to control this section’s hover effect, title, price, vendor, variant options, badges, quick view, and card alignment independently.
Empty state
Empty text appears only when no products have been selected. Replace the default message if merchants who edit this template need a clearer instruction. Store visitors should normally see a completed product selection rather than the empty state.
Layout, color, and spacing
SECTION OPTIONS
| Full width | Use the full available page width. |
|---|---|
| Section layout | When Full width is off, choose Page, Content, Narrow, or Custom. |
| Color scheme | Apply a global color scheme to the section. |
| Section spacing | Adjust top and bottom spacing independently for desktop and mobile. |
Check the result
Preview the template at desktop and mobile widths. Confirm the selected product order, the number of rendered cards, the chosen layout, and any quick-view or variant controls.
Troubleshooting
If the empty message appears, add products under Selected products. If fewer products appear than expected, raise Products to show and confirm each product is active and available to the Online Store. If card options are unavailable, disable Use global settings.