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:
-
Visually match add-ons (like “Include Lids”) to the variant selector.
-
Position them directly under the variant pickers.
-
Use conditional logic: show only lids matching the selected cup size.
-
Add to cart as separate products with their own SKUs.
Solutions Breakdown
- 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
- 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).
- 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.
- 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:
-
Buyer selects “8oz” cup variant.
-
Lid add-ons shown = only those marked for 8oz.
-
Lid options styled to match variant pickers.
-
Buyer clicks “White Lids 8oz” add-on.
-
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 
