Change Add to cart button Inquire Now - redirect to contact form

Hi guys,

I have just tried to follow this tutorial to replace the add to cart button to get people to inquire through a contact form. I'm using the Vantage theme, and at the "hide the add to cart button" step I'm not sure if I placed the "comment" tags in the right spot, please see below:

 

 

{% assign current_variant = product.selected_or_first_available_variant %}

<div class="product-page product-template clearfix" id="product-{{ product.id }}"
  itemscope itemtype="http://schema.org/Product"
  data-product-id="{{ product.id }}"
  data-section-id="{{ section.id }}"
  data-section-type="product-section">

  {% include 'product-json' %}

  <meta itemprop="name" content="{{ product.title }}">
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: '800x' }}">

  <div class="product-top">
    <div id="product-images" class="desktop-6 desktop-push-1 tablet-3 mobile-3" data-product-gallery data-zoom-position="{{ section.settings.pf_zoom_image_position }}" data-type-product="{% if template contains 'product.quick' %}quick{% else %}normal{% endif %}">
      {% if product.featured_image %}
        {% include 'product-image-gallery' %}
      {% else %}
        {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
        {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
      {% endif %}
    </div>

    <div id="product-description" class="desktop-4 tablet-3 mobile-3">
      <h1 itemprop="name">
        {{ product.title }}
      </h1>
      {% comment %}
      <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
          <meta itemprop="priceCurrency" content="{{ shop.currency }}">
          <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
          {% capture product_form_config %}{ "money_format": {{ shop.money_format | json }}, "enable_history": true, "sold_out": {{ "products.product.sold_out" | t | json }}, "unavailable": {{ "products.product.unavailable" | t | json }}, "button": {{ 'products.product.add_to_cart' | t | json }} }{% endcapture %}
          {% include 'product-form' type: section %}
          <div class="clear"></div>

          {% if section.settings.pf_show_social_share %}
            <div id="soc">
              {% include 'social' with product %}
            </div>
          {% endif %}
        {% unless template == 'product.quick' %}
          {% if section.settings.pf_use_accordion %}
            {% assign list_style = 'vantage-accordion' %}
          {% else %}
              {% assign list_style = 'no-accordion' %}
          {% endif %}
{% endcomment %}
          <ul class="product-details {{ list_style }}" data-product-details>

            <li>
              <a href="#" class="product-accordion-toggle"><h4>{{ 'products.product.product_description' | t }}</h4></a>
              <ul class="product-accordion-content default">
                <div class="rte">
                  {{ product.description | split: '<!-- split -->' | first }}
                </div>
              </ul>
            </li>

            {% unless section.blocks.size == 0 %}
              {% for block in section.blocks %}
                {% if block.type == 'page' %}
                  {% assign acc_page = pages[block.settings.page] %}
                  <li id="{{ block.id }}" class="{{ forloop.index }}-accordion">
                    <a class="product-accordion-toggle" href="#{{ block.id }}">
                      <h4>{{ acc_page.title }}</h4>
                    </a>
                    <ul class="product-accordion-content">
                      <li>
                        <div class="rte">
                          {{ acc_page.content }}
                        </div>
                      </li>
                    </ul>
                  </li>

                {% elsif block.type == 'reviews' %}
                  <li id="{{ block.id }}" class="{{ forloop.index }}-accordion">
                    <a class="product-accordion-toggle" href="#{{ block.id }}">
                      <h4>{{ block.settings.product_review_title }}</h4>
                    </a>
                    <ul class="product-accordion-content">
                      <li>
                        <div id="shopify-product-reviews" data-id="{{product.id}}">
                          {{ product.metafields.spr.reviews }}
                        </div>
                      </li>
                    </ul>
                  </li>
                {% endif %}
              {% endfor %}
            {% endunless %}

            {% if section.settings.pf_show_product_type or section.settings.pf_show_product_vendor or section.settings.pf_show_product_collection or section.settings.pf_show_sku or  section.settings.pf_show_product_inventory or section.settings.pf_show_product_weight %}
              <li>
                <a href="#" class="product-accordion-toggle"><h4>{{ 'products.product.product_details' | t }}</h4></a>
                  <ul class="product-accordion-content view-more">
                    {% assign current_variant =  product.selected_or_first_available_variant %}
                    <li class="detail-item"><strong>{{ 'products.product.variant' | t }}:</strong> <span class="variant_selected">{{ current_variant.title }}</span></li>
                    {% if section.settings.pf_show_sku %}
                      <li class="detail-item"><strong>{{ 'customer.order.details.sku' | t }}:</strong> <span class="variant_sku">{{ current_variant.sku }}</span></li>
                    {% endif %}
                    {% if section.settings.pf_show_product_inventory %}
                      <li class="detail-item"><strong>{{ 'products.product.inventory' | t }}:</strong> <span class="variant_inventory">{{ current_variant.inventory_quantity }}</span></li>
                    {% endif %}
                    {% if section.settings.pf_show_product_weight %}
                      <li class="detail-item"><strong>{{ 'products.product.weight' | t }}:</strong> <span class="variant_weight">{{ current_variant.weight | weight_with_unit: current_variant.weight_unit }}</span></li>
                    {% endif %}
                    {% if section.settings.pf_show_product_type %}
                      <li class="detail-item"><strong>{{ 'products.product.product_type' | t }}:</strong> {{ product.type | link_to_type }}</li>
                    {% endif %}
                    {% if section.settings.pf_show_product_vendor %}
                      <li class="detail-item"><strong>{{ 'products.product.brand' | t }}:</strong> {{ product.vendor | link_to_vendor }}</li>
                    {% endif %}
                    {% if section.settings.pf_show_product_collection and collection %}
                      <li class="detail-item"><strong>{{ 'products.product.collection' | t }}:</strong> {% capture url %}/collections/{{ collection.handle }}{% endcapture %}{{ collection.title | link_to: url }}</li>
                    {% endif %}
                  </ul>
                </div>
              </li>
            {% endif %}

          </ul>
        {% endunless %}
      </div>
      <div class="clear"></div>
      {% if section.settings.pf_zoom_image_position == 'zoom_on_right' %}
        <div class="zoom-box"></div>
      {% endif %}
    </div>

  </div>
  {% unless template == 'product.quick' %}
    {% if product.description contains '<!-- split -->' %}
      <div id="split-description" class="desktop-12 tablet-6 mobile-3">
        <h4 class="section-title">
          {{ 'products.product.product_more_details' | t }}
        </h4>
        <div class="rte">
          {{ product.description | split: '<!-- split -->' | last }}
        </div>
      </div>
    {% endif %}

  {% endunless %}
</div>
<style media="screen">
  .product-top .zoom-box {
    left: 59%;
  }
</style>
{% schema %}
{
    "name": "Product page",
	  "max_blocks":5,
    "settings": [
      {
        "type": "header",
        "content": "Product Form"
      },
      {
        "type": "checkbox",
        "id": "pf_show_quantity_selector",
        "label": "Show quantity selector",
        "default": true
      },
      {
        "type": "header",
        "content": "Gallery Settings"
      },
        {
          "type": "select",
          "id": "pf_zoom_image_position",
          "label": "Zoom image position",
          "options": [
            {
              "value": "zoom_on_right",
              "label": "To right of main image"
            },
            {
              "value": "zoom_over_main",
              "label": "Over top of main image"
            }
          ]
        },
      {
        "type": "header",
        "content": "Product Details"
      },
      {
        "type": "checkbox",
        "id": "pf_use_accordion",
        "label": "Use an accordion for product content",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "pf_show_product_inventory",
        "label": "Show product inventory",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "pf_show_product_weight",
        "label": "Show product weight",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "pf_show_product_type",
        "label": "Show product type",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "pf_show_sku",
        "label": "Show variant SKU",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "pf_show_product_vendor",
        "label": "Show product vendor",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "pf_show_product_collection",
        "label": "Show product collection",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "pf_show_social_share",
        "label": "Show social share icons",
        "default": true
      }
    ],
	"blocks":[
      {
         "type":"page",
         "name":"Page",
         "settings":[
          {
            "type": "page",
            "id": "page",
            "label": "Show content from"
          }
         ]
      },
      {
         "type":"reviews",
         "name":"Reviews",
         "settings":[
            {
              "type": "text",
              "id": "product_review_title",
              "label": "Reviews",
			        "info": "You will need to add the free [Shopify reviews app](https:\/\/apps.shopify.com/product-reviews) to your store "
            }
         ]
      }
   ]
  }
{% endschema %}

 

Then when adding the contact form, it says Find the Liquid {% form 'contact' %} tag in the file, but I don't see this anywhere. Is there a similar code I'm missing? please see below:

 

<div data-section-id="{{ section.id }}">

<div id="page" class="desktop-12 mobile-3">
  <h1>{{ page.title }}</h1>

  {% if section.settings.form-position != 'center' %}
    <div id="contact-page" class="desktop-6 tablet-6 mobile-3{% if section.settings.form-position == 'left' %} form-left{% endif %}">
      <div class="rte" style="min-height: 1px">
        {{ page.content }}
      </div>
    </div>

    <div class="desktop-6 mobile-3 tablet-6">
      {% include 'custom-contact' type: section %}
    </div>

  {% else %}

    {% comment %}If we have the contact form centered only {% endcomment %}
    <div id="page" class="desktop-8 desktop-push-2 tablet-6 mobile-3 centered-form">
      <div class="rte">
        {{ page.content }}
      </div>
      {% include 'custom-contact' type: section %}
    </div>
  {% endif %}

</div>

{% schema %}
{
    "name": "Contact page",
    "settings": [
		{
        "type": "select",
        "id": "form-position",
        "label": "Contact form position",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "cf_show_first_name",
        "label": "Show first name",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "cf_show_last_name",
        "label": "Show last name",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "cf_show_company_name",
        "label": "Show company name",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "cf_show_address",
        "label": "Show address",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "cf_show_website_url",
        "label": "Show website url",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "cf_show_phone",
        "label": "Show phone number",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "cf_show_subject",
        "label": "Show subject",
        "default": true
      },
      {
        "type": "header",
        "content": "Custom Field One"
      },
      {
        "type": "checkbox",
        "id": "cf_show_custom_field_one",
        "label": "Show custom field one",
        "default": false
      },
      {
        "type": "text",
        "id": "cf_custom_field_one",
        "label": "Field Placeholder",
        "default": "Custom Field One"
      },
      {
       "type":      "select",
       "id":        "cf_custom_field_one_type",
       "label":     "Field Type",
       "default":   "input",
       "options": [
         {
           "value": "textarea",
           "label": "Multiple line text"
         },
         {
           "value": "input",
           "label": "Single line text"
         }
       ]
     },
     {
       "type": "header",
       "content": "Custom Field Two"
     },
     {
       "type": "checkbox",
       "id": "cf_show_custom_field_two",
       "label": "Show custom field one",
       "default": false
     },
     {
       "type": "text",
       "id": "cf_custom_field_two",
       "label": "Field Placeholder",
       "default": "Custom Field Two"
     },
     {
      "type":      "select",
      "id":        "cf_custom_field_two_type",
      "label":     "Field Type",
      "default":   "input",
      "options": [
        {
          "value": "textarea",
          "label": "Multiple line text"
        },
        {
          "value": "input",
          "label": "Single line text"
        }
      ]
    }
    ]
  }
{% endschema %}

After that I have to this:

"Find the closing </form> tag in the file. On a new line below the closing </form> tag, paste the code for the contact form."

This is in the first code box in this post, I can't seem to find this either?

 

Would really appreciate some help on this, or an alternative way to do this with my current theme would be amazing too!

 

Thanks so much!

 

 

0 Likes
Shopify Staff
Shopify Staff
723 40 106

Hey, @Infratech_Digit !

 

Katy here from Shopify. I hope all is well with you.

 

Thank you for including the sample code here - it is very helpful. Usually, if you can, including a link to your store would be useful also. This allows Community members to assess the code in full using Dev Tools for example.

 

I have taken a look and hope to help point you in the right direction. Though as this is a third-party theme, it is something that I do suggest to confirm with your theme developer if you can. I have included their details here.

 

Based on your above code, I think you may be hiding too much of your code. Had you tested this out using a sample product? How did this appear for you?

Here you also appear to be hiding out your social media links. To hide the cart button only, you can place the {% endcomment %} tag here:

 

02-26-ilyk9-6surp

 

Regarding the contact form, you should be able to include the following line of code instead:

 

{% include 'custom-contact' type: section %}


You can place this directly below the {% endcomment %} tag or below your social media links, depending on where you would like this to appear.

 

I hope this helps!

 

Cheers,

Katy

Katy | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes

Hi @Katy , thanks so much for your help!

 

I've done what you said and got the following: https://dwwindowsystems.co.nz/products/test

But I think I'm more into something like this; https://outdoorconcepts.co.nz/collections/texas-original-bar-b-q-pits/products/texas-original-luling... where you click on enquire and it opens the contact form. 

Do you know a way to do this, or are there any tutorials on it?

 

Thanks so much!

 

0 Likes
Shopify Staff
Shopify Staff
723 40 106

You are very welcome, @Infratech_Digit  Happy to help where I can.

 

I do see that you have this set up correctly based on the guide - nicely done!

 

Thanks so much for providing additional examples here. Regarding what you are after:

 

03-31-kl9sl-ekfqo

 

It would need some JavaScript, or additional coding to implement this as dynamic content (i.e become visible/ invisible dynamically with the click of a button). While there are some resources, I wouldn't have the exact code or guides for the implementation of this specific to your own theme. But our Community members may be able to help you out. 

 

Alternatively, you may like to consider an app:

 


Or to work with a Shopify Expert via this link. You can also reach them via your admin directly (Settings > Account > Store status and click Hire a Shopify Expert).

 

I hope this helps!

 

Cheers,

Katy

 

 

Katy | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes

Thanks @Katy I will probably have a developer look at it!

1 Like