Replace the add to cart button with a contact link

If you have products that are not yet for sale, or require special instructions (such as complicated engravings or unique, made-to-order items), you can replace your "Add to cart" button with a link that lets customers get in touch with you.

Create a new product template using sectioned themes

You can use a custom product template to customize the product page for any products that you'd like to replace the add to cart button for.

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

  2. Under Templates, click Add a new template.

  3. In the drop-down menu, select product. Name your template something like requires-contact. Click Create template:

    'Add a new template' dialog showing the new 'requires-contact' template
  4. Your new template will open in the code editor. Find the following code:

    
    {% section 'product-template' %}
    
    

    Replace it with:

    
    {% section 'product-template-requires-contact' %}
    
    

    This code will link your new template with a new product section that you will create in the next steps.

  5. Click Save to confirm your changes to the new template.

Create a new product section

  1. Under Sections, click Add a new section.

  2. Name your new section product-template-requires-contact. Click Create section.

  3. Your new section will open in the code editor. Delete all of the default code, so that the file is empty.

  4. Under Sections, click to open your product-template.liquid file. Select and copy the content of the file to your clipboard. Return to your new product-template-requires-contact.liquid section, and paste the code into the file.

  5. Click Save to confirm your changes to the new section.

Replace the add to cart button

  1. In your new section file, find the HTML code for the Add to cart button of your product page. You can search for the word cart as a start.

    The code for the add to cart button varies theme to theme. Look for an <input> or <button> tag with text like Add to cart, AddToCart, or add-to-cart.

    In the Debut theme, the add to cart button code looks like this:

    <button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
      <span id="AddToCartText-{{ section.id }}">
        {% unless current_variant.available %}
          {{ 'products.product.sold_out' | t }}
        {% else %}
          {{ 'products.product.add_to_cart' | t }}
        {% endunless %}
      </span>
    </button>
    
  2. When you find the code, wrap it in Liquid {% comment %} and {% endcomment %} tags. This will stop the code from being shown on your store, but will let you easily put it back if you want to change your new template later.

    Using the example above, the new code would look like this:

    {% comment %}
    <button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
      <span id="AddToCartText-{{ section.id }}">
        {% unless current_variant.available %}
          {{ 'products.product.sold_out' | t }}
        {% else %}
          {{ 'products.product.add_to_cart' | t }}
        {% endunless %}
      </span>
    </button>
    {% endcomment %}
    

    Caution

    Make sure that you don't comment out the <form> tags for your product page. Your comment tags should not surround any <form> or </form> tags, otherwise customers could experience errors when viewing your product page.

Now that you have hidden the add to cart button, you can add the content you want to show instead.

  1. On the line below your Liquid {% endcomment %} tag, add HTML code for an email link:

    <p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>
    
  2. Click Save to confirm the changes to your new product template.

Contact form

  1. On the line below your Liquid {% endcomment %} tag, add code for a contact form. Refer to the Add a contact form page for instructions.

  2. Click Save to confirm the changes to your new product template.

Set products to use the new template

Now that the template is finished, you need to assign the template to products that you want to hide the "Add to cart" button on.

  1. From your Shopify admin, click Products.

  2. Click the name of a product that you want to hide the "Add to cart" button on.

  3. On the product page of your Shopify admin, under Theme templates, choose your new requires-contact template from the Template suffix drop-down.

  4. Click Save on the product page to confirm the new template for that product.

Repeat these steps for each product that you want to add your new template to.

A polo shirt product page with a 'Contact us' link

Create a new product template using non-sectioned themes

You can use a custom product template to customize the product page for any products that you'd like to replace the add to cart button for.

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

  2. Under Templates, click Add a new template.

  3. In the drop-down menu, select product. Name your template something like requires-contact. Click Create template:

    'Add a new template' dialog showing the new 'requires-contact' template

Replace the add to cart button

  1. In your new template file, find the HTML code for the Add to cart button of your product page. You can search for the word cart as a start.

    The code for the add to cart button varies theme to theme. Look for an <input> or <button> tag with text like Add to cart, AddToCart, or add-to-cart.

    In the Debut theme, the add to cart button code looks like this:

    <button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
      <span id="AddToCartText-{{ section.id }}">
        {% unless current_variant.available %}
          {{ 'products.product.sold_out' | t }}
        {% else %}
          {{ 'products.product.add_to_cart' | t }}
        {% endunless %}
      </span>
    </button>
    
  2. When you find the code, wrap it in Liquid {% comment %} and {% endcomment %} tags. This will stop the code from being shown on your store, but will let you easily put it back if you want to change your new template later.

    Using the example above, the new code would look like this:

    {% comment %}
    <button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
      <span id="AddToCartText-{{ section.id }}">
        {% unless current_variant.available %}
          {{ 'products.product.sold_out' | t }}
        {% else %}
          {{ 'products.product.add_to_cart' | t }}
        {% endunless %}
      </span>
    </button>
    {% endcomment %}
    

    Caution

    Make sure that you don't comment out the <form> tags for your product page. Your comment tags should not surround any <form> or </form> tags, or customers could experience errors when viewing your product page.

Now that you have hidden the add to cart button, you can add the content you want to show instead.

  1. On the line below your Liquid {% endcomment %} tag, add HTML code for an email link:

    <p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>
    
  2. Click Save to confirm the changes to your new product template.

Contact form

  1. On the line below your Liquid {% endcomment %} tag, add code for a contact form. Refer to the Add a contact form page for instructions.

  2. Click Save to confirm the changes to your new product template.

Set products to use the new template

Now that the template is finished, you need to assign the template to products that you want to hide the "Add to cart" button on.

  1. From your Shopify admin, click Products.

  2. Click the name of a product that you want to hide the "Add to cart" button on.

  3. On the product page of your Shopify admin, under Theme templates, choose your new requires-contact template from the Template suffix drop-down.

  4. Click Save on the product page to confirm the new template for that product.

Repeat these steps for each product that you want to add your new template to.

A polo shirt product page with a 'Contact us' link

Want to discuss this page?

Visit the Shopify Community