How to show a row of products: suggestions, your picks or recently viewed
Add a row of products to your product, cart or home page: Shopify's suggestions, products you pick, or what a shopper recently viewed. Show it as a slider, a grid or a bundle shoppers add in one tap.
A shopper looking at one product is often a good fit for another. A product row puts a few of them right there, each with its own Add to cart button.
TL;DR
Go to Store Widgets, click Create Widget and pick Product row. Under Products to show, keep Automatic (recommended) or choose another source. Pick a layout in the Design tab, click Publish, then Add to store. Choose your row in the Nudgesmart widget block's Widget setting and click Save.
Step 1 · Create the row
In Nudgesmart, open Store Widgets and click Create Widget. Pick Product row. It's under Products & cart.
Widget library with the Product row widget highlighted under Products & cart
Screenshot coming soon
Give it a clear name under Widget information, such as "Goes well with". Unless you set a heading, shoppers see the name above the row.
Step 2 · Choose which products to show
In the Content tab, open the Settings section under Product row, and choose an option under Products to show.
Product row settings with the Products to show options
Screenshot coming soon
- Automatic (recommended). Shows products that go well with the one on the page. If Shopify has none, it shows similar products instead.
- Goes well with. Products you've set as complementary to this one, in Shopify's free Search & Discovery app. If you haven't set any, the row stays hidden.
- Similar products. Products Shopify finds similar to this one. Shopify works these out on its own, from your products and your sales.
- Products I pick. Click Pick products and choose up to 12. They show in the order you pick. Use the arrows to reorder them.
- Recently viewed. The products this shopper has looked at, most recent first. It needs one extra switch; see Recently viewed below.
Automatic, Goes well with and Similar products need a product to suggest from, so they work on product pages and on the cart page. On the cart page, they suggest from the first item in the cart. For your home page or other pages, use Products I pick or Recently viewed.
The row never shows the product the shopper is looking at, sold-out or unavailable products, or the same product twice.
Under More options:
- Most products to show. From 1 to 12. If you leave it empty, it uses 8. Shopify's own suggestions (Automatic, Goes well with and Similar products) bring up to 10. The slider shows up to 8, and the cart page shows up to 4.
- "Add all" button text and "Total" text. Optional, for the bundle layout. Leave them empty for "Add all" and "Total".
Step 3 · Pick a layout
Open the Design tab and choose a Layout and a Style.
- Slider. Shoppers swipe through the products. On bigger screens, arrows show too.
- Grid. Products side by side: 2 across on phones, 4 on bigger screens.
- Bundle — add together. Each product has a tick box, all ticked to start. A running total shows under them, and one Add all button adds every ticked product to the cart in one tap.
The bundle doesn't give a discount. It adds the products at their normal prices. Products with options, such as sizes, show Choose options instead of a tick box and stay out of the total, because the shopper has to pick their option on that product's page first.
Each product card shows a photo, the name, the price and one button: Add to cart, or Choose options for a product with sizes or colors.
Step 4 · Publish and add it to your store
In the Visibility card, click Publish. Then click Add to store.
Add to store lists the best spots:
- Product pages, below the product.
- The cart page.
Click the button for a page to open the theme editor there, with the Nudgesmart widget block added. Choose your row in the block's Widget setting, then click Save.
To add it by hand, go to Online Store → Themes → Customize, open the page, click Add block, then Apps, and pick Nudgesmart widget.
Recently viewed
Recently viewed remembers the products each shopper opens, so the row can show them again later. It needs the Nudgesmart site widgets app embed turned on, because that's what records the products a shopper opens across your store. The row itself also records the product it sits on.
When you pick Recently viewed, Add to store shows a Turn on 'Nudgesmart site widgets' step. Click Turn on, then Save in the theme editor. To do it by hand, go to Online Store → Themes → Customize, click App embeds, turn on Nudgesmart site widgets and click Save. It's the same switch that shows the WhatsApp and chat buttons.
How it handles shoppers' privacy:
- It only records with consent. If your store asks shoppers about cookies, nothing is recorded until a shopper allows it.
- It stays in the shopper's browser. It keeps the last 12 products they viewed, and nothing is sent to Nudgesmart.
- A new shopper sees nothing yet. The row stays hidden until they've viewed a product.
When a shopper has a code
If your popups give shoppers a discount code, each product card can show an estimate of its price with that code. Under When a shopper has a code, tick Show the price with the code. It's off by default.
The card then shows a line such as "≈ $45 with your code". It's an estimate, never a crossed-out price, because other apps' discounts can't be seen and checkout sets the final price. It only shows for codes with no minimum spend. The bundle never shows a discounted total. With a percentage code, it says the discount applies at checkout instead.
Tips
- Start with Automatic on product pages. It needs no setup, and it falls back to similar products when Shopify has nothing better.
- Set up "Goes well with" for your best sellers. In Shopify's Search & Discovery app, add complementary products to the products that sell most. Those are the suggestions shoppers are most likely to add.
- Use the bundle for things bought together. A cleanser, toner and moisturizer, or a camera, case and memory card. Products without options work best, since they can be added in one tap.
Common pitfalls
- The row is empty on my product page. Shopify may not have suggestions for that product yet. They come from your sales and product details, so new stores and new products often have none. Switch to Products I pick, or set up complementary products in Search & Discovery and use Goes well with. In the theme editor, the block says "No suggestions for this product yet." Shoppers just don't see the row.
- The row doesn't show on my home page. Suggestions need a product. On the home page, use Products I pick or Recently viewed.
- Recently viewed shows nothing. Turn on Nudgesmart site widgets under App embeds, then accept cookies on your store and open a few products. The row shows them on the next page you visit.
- I clicked Publish and it didn't publish. With Products I pick, you need at least one product. Click Pick products, then Publish again.
- The row shows fewer products than I set. Sold-out and unavailable products, and the product being viewed, are left out. The cart page shows up to 4.
What to read next
How to add a sticky add to cart bar
Keep your Add to cart button in reach on product pages once shoppers scroll past it. It uses your theme's own button, so the option a shopper picked is always the one added.
How to tag products on a photo with Shop the look
Put numbered product spots on a lifestyle photo. Shoppers tap a spot to see the product and add it to their cart, without leaving the page.