Product addons that look the same as variant picker options

[BrenAdams]

Hi all,

I want to create some product add-ons, but want them to look the same as the variant picker - and be placed directly under the variant picker options. For example, If I sell different size cups (8oz, 10oz etc), I want to create an add-on that gives the buyer the ability to add cup lids (a separate product with a separate sku)

You can see an exact example for “include lids:” section below - the Cup size and Pack size are variants and the ‘include lids’ is the separate product add-on. Direct link here: https://www.papercupsdirect.com/collections/double-wall-cups/products/white-double-wall?variant=31987313999953

Also, I want to use conditional logic so that if I select 8oz cups, only the 8oz lid add-on will be available.

And finally, if these add-ons are added to the cart, they are displayed as their own product with their own sku (separate to the main product).

Thanks in advance.

[goldi07]

Hello @BrenAdams

To implement product add-ons that look like variant pickers and behave like separate products with conditional logic in Shopify, here’s a complete breakdown of how to replicate the “Include Lids” section (just like on papercupsdirect.com) and make it work seamlessly:

Goals Recap:

1. Visually match add-ons (like “Include Lids”) to the variant selector.

2. Position them directly under the variant pickers.

3. Use conditional logic: show only lids matching the selected cup size.

4. Add to cart as separate products with their own SKUs.

Solutions Breakdown

1. Use a Product Options App with Advanced Styling + Logic
   You’ll need an app that:

. Allows creating add-ons (linked or dummy products)

. Supports conditional logic

. Lets you customize styles to match your variant picker

Recommended App:
. Infinite Options by ShopPad

. Advanced Product Options by Mageworx

. Dynamic Product Options by ITORIS (for Shopify Plus)

These allow:

. Separate SKU add-ons (some require custom metafields or bundles)

. Conditional logic

. Full control of the layout

2. Mimic Variant Picker UI with Custom CSS
   Once the add-on options are inserted (via app or custom code), you’ll want them to look like the variant picker buttons.

Add this to your theme’s theme.css or base.css:

.product-addon-option {
  display: inline-block;
  padding: 12px 18px;
  margin: 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}
.product-addon-option.selected {
  background-color: #a6ce39; /* Match green variant button */
  color: white;
}
.product-addon-option.popular::after {
  content: "★ POPULAR";
  display: block;
  font-size: 10px;
  margin-top: 4px;
  color: #fff;
  background-color: #b88cf3;
  padding: 2px 4px;
  border-radius: 4px;
}

Attach the .product-addon-option class to each lid choice using the app’s custom class input or via inline code (if using HTML embeds).

3. Add Conditional Logic (e.g., Only show 8oz lids when 8oz is selected)
   Most apps above support it natively.

If coding manually:

. Use JavaScript to listen to variant selection

. Show/hide corresponding lid options

Example (JS snippet):

document.querySelectorAll('[name="Cup Size"]').forEach(btn => {
  btn.addEventListener('click', function() {
    const size = this.innerText.trim();
    document.querySelectorAll('.lid-addon').forEach(el => {
      el.style.display = el.classList.contains(`lid-${size}`) ? 'inline-block' : 'none';
    });
  });
});

Your lid add-ons would have class names like .lid-addon lid-8oz, .lid-addon lid-12oz, etc.

4. Ensure Add-Ons Add as Separate Products (Not Variants)
   You need:

. App that adds add-ons as separate line items in cart

. Use Shopify’s cart.js if coding manually

Some apps to handle this correctly:

. Bundler – Product Bundles

. Advanced Product Options by Mageworx (SKU control per option)

Final Workflow Example:

1. Buyer selects “8oz” cup variant.

2. Lid add-ons shown = only those marked for 8oz.

3. Lid options styled to match variant pickers.

4. Buyer clicks “White Lids 8oz” add-on.

5. Both cup and lid products added to cart with distinct SKUs.

Extra Tips
. Add a visual label like “POPULAR” using app’s UI badge feature or your own custom class.

. Use metafields or tags to filter which lids to show per variant (for scalability).

Thank you

[GloboPrdOptions]

Hi,

Thanks for your detailed explanation!

You can achieve exactly what you described by using our app, Globo Product Options. The features you mentioned — showing product add-ons styled like variant pickers, positioning them under the main options, applying conditional logic (e.g. show 8oz lid only when 8oz cup is selected), and sending add-ons to the cart as separate products with their own SKUs — are all supported in the PREMIUM version.

Once you’ve installed the app, you can open the live chat within the app to reach our team. We can assist with setup to match your store’s layout and needs.

Best regards,

[Easify-Ariel]

Hi @BrenAdams

Based on what you described, Easify Product Options can handle this use case quite well

To help you visualize it better, I created a similar demo:

• This is the result:

• This is the app setup:

In this setup, Cup Size (8oz, 10oz, etc.) and Pack Size remain your existing Shopify variants. The Include Lids section is created using the Add-on Products feature in Easify Product Options.

For example, you can create separate Shopify products such as White Lid 8oz, Black Lid 8oz, White Reclosable Lid 8oz, White Lid 10oz, and so on. Since these are actual Shopify products, each lid keeps its own SKU, inventory, pricing, and fulfillment workflow completely separate from the cup product.

You can then use Conditional Logic to automatically display the correct lid options based on the cup size selected by the customer. For example, if the customer selects an 8oz Cup, only the compatible 8oz Lid options will be displayed. If they switch to a 10oz Cup, the app can automatically hide the 8oz lids and show only the 10oz lid options.

When the customer selects a lid and clicks Add to Cart, both the cup product and the lid product are added to the cart as separate line items. This means each product maintains its own SKU and inventory tracking rather than simply adding an extra charge to the main product.

If your goal is to offer matching lid products that automatically change based on the selected cup size while keeping separate SKUs and inventory tracking for each lid, Easify Product Options could be a solution worth considering.