Change 'Add to cart' to 'Enquire Now' button on a Product page template (Empire theme)

Highlighted
Shopify Partner
9 0 0

Hi,

I found some old posts on changing the 'Add to cart' button to an 'Enquire now' button which launches an email, but none of them were relevant to the code found in the Empire theme that I have.

Ideally, when it launches the email client it would also populate the subject line with: "Enquiry about [name of product goes here]".

Can anyone advise how you would acheive that within the following product page code? 

Thanks.

'product.liquid'

{% comment %}
  @param layout {String}
    Layout type

  @param is_product_modal {Bool}
    Is the snippet being loaded in a QuickShop
{% endcomment %}

{% assign enable_social_sharing = settings.product_social_sharing %}
{% assign selected_variant = product.selected_or_first_available_variant %}
{% assign selected_image = selected_variant.image | default: product.featured_image %}
{% assign compare_at_price = selected_variant.compare_at_price %}
{% assign price = selected_variant.price %}
{% assign product_available = product.available %}

{% assign on_sale = false %}
{% if compare_at_price > price %}
  {% assign on_sale = true %}
{% endif %}

{%
  include 'consistent-savings',
  variants: product.variants,
  on_sale: on_sale
%}

{%- capture share_buttons -%}
  {% assign social_image = product | img_url: '1024x' %}
  {% assign social_url = shop.url | append: product.url %}
  {%-
    include 'share-buttons',
    snippet_title: 'general.share_buttons.title',
    social_image: social_image,
    social_title: product.title,
    social_url: social_url
  -%}
{%- endcapture  -%}

<article class="product--outer">
  {% comment %}
    Product slideshow, never moves
  {% endcomment %}
  <div class="product-gallery" data-product-gallery>
    {%
      include 'product-gallery',
      selected_image: selected_image
    %}
  </div>

  <div class="product-main">
    <div class="product-details" data-product-details>
      {% if is_product_modal %}
        <h2 class="product-title">
          <a href="{{ product.url | within: collection }}">{{ product.title }}</a>
        </h2>
      {% else %}
        <h1 class="product-title">
          {{ product.title }}
        </h1>
      {% endif %}

      {% if settings.product_show_vendor and product.vendor != blank %}
        <div class="product-vendor">
          {{ 'product.general.by_vendor' | t: vendor: product.vendor }}
        </div>
      {% endif %}

      {% if settings.product_ratings_reviews %}
        <div class="product-ratings">
          <span class="shopify-product-reviews-badge" data-id="{{ product.id }}">
            <span class="spr-badge">
              <span class="spr-starrating spr-badge-starrating">
                <i class="spr-icon spr-icon-star-empty"></i>
                <i class="spr-icon spr-icon-star-empty"></i>
                <i class="spr-icon spr-icon-star-empty"></i>
                <i class="spr-icon spr-icon-star-empty"></i>
                <i class="spr-icon spr-icon-star-empty"></i>
              </span>
            </span>
          </span>
        </div>
      {% endif %}

      <div class="product-pricing">
        {%
          include 'product-badge',
          class_root: 'product',
          product_available: product_available,
          on_sale: on_sale,
          price: price,
          compare_at_price: compare_at_price,
          show_saved: true
        %}

        {%
          include 'product-price',
          class_root: 'product',
          price: price,
          price_varies: false,
          compare_at_price: compare_at_price,
          compare_at_price_varies: false,
          on_sale: on_sale,
          emphasize_price: false,
          show_original: true
        %}
      </div>
    </div>

    {% comment %}
      Product form original location, will remain unless is 3 column layout
    {% endcomment %}
    <div class="product-form--regular" data-product-form-regular>
      <div data-product-form-area>
        {% if is_product_modal %}
          <div data-product-quickshop-message class="product-message--container"></div>
        {% endif %}

        {%
          include 'product-form',
          product: product,
          selected_variant: selected_variant
        %}

        {% if enable_social_sharing and is_product_modal == false %}
          {{ share_buttons | strip_newlines }}
        {% endif %}
      </div>
    </div>

    {% comment %}
      Product description field, never moves
    {% endcomment %}
    {% if product.description != blank %}
      <div class="product-description rte" data-product-description>
        {{ product.description }}
      </div>
    {% endif %}

    {% if enable_social_sharing and is_product_modal %}
      {{ share_buttons | strip_newlines }}
    {% endif %}
  </div>

  {% comment %}
    If is a 3 column layout, the form will move here at $bp-large (layout.isBreakpoint('L'))
  {% endcomment %}
  {% if layout == 'layout--three-col' %}
    <div class="product-form--alt" data-product-form-alt></div>
  {% endif %}
</article>

 

 

'product-form.liquid'

{% comment %}
  Product form

  @param product

  @param selected_variant
{% endcomment %}

<form method="post" action="/cart/add" data-product-form>
  {% if product.has_only_default_variant %}
    <input
      name="id"
      value="{{ product.variants[0].id }}"
      type="hidden">
  {% else %}
    {%
      include 'product-options',
      product: product,
      selected_variant: selected_variant,
      style: settings.product_option_style
    %}
  {% endif %}

  <div class="product-form--atc">
    <div class="product-form--atc-qty form-fields--qty" data-quantity-wrapper>
      <div class="form-field form-field--qty-select visible">
        <div class="form-field-select-wrapper">
          <select
            class="form-field-input form-field-select"
            aria-label="{{ 'general.general.quantity' | t }}"
            data-quantity-select
          >
            {% for i in (1..9) %}
              <option {% if i == 1 %}selected {% endif %}value="{{ i }}">
                {{ i }}
              </option>
            {% endfor %}
            <option value="10+">
              10+
            </option>
          </select>
          <label class="form-field-title">
            {{ 'general.general.quantity' | t }}
          </label>
          {% include 'icon-chevron-down-small' %}
        </div>
      </div>

      <div class="form-field form-field--qty-input hidden">
        <input
          class="form-field-input form-field-number form-field-filled"
          value="1"
          name="quantity"
          type="text"
          pattern="\d*"
          aria-label="{{ 'general.general.quantity' | t }}"
          data-quantity-input
        >
        <label class="form-field-title">{{ 'general.general.quantity' | t }}</label>
      </div>
    </div>

    <button
      class="product-form--atc-button {% unless selected_variant.available %}disabled{% endunless %}"
      type="submit"
      {% unless selected_variant.available %}disabled{% endunless %}
      data-product-atc>
      <span class="atc-button--text">
        {% if selected_variant.available %}
          {{ 'product.buttons.add_to_cart' | t }}
        {% else %}
          {{ 'product.buttons.sold_out' | t }}
        {% endif %}
      </span>
      <span class="atc-button--icon">
        {%- include 'icon-spinner' -%}
      </span>
    </button>
  </div>
</form>

 

0 Likes
Highlighted
Pathfinder
112 1 33

Hey Sam,

You're going to have to edit two files .

To change the text, go to the en.default.json file in the Locales folder. Look for the add_to_cart key, should be under the buttons group in the product group. Change that text that says "Add to cart" to "Enquire now" or whatever you want it to say.

To edit the button to be a link and fill in the subject line in the email client, open up the product-form.liquid file and go down to where you see this block of code:

<button
  class="product-form--atc-button {% unless selected_variant.available %}disabled{% endunless %}"
  type="submit"
  {% unless selected_variant.available %}disabled{% endunless %}
  data-product-atc>
  <span class="atc-button--text">
    {% if selected_variant.available %}
      {{ 'product.buttons.add_to_cart' | t }}
    {% else %}
      {{ 'product.buttons.sold_out' | t }}
    {% endif %}
  </span>
  <span class="atc-button--icon">
    {%- include 'icon-spinner' -%}
  </span>
</button>

Change it to this:

<a href="mailto:someone@yoursite.com?subject=Enquiry about {{ product.title }}">
  <button
    class="product-form--atc-button {% unless selected_variant.available %}disabled{% endunless %}"
    type="submit"
    {% unless selected_variant.available %}disabled{% endunless %}
    data-product-atc>
    <span class="atc-button--text">
      {% if selected_variant.available %}
        {{ 'product.buttons.add_to_cart' | t }}
      {% else %}
        {{ 'product.buttons.sold_out' | t }}
      {% endif %}
    </span>
    <span class="atc-button--icon">
      {%- include 'icon-spinner' -%}
    </span>
  </button>
</a>

Edit someone@yoursite.com to be the email address you want the enquiries to be sent to.

Test that out and let me know if that works.

The easiest way to get Shopify help. Submit your task, get a quote, and we'll get the work done. Work with me at shupkeep.com
0 Likes
Highlighted
Shopify Partner
9 0 0

Thanks so much Alex!

If you wanted to alter the form instead of wrapping everything in an <a> tag, how would you alter this code to include the subject line?

<form action="mailto:{{ shop.email }}" target="_blank">

I don't want to hardcode the actual email address in case my client changes it sometime, but if I try to append the 'shop.email' with '?subject=Enquiry about {{ product.title }}"' it doesn't work...

Thanks,
Sam

EDIT: Or if I have to do it with the <a> like you did, is it possible to add the subject line to the 'shop.email' bit? I've tried and must have the syntax wrong.

UPDATE: I think this code is working, it just doesn't show the subject line in Google Inbox, which could just be a quirk of Inbox.

<form action="mailto:{{shop.email}}?subject=Enquiry about {{product.title}}" target="_blank">  

 

0 Likes
Highlighted
Pathfinder
112 1 33

Yeah, it must be a bug on Google's side. Maybe it doesn't take in the subject parameter for form tags? Anyways, glad you figured it out.

The easiest way to get Shopify help. Submit your task, get a quote, and we'll get the work done. Work with me at shupkeep.com
0 Likes
Highlighted
New Member
2 0 0

Hi, any idea how to do this for the Debut theme, it isn't working.

0 Likes
Highlighted
Shopify Partner
26 5 8

@rhythminfused 

In your shopify admin, click on "Online Store"

On your current theme click on action and select "Edit Languages"

Select the language from top left corner, if you have selected a different language. 

Now select "Products" from the top panel bar.

Find fields you want to change and change text according to your need.

And click on "Save" button.

0 Likes
Highlighted
New Member
6 0 0

Hello! I do not have product-form.liquid in me NARRATIVE theme. What should I do?

0 Likes