Remove and replace ADD TO CART button with an EXTERNAL LINK BUY NOW button

Highlighted
Shopify Partner
9 0 1

I have some eBooks that are only available for sale on Amazon so I needed to replace the standard ADD TO CARD button and BUY NOW button with a BUY NOW ON AMAZON button that takes you to the external link amazon site.

 

Here is the article I wrote on how to do that:

https://www.iwebss.com/tech/1537-shopify-how-to-add-external-link-buy-now-button-and-remove-add-to-c...

 

1 Like

Good One.

We are a Shopify Partner Company
Built more than 100 Shopify Stores
Connect to me on m.me/firstwire or skype at anand@firstwireapp.com
Check portfolio at https://firstwireapp.com/shopify-services/
0 Likes
New Member
6 0 0

Can this work with theme - Colors?

 

Thank you.

0 Likes
Shopify Partner
9 0 1

The example I used is for SIMPLE theme, so the code you are looking for will most likely be a little different, so it may take a little customizing to get it to work, but should be similar.

 

 

0 Likes
New Member
6 0 0

I am trying to look for this code below to both SECTIONS / PRODUCT-TEMPLATE.LIQUID and TEMPLATES / PRODUCT.LIQUID but cant seem to find it :(

please do help and guide..

thank you.

 

<div class="product-single__cart-submit-wrapper{% if section.settings.enable_payment_button %} product-single__shopify-payment-btn{% endif %}{% if section.settings.add_to_cart_width == 'full_width' %} product-form--full{% endif %}">
  <button type="submit" name="add" id="AddToCart"class="btn product-single__cart-submit{% if section.settings.add_to_cart_width == 'full_width' %} btn--full{% endif %}{% if section.settings.enable_payment_button %} shopify-payment-btn btn--secondary{% endif %}">
    <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
  </button>
  {% if section.settings.enable_payment_button %}
    {{ form | payment_button }}
  {% endif %}
</div>

 

0 Likes
Shopify Partner
9 0 1

Every theme is going to be different so you need to look for ADD TO CART in the Color theme code.

 

If you can copy and paste the contents of PRODUCT-TEMPLATE.LIQUID  and PRODUCT.LIQUID I can see if I can locate the code you need to change.

 

Thanks

 

0 Likes
New Member
6 0 0

Okay, before I do that, I only need this done with one of our product (the shear item) because the other product (gloves) has been redirected to our amazon listing already.

 

If we do this change, will this not affect our gloves product?

0 Likes
New Member
6 0 0

Hi 

 

I would only like to apply this with one of our product (the shear item) because the other product (gloves) has been redirected to our amazon listing already.

 

If we do this change, will this not affect our gloves product?

 

Thank you.

0 Likes
Shopify Partner
9 0 1

If you read instructions, Step 4 to Step 9, you will see they are about adding this to ONLY the specific products you want it added to, and it will not affect other products.

0 Likes
New Member
6 0 0

To answer your question "If you can copy and paste the contents of PRODUCT-TEMPLATE.LIQUID  and PRODUCT.LIQUID I can see if I can locate the code you need to change."

Please see below:

 

PRODUCT-TEMPLATE.LIQUID

 

{% assign current_variant = product.selected_or_first_available_variant %}

<div class="content product" data-section-id="{{ section.id }}" data-section-type="product" itemscope itemtype="http://schema.org/Product">
<div class="item">
<div class="left">
{% include 'product-images' %}
</div>
<div class="right">
{% if section.settings.product_show_vendor %}
<h2>{{ product.vendor }}</h2>
{% endif %}
<a class="title" href="{{ product.url }}">
<h1 itemprop="name" class="with-underline">{{ product.title }}</h1>
</a>
<h1 itemprop="name">{{ product.title }}</h1>
{% include 'product-offers' %}
{% include 'product-form' %}
{% include 'product-description' %}
{% include 'product-share' %}
</div>
{% include 'product-close' %}
{% include 'product-script' %}
</div>
{% include 'product-metas' %}
</div>

{% schema %}
{
"name": "Product information",
"settings": [
{
"type": "checkbox",
"id": "product_show_vendor",
"label": "Show vendor",
"default": false
},
{
"type": "checkbox",
"id": "product_show_quantity_selector",
"label": "Show quantity selector",
"default": false
},
{
"type": "checkbox",
"id": "enable_payment_button",
"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": true
},
{
"type": "checkbox",
"id": "product_show_description_title",
"label": "Show description title",
"default": true
},
{
"type": "checkbox",
"id": "social_sharing_products",
"label": "Show sharing",
"default": true
},
{
"type": "checkbox",
"id": "zoom_enable",
"label": "Enable image zoom",
"default": true
},
{
"type": "select",
"id": "variants_type",
"label": "Show product options as",
"default": "radios",
"options": [
{
"value": "radios",
"label": "Buttons"
},
{
"value": "dropdowns",
"label": "Dropdowns"
}
]
},
{
"type": "select",
"id": "thumbnails_position",
"label": "Product images position",
"default": "right",
"info": "Desktop only",
"options": [
{
"value": "bottom",
"label": "Bottom"
},
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "select",
"id": "thumbnails_size",
"label": "Product images scale",
"default": "contain",
"options": [
{
"value": "cover",
"label": "Cover"
},
{
"value": "contain",
"label": "Contain"
}
]
}
]
}
{% endschema %}

 

==================

 

PRODUCT.LIQUID

 

{% comment %}
The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section 'product-template' %}
{% section 'related-products-template' %}

0 Likes