Shopify theme with inline cross-sell slider

A Shopify theme with an inline cross-sell slider shows complementary products on the product page or in the cart as horizontal cards that slide: image on the left, title and price, variant picker and an “Add” button on the same row. Shoppers complete their order without leaving the page, and the product page stays compact even with several suggestions.

Why a row-style cross-sell slider

The moment a shopper looks at a product is when they are most open to a logical add-on: the refill, the accessory, the care product. Offering it right then, with one-click add to cart, grows the basket without sending the shopper on a new journey.

The problem is space. Stacking four or five cards under the add to cart button pushes the rest of the product page down. The row format in a slider fixes that: one card at a time, a single row of height, and shoppers swipe to the next ones if they want to.

How the slider works in FullStack

This is the Cross-sells block, used with its “Cross-sells slider” preset. You add it to the info column of the Product section, or to the cart areas. The settings behind this layout:

• Products (products): the list of products to offer, up to 10 (max_products, 3 by default). The preset connects this list to the complementary products stored in Shopify’s recommendation metafield (complementary_products), so each product page shows its own add-ons.
• Layout type (layout_type) set to “Slider”, and display mode (display_mode) set to “Row” for the horizontal card.
• Products per page on desktop (per_page_desktop, 1 to 6) and mobile (per_page_mobile: 1, 1.8 or 2). The 1.8 option lets the next card peek in to invite a swipe.
• Navigation: pagination (show_pagination), arrows (show_arrows) and their style, rewind, autoplay and its speed.
• Price position (price_position): next to the title, below the title or inside the add button. Button position (button_position): next to or below the variant picker.
• Button as text or icon (button_content_type), image on or off, image width and ratio, card border.

For a multi-variant product, the card shows a variant picker before adding. For a single-variant product, the button is all it takes.

What the slider works with in FullStack

The Cross-sells block has two display modes. In “Column” mode each card is vertical (image on top, button below): that is the column cross-sells format, more visual. In “Row” mode it takes less height and fits neatly under the product form.

It also sits alongside the theme’s other upsell mechanics:

• the Cross-sell block (singular), for a single staged offer with its own title, description and image;
• tick-to-add cross-sells inside the product form, added to the cart together with the main product;
• the cart drawer areas, where the block is typically used for the empty state (“our best sellers”) or the cart summary.

Examples by store type

Skincare: the full routine

On a serum page, three complementary products (cleanser, cream, refill), one card per page, pagination on, price inside the add button. Shoppers see one add-on at a time and add it without thinking about layout.

Coffee and tea: the accessory

Filters, grinder, storage tin: row mode, variant picker next to the button (next_to_variant_select), autoplay on to rotate suggestions.

Fashion: the item that goes with it

On mobile, set per_page_mobile to 1.8 so the next card peeks in. Check the result: a cross-sell card already packs a lot of information, and it needs enough width for the size picker.

Best practices

• Three or four products are enough: the goal is an impulse add, not a whole catalog.
• Offer genuine add-ons to the product being viewed, not random items.
• Place the slider after the main add to cart button so it does not distract before the decision.
• A/B test your setup before rolling it out everywhere.

Limits to know

The block shows 10 products at most. With the preset, the list depends on the complementary products set in Shopify: if a product has none, pick products by hand in the products setting. The 1.8 mobile option turns off slider rewind. FullStack licensing and the free trial are on the pricing page.

FAQ

Do I need a cross-sell app to show this slider?

No. The Cross-sells block is native to FullStack and handles display, variant selection and add to cart.

Can each product page show different products?

Yes. The preset reads each product’s complementary products, so every page shows its own suggestions.

What is the difference between row and column mode?

In row mode the card is horizontal and compact. In column mode the image sits on top and the button below, for a more visual look.