Replace “Add to cart” with a contact link

You can replace the Add to cart button with an email link or a contact form. For example, you might want to replace the Add to cart button for products that are not currently for sale, or for products that are made to order.

Sectioned and non-sectioned themes

Select your theme

The steps for this customization vary depending on whether you are using the Narrative theme or another free theme made by Shopify. Click the button for your theme before following the instructions below:

Create a new product template in Narrative

To replace the Add to cart button for a product, you will need to create a custom product template for that product.

Steps:

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
In the Templates directory, click Add a new template.
Create the product template:
- From the drop-down menu, select product.
- Name your template requires-contact.
- Click Create template.
Find the following code:

{% section 'product-template' %}

Replace it with:

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

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

Click Save.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
In the Templates directory, click Add a new template.
Create the product template:
- From the drop-down menu, select product.
- Name your template requires-contact.
- Click Create template.
Find the following code:

{% section 'product-template' %}

Replace it with:

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

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

Click Save.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
In the Templates directory, click Add a new template.
Create the product template:
- From the drop-down menu, select product.
- Name your template requires-contact.
- Click Create template.
Find the following code:

{% section 'product-template' %}

Replace it with:

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

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

Click Save.

Create a new product section

In the Sections directory, click Add a new section.
Create the section:
1. Name your new section product-template-requires-contact.
2. Click Create section.
Delete all of the default code in the section file, so that the file is empty.
In the Sections directory, click product-template.liquid. Copy all 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.
Click Save.

Hide the Add to cart button

In your product-template-requires-contact.liquid section file, find the HTML code for the Product form of your product page. You can find it by searching for the word form in the file.
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 more easily put it back if you want to change your new template later.

For Narrative, the modified code would look like this:

{% comment %}
{% include 'product-form' %}
{% endcomment %}

Click Save.

Add an email link or contact form

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

Email link

You can add an email link that will open the customer's default email program and enter your store's customer-facing email address as the recipient. To add an email link:

On a new line below the Liquid {% endcomment %} tag that you added in the last step, add the HTML code for an email link:

 <p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

Click Save.

Contact form

You can add a contact form to your new product template by copying the code from your theme's contact page template. To add a contact form:

In the Templates directory, click page.contact.liquid.
Find the Liquid {% form 'contact' %} tag in the file.
Copy all of the code from the Liquid {% form 'contact' %} tag down to the Liquid {% endform %} tag. Include the Liquid form tags in the code that you copy.
Return to your new product.requires-contact.liquid file in the Templates directory.

On a new line below the Liquid {% endcomment %} tag that you added, paste the code for the contact form.

The next step is to wrap the code that you just pasted in HTML div tags. The class attribute included in the div tag code will ensure that your contact form renders correctly on the page.

On a new line above {% form 'contact' %}, paste the following code:

<div class="form-vertical">

On a new line below {% endform %}, paste the following code:

  </div>

Click Save.

Assign your new template to a product

Now that the template is finished, you can assign it to all of the products for which you want to hide the Add to cart button.

From your Shopify admin, go to Products.
Click the name of a product that you want to hide the Add to cart button on.
On the product page of your Shopify admin, under Online store, choose your new requires-contact template from the Theme template drop-down menu.
Click Save.

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

Create a new product template

To replace the Add to cart button for a product, you will need to create a custom product template for that product.

Steps:

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
In the Templates directory, click Add a new template.
Create the product template:
- From the drop-down menu, select product.
- Name your template requires-contact.
- Click Create template.
Find the following code:

{% section 'product-template' %}

Replace it with:

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

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

Click Save.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
In the Templates directory, click Add a new template.
Create the product template:
- From the drop-down menu, select product.
- Name your template requires-contact.
- Click Create template.
Find the following code:

{% section 'product-template' %}

Replace it with:

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

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

Click Save.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
In the Templates directory, click Add a new template.
Create the product template:
- From the drop-down menu, select product.
- Name your template requires-contact.
- Click Create template.
Find the following code:

{% section 'product-template' %}

Replace it with:

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

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

Click Save.

Create a new product section

In the Sections directory, click Add a new section.
Create the section:
1. Name your new section product-template-requires-contact.
2. Click Create section.
Delete all of the default code in the section file, so that the file is empty.
In the Sections directory, click product-template.liquid. Copy all 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.
Click Save.

Hide the Add to cart button

In your new product-template-requires-contact.liquid section file, find the HTML code for the Add to cart button of your product page. You can find it by searching for the word cart in the file.

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

For Debut, 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-formcart-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>

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 more easily put it back if you want to change your new template later.

For Debut, the modified 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-formcart-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 %}

Click Save.

Add an email link or contact form

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

Email link

You can add an email link that will open the customer's default email program and enter your store's customer-facing email address as the recipient. To add an email link:

On a new line below the Liquid {% endcomment %} tag that you added in the last step, add the HTML code for an email link:

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

Click Save.

Contact form

You can add a contact form to your new product template by copying the code from your theme's contact page template. To add a contact form:

In the Templates directory, click page.contact.liquid.
Find the Liquid {% form 'contact' %} tag in the file.
Copy all of the code from the Liquid {% form 'contact' %} tag down to the Liquid {% endform %} tag. Include the Liquid form tags in the code that you copy.
Return to your new product-template-requires-contact.liquid file in the Sections directory.
Find the closing </form> tag in the file. On a new line below the closing </form> tag, paste the code for the contact form.
The next step is to wrap the code that you just pasted in HTML div tags. The class attribute included in the div tag code will ensure that your contact form renders correctly on the page.

On a new line above {% form 'contact' %}, paste the following code:

<div class="form-vertical"></div>

On a new line below {% endform %}, paste the following code:

</div>

Click Save.

Assign your new template to a product

Now that the template is finished, you can assign it to all of the products for which you want to hide the Add to cart button.

From your Shopify admin, go to Products.
Click the name of a product that you want to hide the Add to cart button on.
On the product page of your Shopify admin, under Online store, choose your new requires-contact template from the Theme template drop-down.
Click Save.

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

Create a new product template

To replace the Add to cart button for a product, you will need to create a custom product template for that product.

Steps:

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
In the Templates directory, click Add a new template.
Create the product template:
- From the drop-down menu, select product.
- Name your template requires-contact.
- Click Create template.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
In the Templates directory, click Add a new template.
Create the product template:
- From the drop-down menu, select product.
- Name your template requires-contact.
- Click Create template.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
In the Templates directory, click Add a new template.
Create the product template:
- From the drop-down menu, select product.
- Name your template requires-contact.
- Click Create template.

Hide the Add to cart button

In your new product.requires-contact.liquid file, find the HTML code for the Add to cart button. You can search for the word cart.

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

For Debut, 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-formcart-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>

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 more easily put it back if you want to change your new template later.

For Debut, the modified 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-formcart-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 %}

Click Save.

Add an email link or contact form

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

Email link

On a new line below the Liquid {% endcomment %} tag that you added in the last step, add the HTML code for an email link:

Please <a href="mailto:{{ shop.email }}">contact us</a> if you are
interested in this product.

Click Save.

Contact form

You can add a contact form to your new product template by copying the code from your theme's contact page template. To add a contact form:

In the Templates directory, click page.contact.liquid.
Find the Liquid {% form 'contact' %} tag in the file.
Copy all of the code from the Liquid {% form 'contact' %} tag down to the Liquid {% endform %} tag. Include the Liquid form tags in the code that you copy.
Return to your new product.requires-contact.liquid file in the Templates directory.
Find the closing </form> tag in the file. On a new line below the closing </form> tag, paste the code for the contact form.
The next step is to wrap the code that you just pasted in HTML div tags. The class attribute included in the div tag code will ensure that your contact form renders correctly on the page.

On a new line above {% form 'contact' %}, paste the following code:

<div class="form-vertical"></div>

On a new line below {% endform %}, paste the following code:

</div>

Click Save.

Assign your new template to a product

Now that the template is finished, you can assign it to all of the products for which you want to hide the Add to cart button.

From your Shopify admin, go to Products.
Click the name of a product that you want to hide the Add to cart button on.
On the product page of your Shopify admin, under Online Store, choose your new requires-contact template from the Theme template drop-down.
Click Save.

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

Replace “Add to cart” with a contact link

Sectioned and non-sectioned themes

On this page

Select your theme

Create a new product template in Narrative

Steps:

Create a new product section

Hide the Add to cart button

Add an email link or contact form

Email link

Contact form

Assign your new template to a product

Create a new product template

Steps:

Create a new product section

Hide the Add to cart button

Add an email link or contact form

Email link

Contact form

Assign your new template to a product

Create a new product template

Steps:

Hide the Add to cart button

Add an email link or contact form

Email link

Contact form

Assign your new template to a product