A Product Add-Ons widget shows a short list of add-on products on your Shopify product page, each with a checkbox beside it. When the shopper clicks your theme's product page Add to Cart button, the product they are viewing and every add-on they ticked go into the cart together. The add-ons that work best are inexpensive items that clearly belong with the main product, so a shopper understands them at a glance without opening another page.
This guide takes you from a new widget to a live one: create the widget, choose its products, write its text, set how each add-on displays, install it in your theme, and test it before turning on Live Mode.
Note: A Product Add-Ons widget is built in Cart & Merchandising > Widgets and renders on the product page. A single opt-in toggle inside the cart for a service such as gift wrapping or shipping protection is a different feature, the Cart Add-On Smart Cart app, which is set up in the Smart Cart editor and covered in Rebuy Cart Add-On Smart Cart App.
How a Product Add-Ons widget adds products to the cart
A Product Add-Ons widget has no Add to Cart button of its own. It listens for your product page's add to cart form, and when the shopper submits that form, the widget adds every ticked add-on in its own request right after the main product. Your theme, or Rebuy's Smart Cart if you use it, adds the main product the way it always does.
These behaviors follow from that design:
No add-on is ticked when the page loads. The shopper ticks each add-on they want by clicking its checkbox, its title, or its image. There is no setting to pre-tick an add-on.
Nothing extra is added when nothing is ticked. The shopper's Add to Cart click adds only the main product.
Each ticked add-on is added at a quantity of 1. The add-on quantity does not follow the quantity the shopper picked for the main product. To add a different quantity of an add-on, set it with a Product Quantity RETURN rule in the widget's Data Source.
The Total Price line counts the ticked add-ons only. It appears once at least one add-on is ticked, adds up the ticked add-ons, and does not include the main product.
Place the widget directly above your theme's Add to Cart button
The best position for a Product Add-Ons widget on the product page is directly above your theme's Add to Cart button. The add-on widget has no Add to Cart button of its own. It hooks your product page's existing form, so the ticked add-ons are submitted along with the main product when the shopper clicks your theme's Add to Cart button. A shopper who never scrolls past that button never sees the add-ons, and a widget placed below it is read after the decision has already been made.
The widget needs your theme's standard product form
A Product Add-Ons widget can only add add-ons on a product page whose Add to Cart button submits a Shopify product form, meaning a form that posts to your store's /cart/add address. The widget attaches to every such form on the page when the page loads. Most Shopify themes use this form, so the widget works without changes.
A Product Add-Ons widget cannot add add-ons in these cases, because there is no form submission for it to attach to:
The theme's Add to Cart button adds to the cart with its own script and never submits the product form.
The product form is inserted into the page after the page has loaded.
The storefront is headless and does not use Shopify's online store product form.
For any of these setups, a Dynamic Bundle widget is the closer fit, since it ticks products the same way and adds them with its own Add to Cart button. See How to Create a Dynamic Bundle Widget.
Step 1: Create the Product Add-Ons widget
A Product Add-Ons widget is created on the Create New Widget page, starting from the Rebuy Product Add-Ons card.
In the Rebuy admin sidebar, click Cart & Merchandising and then Widgets. On some plans the sidebar shows a single Merchandising Widgets entry instead, which opens the same Widgets page.
Click Create New. If this is your store's first widget, the button reads Create Your First Widget instead.
Find the Rebuy Product Add-Ons card. To find it quickly, type add-ons into the search bar, or set the Location dropdown above the cards to Product Page.
Click Create on the Rebuy Product Add-Ons card.
The widget editor opens with your Product Add-Ons widget created. Rebuy does not ask you to choose a location for this widget, because the Rebuy Product Add-Ons card offers only one location, Product Page. The editor's top bar names the widget type, Rebuy Product Add-Ons, and shows the WIDGET ID you need for installation.
The goal buttons, the location picker, and the Your Widgets table are covered in Widget Dashboard Page: Create a Widget and Manage the Ones You Have.
Live Mode is already on when the widget is created
A new Product Add-Ons widget is created with Live Mode on, so it becomes visible to shoppers the moment you install it in your theme.
Important: If you want to test before shoppers see the widget, toggle Live Mode off in the widget editor before you install it, then check it with Rebuy Preview Mode.
Step 2: Choose which products the widget offers
The DATA SOURCE section at the top of the widget editor decides which add-on products the widget offers. A new Product Add-Ons widget uses Recommended (AI), which returns AI recommendations based on the product being viewed, with no rules to write.
In the widget editor, find the DATA SOURCE section.
Open the Endpoint dropdown. Choose one of Rebuy's endpoints under Default Endpoints, or one of your own data sources under Custom Endpoints.
To build your own rules, click Create new data source, or click Edit to open the selected custom data source in a new tab.
Set Max Number of Products displayed to how many add-ons the widget should offer. It starts at 2 and goes up to 12 for a Product Add-Ons widget.
Click Save.
To offer the same hand-picked accessories every time, such as a case and a screen protector for a phone, connect a custom data source that returns those products. In a custom data source, keep Filter input products checked so the widget never offers the product the shopper is already viewing. For writing rules, see Data Sources 101 and How to Configure Product Page and Cart Based Rules.
A Product Add-Ons widget hides itself when its Data Source returns no products. That makes the Data Source rules your visibility control as well: a widget that should only appear on some products shows on the products your IF rules match, and nowhere else.
Step 3: Write the widget's text
The Language tab holds the text a Product Add-Ons widget shows to shoppers. A new widget opens with the title You may also like.
In the widget editor, open Language.
Set Title to the heading shoppers should see above the add-ons, such as Complete your setup.
Set Super Title for a smaller line above the title, and Description for a sentence below it. Leave either empty to hide it.
Set Total Price Label, the text shown before the total of the ticked add-ons. A new widget starts with Total Price followed by a colon.
Set Learn More Label, the text of the link under each add-on that opens its product page. It starts as Learn More.
Click Save.
The Call to Action labels on the Language tab, such as Add to Cart, Adding to Cart, and Added to Cart, do not appear on a Product Add-Ons widget, because the widget has no button. The button shoppers click is your theme's own Add to Cart button, and its text is set in your Shopify theme. The Sold Out Label field does not appear on this widget either: an out-of-stock variant is listed in the variant dropdown as unavailable and marked - OOS.
Step 4: Set how each add-on is displayed
The Widget settings and Product settings screens control what each add-on shows and how the shopper picks a variant. The table below lists the settings that change how a Product Add-Ons widget looks or behaves, where each one is, and what it does on this widget.
Setting | Where it is | What it does on a Product Add-Ons widget |
Enable Variant Selector | Widget settings > Variant Selector | Shows a variant picker on add-ons that have more than one variant. It is on unless you turn it off. |
Variant Selector Type | Widget settings > Variant Selector | Select shows a dropdown. Buttons shows swatch buttons, with color swatches for an option named Color or Colour. |
Display Variant Options | Product settings > Product Options | Default, Always, and Dynamic all show the variant picker on this widget. Never hides it. |
Hide Out of Stock Variants | Product settings > Product Options | Removes out-of-stock values from Buttons swatches. In a Select dropdown, out-of-stock variants stay listed, greyed out and marked - OOS. |
Display Product Description, Display Variant Title, Display Product Vendor | Product settings > Product Options | Each one adds that detail under the add-on's title. |
Learn More | Product settings > General > Product Redirect | Product shows a link under each add-on that opens its product page. Disabled removes the link. Clicking an add-on's title ticks it rather than opening its page. |
Enable Quick View | Product settings > Quick View Options | Makes the add-on's image open a Quick View window where the shopper can see details and pick a variant. The window has no add button, so the shopper still ticks the checkbox to add the product. |
Product Images | Product settings > Product Images | Sets fixed image height and width, image corner radius, and whether the image shows the selected variant or the product. |
Add to Cart Redirect | Widget settings > View Options | Where the shopper goes once the add-ons are added: None (Stay on Current Page), Redirect to Cart, or Redirect to Checkout. With Smart Cart enabled, Redirect to Cart does not redirect. |
Enable Timer | Widget settings > Timer | Adds a countdown above the add-ons, with its own Timer Title, Minutes, and Seconds. |
A Product Add-Ons widget has no Display Type and no Screens settings. It always renders inline on the product page, it cannot be shown as a pop-up, and it has no carousel or per-device grid columns. Match On Variant, Match On Selling Plan, and the Product Quantity Controls group are not available on this widget type either.
Step 5: Install the widget on your product page template
A Product Add-Ons widget renders where you place it in your Shopify theme, so it does nothing until it is installed. Click INSTALL in the widget editor's top bar to open the widget's own installation guide, then use the method that matches your theme.
Online Store 2.0 themes: add a Rebuy app block to your product page template and enter the widget ID. Leave Enable Product ID checked in the app block's settings, since that is how the widget learns which product page it is on. Full steps: Installing Rebuy Widgets via App Blocks in 2.0 Themes.
Vintage (1.0) themes: copy the container from Advanced > Dynamic Placement > HTML Div Placement in the widget editor and paste it into your product template, above the Add to Cart button. For a Product Add-Ons widget it has the form
<div data-rebuy-id="12345" data-rebuy-shopify-product-ids="{{ product.id }}"></div>, with your widget ID in place of12345. Keep the{{ product.id }}value exactly as generated. Full steps: Manually Installing Widgets.
Move the widget above the Add to Cart button
If the Product Add-Ons widget renders below your theme's Add to Cart button, move it up so shoppers see the add-ons before they click. On a 2.0 theme, drag the Rebuy Widget app block above the product form in Shopify's theme editor and save the theme.
When dragging cannot reach the spot, use Dynamic Placement in the widget editor:
Open Display, then the Breakpoints card for each screen size: Large Screen, Medium Screen, and Small Screen.
Turn on Enable Dynamic Placement.
Enter a Placement Selector, the CSS selector of the element on your product page the widget should attach to.
Set Placement Location to Before, After, Prepend, or Append.
Click Save.
For help finding a selector, see Dynamic Placement Selectors.
Step 6: Test the widget, then turn on Live Mode
Test a Product Add-Ons widget by adding to the cart from a real product page, because the widget only adds add-ons when your theme's product form is submitted.
With Live Mode off, open a product page on your storefront in Rebuy Preview Mode.
Tick one or more add-ons and confirm the Total Price line shows their total.
Click your theme's Add to Cart button.
Open your cart page and confirm the main product and every ticked add-on are in the cart.
Return to the widget editor, toggle Live Mode on, and click Save.
Optional: discount the add-ons
A Product Add-Ons widget can discount the add-ons a shopper adds from it. The discount applies to the add-on products only, never to the main product, and one discount applies to every add-on in the widget.
In the widget editor, open Discount.
Choose a Discount Type: Percentage, Fixed, or None, then enter the amount.
Toggle Discounted By Functions on, so the discount applies at checkout through Shopify Functions.
Set Compare Price With to Price or Compare at Price.
Optionally enter a Discount Message, shown in the cart and at checkout, and a Quantity, the most units of one add-on line that get the discount.
Click Save.
If Discounted By Functions is left off, the widget shows the discounted price, but the shopper is charged full price at checkout. For the full picture, see the Rebuy Discounting Overview.
Style the widget to match your store
The Display tab of the widget editor holds the styling for a Product Add-Ons widget. Set Theme to Custom to reveal color fields that need no code, or add CSS in the CSS box for anything those fields cannot reach, such as fonts, spacing, and the checkbox style. Scope every selector to your widget ID, as in #rebuy-widget-12345 .rebuy-addon__item, since CSS in that box applies to the whole page.
For ready-made CSS for the add-on list, titles, prices, the total line, and the checkboxes, see Customize the Product Add-Ons Widget. For how CSS works across all Rebuy widgets, see Enhance Widget Styling Using Custom CSS Code.
What a Product Add-Ons widget does not do
The following points describe what a Product Add-Ons widget does not support, each with the alternative where one exists.
A Product Add-Ons widget does not have its own Add to Cart button. Add-ons are added only through your theme's product form. For a widget with its own button, use a Dynamic Bundle widget.
A Product Add-Ons widget cannot pre-tick add-ons. Every add-on starts unticked.
A Product Add-Ons widget adds each add-on at a quantity of 1. The main product's quantity does not carry over. A Product Quantity RETURN rule in the Data Source sets a different fixed quantity.
A Product Add-Ons widget cannot be a pop-up and has no carousel or per-device layout settings. For those, use a Product Cross-Sell widget: see How to Create a Product Page Cross-Sell Widget.
A Product Add-Ons widget offers at most 12 products.
A Product Add-Ons widget has no subscription option for shoppers. It has no Subscribe and Save choice on its add-ons.
A Product Add-Ons widget discount is set once for the whole widget. It cannot give each add-on or each variant its own discount.
Frequently Asked Questions
How many products can a Product Add-Ons widget show?
A Product Add-Ons widget can show up to 12 add-on products. A new widget starts at 2. To change it, set Max Number of Products displayed in the widget editor's DATA SOURCE section and click Save. The widget shows fewer than that number whenever its Data Source returns fewer products.
Why isn't the ticked add-on added to the cart with the main product?
When a shopper ticks an add-on in a Product Add-Ons widget and clicks Add to Cart but only the main product lands in the cart, check these causes in order:
The cart drawer has not refreshed. The widget adds the add-ons in their own request right after the main product. Open the cart page. If the add-on is there, the widget added it, and your theme's cart drawer is not refreshing to show it.
The theme does not submit a product form. The widget only adds add-ons when the product page's Add to Cart button submits a Shopify product form. See "The widget needs your theme's standard product form" in this article.
The ticked variant is sold out. A sold-out variant is never added. Pick an available variant of the add-on and try again.
Custom code in a callback is failing. If anything is enabled under Advanced > Callbacks, disable it, reload the product page, and test again.
Why isn't my Product Add-Ons widget showing on the product page?
A Product Add-Ons widget that does not appear on the product page is usually one of the following:
The widget is not installed on the product page template. Confirm the Rebuy app block is on the product template with this widget's ID, or that the container is in the theme file.
The product ID is not reaching the widget. Confirm Enable Product ID is checked on the app block, or that the manual container includes
data-rebuy-shopify-product-ids="{{ product.id }}".The Data Source returns no products for this product. The widget hides itself when its rules return nothing. Check the rules with Previewing Data Sources.
Live Mode is off. With Live Mode off, the widget renders only in Rebuy Preview Mode.
For broader troubleshooting, see Why Isn't My Widget Showing?.
Does a Product Add-Ons discount stay on the add-on if the shopper removes the main product?
Yes, a Product Add-Ons discount stays on the add-on when the shopper removes the main product from the cart. The discount is attached to the add-on's own cart line, so it does not depend on the main product being in the cart. The widget's work ends once the add-ons are added, and it does not remove products or discounts afterward.
Can each add-on in a Product Add-Ons widget have a different discount?
No, a Product Add-Ons widget applies one discount to every add-on it adds. There is no discount setting per product or per variant. To give some add-ons a different discount, build a second Product Add-Ons widget for those products with its own Data Source and discount, and install both on the product page.
Can a Product Add-Ons widget add an add-on without the main product?
No, a Product Add-Ons widget only adds its add-ons when the shopper adds the main product with your theme's Add to Cart button. To let shoppers add a recommended product on its own, create a Product Cross-Sell widget, which gives each product its own Add to Cart button, or a Dynamic Bundle widget.