How to Hide Your Theme’s Add to Cart Button to Avoid Duplication with Snap Bundle
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 |