How to modify the 'add to cart' button to grab an email address in Supply theme

Tourist
14 0 1

Hi all

 

I'm looking to run like a 'smoke test' for my website and want to modify the 'add the cart' button to instead be a contact form to grab email addresses instead of going to check out. 

Can someone let me know if they've done this before or knows how to?

 

Thanks!

Bukiie

0 Likes
Shopify Partner
30 0 5

This is going to depend entirely on what theme you're using. The Add To Cart button works by making an AJAX request via a JavaScript on click event in most cases, you're going to have to remove this functionality and have it redirect to a new page instead. If the event handler for your Add To Cart button is simply an onClick HTML attribute you can remove that and add and change the href attribute, if it's not I'd recommend modifying your stylesheet to hide the add to cart button, and create a new button with the same styles as the add to cart button, but have it redirect to a new page.

0 Likes
Tourist
14 0 1

Thanks Adam.

 

I'm using the Supply Theme which uses AJAX. What code am I exactly looking for to remove and then redirect to a new page and how do I create a new button with the same styles please?

Thanks for your help.

0 Likes
Shopify Partner
30 0 5

I dug around that theme for a second, you're going to need to find the <form> tag on the product page, and remove the closing and opening tags for it, this won't affect the layout.  Then find the <button> tag for the add to cart button, wrap it in an anchor tag to link to the page with your form, so like <a href="formURLhere"><button id="etcetcetc">Add To Cart</button></a>

0 Likes
Tourist
14 0 1

Hi Adam

 

Thanks for that. I had a look but couldn't find the <form> tag on the product-template.liquid.

 

I found both this: 

{% capture "form_class" -%}
addToCartForm{% if section.settings.enable_payment_button %} addToCartForm--payment-button{% endif %}
{%- endcapture %}

{%- capture "form_id" -%}addToCartForm-{{ section.id }}{%- endcapture -%}

{% form 'product', product, class:form_class, id:form_id %}
<select name="id" id="productSelect-{{ section.id }}" class="product-variants product-variants-{{ section.id }}">
{% for variant in product.variants %}
{% if variant.available %}

<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>

 

and this 

{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
{% endform %}

 

Are any of those what you're talking about?

 

Sorry if I'm misunderstanding, really new to this and don't know much coding so trying to figure it all out along the way!

0 Likes
Highlighted
Shopify Partner
1658 48 166

{% form 'product', product, class:form_class, id:form_id %}

That is  what renders the html <form> including the proper attributes such as I'd and submit url.

 

Always make backups of your themes

Go through your theme and look for the contact page template, use that as a guide to swap the key parts out

You can simply use 

{% form 'contact' %}

Depending on theme this may not even make a visual change, you may still want to pass in the other information as changing the form will be modifying the structure and operation of the page

{% form 'contact', class:form_class, id:form_id  %}

 

Problem Solved? ✔️Accept the solution so you can help others.
Confused? Busy? ? Get me to solve it paull.newton+shopifyforum@gmail.com.
Buy me a coffee? ☕ paypal.me/paulnewton or donate to eff.org
0 Likes