Installation and user guide

1. Install

1. In your BigCommerce control panel, go to Apps › App marketplace, find Add-On Picker and click Install.
2. Review the permissions and click Confirm. The app needs:
   • Products: Modify, to read your catalog and save each product's add-on list as a product metafield.
   • Content: Modify, to add and update the storefront script.
   • Storefront API tokens: Generate, so the storefront list can read add-ons through the Storefront GraphQL API.
   • App Extensions: Manage, for the "Add-ons" item in the product list menu.
3. The app opens on its Products page. During install it creates a Storefront API token, adds one script named "Add-On Picker" in Storefront › Script Manager, and adds an "Add-ons" item to the product action menu. No theme files are changed.

2. Check the setup

Open Apps › Add-On Picker › Settings. Under Setup status, all four checks should show ✅: App permissions, Storefront API token, Product page widget script, and the "Add-ons" entry in the product list menu. If a check shows ❌, its message explains why. Press Save to run the setup again.

3. Add add-ons to a product

1. In the app's Products tab, find the product shoppers will be looking at and click Edit.
2. Under "Find products to add", search by name or SKU and click Add on each product you want to offer.
3. Use the arrows to set the order shoppers see, then click Save. "Add-ons saved." appears.

You can add up to 20 add-ons to a product, and the same add-on can be offered on as many products as you like. The same editor also opens from Products › View: open the ⋯ menu on a product row and choose Add-ons. It opens in a side panel.

4. Find products quickly

The Products tab lists your catalog with each product's stock status and add-on count. Use:

• Sort by: Name (A–Z) or Newest first.
• Add-ons: With add-ons or Without add-ons, to see which pages still need setting up.
• Stock: In stock (can still be bought), Low stock, Some sold out (some variants sold out, others left) or Out of stock (nothing left).
• Visibility: Visible or Hidden.

Products without inventory tracking show "Not tracked". Low stock uses each product's low stock level. The list remembers your search and filters when you open a product and come back.

5. What shoppers see

• A checklist titled "Add to your order" (you can change the heading) above the quantity box, with each add-on's image, name and price.
• When an add-on with options is ticked, its option dropdowns appear. Price, image and stock follow the shopper's choices, and sold-out choices are labelled "(Out of stock)".
• If a required option is missing, a short message such as "Choose size for [product name]." appears and nothing is added to the cart.
• Add-ons with no stock left are greyed out and can't be ticked. Hidden or unavailable products are left out of the list.
• On Add to Cart, the ticked add-ons go into the cart first, then your theme adds the main product as usual, so its cart preview and counters update. Each item is its own cart line.

Saved add-on lists show on the storefront within about 10 seconds. Price and stock changes can take up to a minute, because the storefront caches product data.

6. Settings

• Show add-ons on product pages: untick and Save to hide every list without losing your setup. Tick it and Save to bring the lists back.
• Heading: the text above the list.
• Placement (advanced): leave empty to place the list above the quantity box automatically. For a theme with an unusual product page, enter the CSS selector of the element the list should appear before, for example .form-field--increments.

Settings changes can take a few minutes to reach the storefront, because browsers cache the script.

7. Cookie consent

The storefront script is registered in the Functional cookie category. If your store shows a cookie consent banner (Settings › Security & privacy in the control panel), the add-on list appears once a shopper allows functional cookies. Shoppers who decline them still see the product page and can add the main product as usual. Stores without a consent banner show the list to everyone.

8. Troubleshooting

• The list doesn't appear. Check Settings › Setup status and press Save if any check shows ❌. Make sure the product has at least one visible, purchasable add-on, wait 10 seconds and refresh the product page. On stores with a cookie consent banner, allow functional cookies first.
• The list appears in the wrong place. Set Placement (advanced) in Settings to the element it should appear before.
• You changed your store's domain. Open Settings and press Save. The storefront token is tied to your primary storefront address, and the Setup status flags a token that no longer matches.
• An add-on isn't offered. Products with required text, file upload or checkbox fields can't be added from the checklist, so they are left out.
• Previewing a store that isn't live yet. Open the storefront with View storefront while signed in to the control panel, so the cart works on your preview.

9. Uninstall

Go to Apps › My apps, find Add-On Picker and click Uninstall. BigCommerce removes the storefront script and the "Add-ons" menu item, and the app deletes the credentials it stored for your store. Add-on lists stay on your products as metafields (namespace addon_picker), so reinstalling restores them. Nothing is shown on the storefront while the app is uninstalled.

10. Known limits

• Stencil themes on the default storefront only. Catalyst and other headless storefronts aren't supported yet.
• Each ticked add-on is added with a quantity of 1.
• Add-ons go into the cart just before the main product. If the main product then fails, for example because it has just sold out, the add-ons stay in the cart.

Need help?

Email support@myselection.com.au with your store URL and the product you're setting up. You can also reach us from the help link at the bottom of every page in the app.