Skip to main content
All CollectionsDiscountingGift with Purchase
Remove Product Page Add To Cart Button for Gift Products
Remove Product Page Add To Cart Button for Gift Products

This article will show you how to remove the Add to Cart Button from a Gift’s Product Page.

Tom Eschler avatar
Written by Tom Eschler
Updated over a week ago

Currently Non-Shopify Plus stores have a disadvantage and do not have the ability to use Shopify Scripts. Currently we have two workarounds, you can build out Gift products as “Hidden” products within Shopify which hides the Gift’s Product Page from appearing on your site.

Or the steps outlined below to remove the Add to Cart Button from Gift Product Pages. This method is great too for Merchants wanting to still have a Gift product page for displaying more information about the gift item:


Technical Walkthrough

Implementation Instructions

Step 1

Go to your Shopify Admin -> Themes -> On your live Theme click the Customize button.

Once there, Click where it says "Home Page" in the dropdown bar located at the top and select Products:

Select Create Template and name it something like "Gift Products"

Step 2

Now leave your theme settings and go to the Product settings for the Gift Product you’re offering.

Change the products Theme template -> Select the one you created for gifts -> Save

Step 3

Next you’ll want to add the exclude_rebuy tag to the Free Gift product.

*This prevents the gift from returning in Rebuy Widget Recommended ai datasources

Step 4

Head back into your Theme's Custom Settings -> Select Products in the dropdown bar located at the top -> Select "Gift Products" and find where the "Add to Cart Buttons" and "Quantity selector" are in the theme’s block section -> Click Remove -> Save

Now your Gift Product template doesn’t have add to cart buttons which prevents customers from adding more than one gift! You can add any other gift products to the new product template you made.


Page Builder option: Use Custom CSS to hide button(s)

If you are using a page builder app (GemPages, PageFly, etc.), you may not have the option to hide the button(s), so another solution would be to use the Shopify Theme's Custom CSS field to manually hide the page's Add to Cart (ATC) button.

First, locate the specific CSS selector for the product page's Add to Cart (ATC) button(s). You can do this by inspecting the page Elements in your browser's Developer Tools. The selector will vary, as every Shopify Theme has different selector(s):

Once you have located the specific selector, use CSS to target the selector for the ATC button(s) to add display: none; to hide the button(s). Ensure you are only making this change within the Shopify page editor for the specific product page you want to modify:


Create your GWP Widget

Build out a free gift with purchase workflow by following this article:

NOTE: In order to disable the quantity buttons in the Smart Cart to prevent customers from adding multiple Gifts, you'll need to add the following CSS to your Rebuy theme:

.property-value-rebuy-gift-with-purchase .rebuy-cart__flyout-item-quantity-widget {
display: none;
}


Additional Setup

*Disable the Cart Page via the Smart Cart Settings

Disabling the Shopify Cart Page is crucial to prevent customers from adding extra Gift quantity within the Cart Page.

Did this answer your question?