Replace the add to cart button with an email link or contact form

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

Some of your products are not for sale, and you would like to replace their add to cart button with an email link or a contact form. This article will show you how to do that.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Under the Templates folder, click on the Add a new template link.

  4. In the drop-down menu, select "product". Give your template the title of "not-for-sale". Click Create template.

    Not for sale window
  5. Your new template will automatically open in the online code editor. In the online code editor window, locate the HTML for your add-to-cart button (you can do this by searching with CTRL-f or COMMAND-f). The HTML for your add to cart button will look something like this:

    
     <button type="submit" name="add" id="AddToCart" class="btn">
       <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
     </button>
    
    

    The actual code may appear slightly different between themes. The trick is to find an <input or <button tag that includes something like Add to Cart, AddToCart or add-to-cart etc.

    You must wrap that code in Liquid comment tags, like so:

    
    {% comment %}
    <button type="submit" name="add" id="AddToCart" class="btn">
      <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
    </button>
    {% endcomment %}
    
    

    On the very next line, add in the HTML for your email link, or contact form.

    
    <p>This product is only available upon request. <a href="mailto:{{ shop.email }}">Contact us</a> for a quote.<p>
    
    

    For a contact form

    Refer to the Contact Form documentation.

  6. Save your product.not-for-sale.liquid template.

    Hiding the price

    You may also want to hide the price for this item in your product.not-for-sale.liquid template. Locate the pricing information and wrap it in Liquid comment tags.

    If you do that though, you will need to also edit other Liquid files to hide the price of those items when they appear on your home page, search result pages and collection pages. You may need to edit the template search.liquid, and the snippet product-grid-item.liquid or product-card.liquid. In those files, wrap the HTML that shows pricing information in a Liquid condition like so:

    
    {% unless product.template_suffix == 'not-for-sale' %}
    ...
    {% endunless %}
    
    

    The product.template_suffix property is the part of the template name, assigned to the product, which follows product. and excludes the .liquid extension. So, it will be equal to not-for-sale for all products that use the product.not-for-sale.liquid template.

  7. Finally, visit each product page in your shop Admin. Locate the Theme templates section, and select product.not-for-sale in the Template suffix drop-down menu. That will assign the product.not-for-sale.liquid template to your product. Save your changes. Repeat this operation for all products that need to use your new template.

    Assign product not for sale template

Caution

Avoid removing or placing comment tags around the entire add to cart form. Limit yourself to the add to cart button and pricing information. If you remove the entire form, your theme will break while looking for a variant selector on the page. The JavaScript error you will come across when that happens is Uncaught TypeError: Cannot read property 'parentNode' of null. If you must remove the add to cart form, you will need to place Liquid comment tags around the call to new Shopify.OptionSelectors.

Want to discuss this page?

Visit the Shopify Community