Enquire Now Button in place of Add to Cart button for specific products

Highlighted
New Member
4 0 0

I am using Retina Theme and unable to reach to the solutions for :

1/ How to replace add to card button with enquire now button? Can we add an text email link? If yes, how?

2/ I have a product which has a price, but if some addtional service added it price changes. So how to add the services to that product with additional charges so we can get total in cart while checkout.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
537 0 86

Hey there!

Savannah here from the Shopify Guru Team. :) 

I can lend a hand with that! There's a bit of custom coding involved but I'll try to lay it out as clearly as I can. 

1) Navigate to Online Store>Themes and select, "Edit HTML/CSS" from the Actions menu on Retina 

2) Once there, select "Add a New Template" from the Templates folder. The template type will be product, and the name should be requires-contact, like this
 
3) Find the code in that product-template-requires-contact file that says {% section 'product-template' %} and replace it with {% section 'product-template-requires-contact' %}. It should look like this. Save the page. 

4) Navigate to the Sections folder and add a new section. Call it product-template-requires-contact. Delete everything in the file already, and copy and paste the entire contents of the product-template (from the sections folder) into the product-template-requires-contact

5) Find the code that says   {% include 'product-form with 'product' %} and replace it with,  {% include 'product-requires-contact with 'product' %}like this. Hit the save button. 

6) Add a new snippet in the Snippets folder and call it product-requires-contact. Copy and paste the entire contents of the product-form snippet into your new product-requires-contact snippet. 

7) Look for the code that says  {% if settings.cart_action == 'reload_page' %} and put a {% comment %} code above that line. Put an {% endcomment %} tag right below the line that says </div>. It should look like this

8) Right below the {% endcomment %} tag, paste this code: 

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

Hit the save button. 

9) Navigate to a product that you'd like to remove the cart button from, and select your new template from the templates drop-down, like this. Save the product, and you're all finished!

When it comes to adding those additional price upgrades, I would recommend adding them as variants of the product. For example, if the additional price was for personalization, you can add an option that says, "Personalization?" and two variants: Yes and No. The No variant would have a price increase of $0, and the Yes variant would show the price increase. Does that make sense?

Let me know if you have any further questions - I'm here to help!

Savannah | Shopify Guru
support@shopify.com

0 Likes
Highlighted
New Member
4 0 0

Thanks a LOT Savannah, it really helped a lot but the contact us link is not working.  

I shall be REALLY grateful if you can just let me know how we can create same button as add to cart in place of add to cart additionally

0 Likes
Highlighted
Shopify Staff
Shopify Staff
537 0 86

Okay - no problem!

Here's what you need to do to simply change the button: 

1) Go back into your requires-contact snippet and remove the {% comment %} and {% endcomment %} tags. 

2) Then, replace the code that starts with <button type="submit" with this one: 

   

   <button type="submit" ><span class="text">Contact Us</span></button>

It should look like this. It's right above the </div> line. 

3) Once that's done, scroll up to the line where it says  <form action="/cart/add". It should be around Line 5. Replace it with this:

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

It should look like this

Let me know if that works a bit better!

Savannah | Shopify Guru
support@shopify.com

0 Likes
Highlighted
New Member
4 0 0

Ah! thanks again :)

But this time all seems ok except the mailto: (i think I am doing some code error so please do it using info@xyz.com) and the other thing is once we click on contact us button it adds the product to shipping cart. 

I think best would be if it directly opens mailbox so one can write an email or it should show a message

"Please write us an email at info@xyz.com

Please suggest.

0 Likes
Highlighted
New Member
1 0 0

Hi Savannah, I'm not very familiar with HTML/CSS and happen to found your solution about changing the 'add to cart' to 'enquire now' button. 

I was following what you have stated below, but unable to find what you have mentioned in number 5 > Find the code that says   {% include 'product-form with 'product' %} and replace it with,  {% include 'product-requires-contact with 'product' %}

 

This is how my template looks like:

 

{%- capture recently_viewed_data -%}
{%-
include 'product-recently-viewed',
product: product
-%}
{%- endcapture %}

<script
type="application/json"
data-section-type="static-product"
data-section-id="{{ section.id }}"
data-section-data
>
{
"settings": {
"cart_redirection": {{ section.settings.product_cart_redirect | json }},
"layout": {{ section.settings.layout | json }},
"money_format": {{ shop.money_format | strip_html | json }},
"enable_video_autoplay": {{ section.settings.enable_video_autoplay | json }},
"enable_image_zoom": {{ settings.enable_image_zoom | json }},
"image_zoom_level": {{ settings.image_zoom_level | json }}
},
"context": {
"product_available": {{ 'product.buttons.add_to_cart' | t | json }},
"product_unavailable": {{ 'product.buttons.sold_out' | t | json }}
},
"product": {{ product | json }}
{{ recently_viewed_data }}
}
</script>

{% include 'breadcrumbs' %}

<section class="product--container {{ section.settings.layout }}" data-product-wrapper>
{%
include 'product',
layout: section.settings.layout,
is_product_modal: false
%}
</section>

{% if section.settings.enable_related_products %}
{% assign related_collection = collection %}
{% if collection == null or collection.handle == 'frontpage' or collection.handle == 'all' %}
{% assign collection_found = false %}
{% for c in product.collections %}
{% if collection_found == false and c.handle != 'frontpage' and c.handle != 'all' %}
{% assign collection_found = true %}
{% assign related_collection = c %}
{% break %}
{% endif %}
{% endfor %}
{% endif %}

{% if related_collection.products.size > 0 %}
{%
include 'related-products',
current_product: product.id
%}
{% endif %}
{% endif %}

{% if settings.product_ratings_reviews %}
<section class="product-section--container" data-product-reviews>
<div class="product-section--content product-reviews--content">
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
</div>
</section>
{% endif %}

{% if settings.product_enable_recently_viewed_products %}
<section class="product-section--container product-recently-viewed--section">
<div class="product-recently-viewed-wrapper">
<div class="product-recently-viewed-header">
<h3 class="product-recently-viewed-heading">
{{ 'general.time.previous' | t }}
</h3>
<span
class="product-recently-viewed-clear"
data-clear-recently-viewed
>
{{ 'general.time.clear' | t }}
</span>
</div>

<div
class="
product-section--content
product-recently-viewed--content
imagestyle--{{ settings.product_grid_image_style }}
"
data-recently-viewed-container
></div>
</div>
</section>
{% endif %}

{% schema %}
{
"name": "Product pages",
"class": "product--section",
"settings": [
{
"id": "layout",
"type": "select",
"label": "Layout",
"options": [
{
"value": "layout--two-col",
"label": "2 columns"
},
{
"value": "layout--three-col",
"label": "3 columns"
}
],
"default": "layout--three-col"
},
{
"type": "checkbox",
"id": "enable_related_products",
"label": "Enable related products",
"default": false
},
{
"type": "checkbox",
"id": "enable_video_autoplay",
"label": "Enable autoplay for product videos",
"default": false
},
{
"type": "checkbox",
"id": "show_dcb",
"label": "Show dynamic checkout button",
"info": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": false
},
{
"type": "checkbox",
"id": "product_cart_redirect",
"label": "Enable cart redirection",
"info": "Automatically sends users to the Cart page after adding a product.",
"default": false
}
]
}

{% endschema %}

 

Please help and advise on the code I should be edit here before proceed to number 6. Thank you. 

 

Regards,

Vivian

0 Likes
Highlighted
New Member
2 0 0

Hi, I tried following these instructions for the debut theme but it did not work. Can you please let me know how I go about doing this for the debut theme. Thanks

0 Likes
Highlighted
New Member
3 0 0

Hello, I’m having the same issue but I can’t find  the code that says   {% include 'product-form with 'product' %}

so kindly guide me if there has been any changes now

0 Likes
Highlighted
Shopify Partner
15 0 0

Hi 

I want to submit an inquiry form with added products in the cart.
so a customer can send the inquiry for multiple products.
Please Help.
  enquiry.JPG

 

0 Likes