Snap Bundle displays its own “Grab the Offer” button under the Quantity Selector Table. If your theme’s original Add to Cart button also stays on the page, customers see two buttons, which can confuse them or lead to duplicated actions.
How to Hide Your Theme’s Add to Cart Button to Avoid Duplication with Snap Bundle
Updated 2 months ago
Use case:
When using Snap Bundle, our app already displays its own “Grab the Offer” button under the Quantity Selector Table.
However, your original theme's Add to Cart button may still appear on the page, which can confuse customers or lead to duplicated actions.
To ensure a clean shopping experience and avoid conflicting buttons, you can hide the original Add to Cart button from your theme from our app settings.
⚠️ Warning: Hiding your theme's elements (especially the variant picker or quantity selector) may slightly affect your storefront layout depending on your theme structure. If anything looks off, feel free to contact our support team, we’re happy to help!
Expectations on Storefront (Before vs After)
Before (2 buttons showing):
After (Only Snap Bundle button):
Step-by-step guide to Hide the Add to Cart Button
Step 1: Open the Developer tool
Go to the product page using a Quantity Selector Table.
Press the F12 key (Windows) or Option + ⌘ + I (Mac) to open your browser’s Developer Tool.
A side/bottom panel will appear.
Click the arrow-in-a-box icon (top-left of the panel) to activate the Element Picker.
Step 2: Finding the element you want to hide
Hover over the Add to Cart button you want to remove.
Click it — the HTML will be highlighted in the panel.
Right-click the highlighted code → choose Copy > Copy Selector.
Step 3: Paste it into Snap Bundle
Go back to your Volume table settings and paste your selector into the Theme Add-to-cart button field.
Click Save to finalize your changes.
Step 4: Check the Result on Storefront
Refresh your product page.
You should now only see the “Grab the Offer” button from the Volume table and the theme’s Add to Cart button should be hidden.
🛠️ Note:
Want to hide other elements like the Quantity selector or Variant picker? You can follow the same steps.
If your browser doesn't support Developer Tool or the F12 key doesn't work, just contact our support team at [email protected] and we’ll help you identify the correct selector!
🧯 Troubleshooting
Issue | Possible Cause | Solution |
|---|---|---|
The button is still visible after saving | The selector might be incorrect or too generic | Double-check the selector. Use the most specific one possible. You can re-inspect the element to copy it again |
Page layout looks broken after hiding | You might have hidden a container or wrapper element instead of the button | Try using a more specific selector that targets only the button, not its container |
Want to undo changes | The hidden element needs to be restored | Go back to Snap Bundle settings, remove the selector or uncheck the "Hide" box, and click Save |
Need more help?
If you experience any issues or have questions, please don't hesitate to contact our support team at [email protected] or through our live chat - we're here to assist you!
FAQ
Why do I see two Add to Cart buttons when I use Snap Bundle?
How do I hide my theme’s Add to Cart button in Snap Bundle?
Open your browser’s Developer Tool (F12 on Windows, Option + ⌘ + I on Mac), use the Element Picker to select the Add to Cart button, right-click the highlighted code and choose Copy > Copy Selector, then paste that selector into the Theme Add-to-cart button field in your Volume table settings and click Save.
How do I find the CSS selector for my Add to Cart button?
On the product page, open the Developer Tool with F12 (Windows) or Option + ⌘ + I (Mac), click the arrow-in-a-box icon to activate the Element Picker, hover over the Add to Cart button, click it, then right-click the highlighted HTML and choose Copy > Copy Selector.
Why is my Add to Cart button still showing after I save the selector in Snap Bundle?
The selector is likely incorrect or too generic. Double-check it and use the most specific selector possible — you can re-inspect the element and copy it again.
My page layout looks broken after hiding the Add to Cart button. What went wrong?
You may have hidden a container or wrapper element instead of the button itself. Use a more specific selector that targets only the button, not its container.
How do I undo hiding the Add to Cart button in Snap Bundle?
Go back to Snap Bundle settings, remove the selector or uncheck the Hide box, and click Save to restore the hidden element.
Was this helpful?
Was this helpful?