I have some products (eBooks) that are only available to purchase on Amazon so I needed a way to add a BUY NOW ON AMAZON button and also needed to remove the ADD TO CART button.
This solution requires an App that lets you add custom Metadata Fields to your products. I tested a few different free ones, and ended up going with Simple Admin https://apps.shopify.com/simple-meta
This solution also requires adding some custom code to your theme. In this example I am using the free theme called SIMPLE.
STEP 1
Add and install the Simple Admin app to your Shopify store.
STEP 2
Once installed, go to your Apps section and click on Simple Admin to go to its dashboard.
STEP 3
Click on PRODUCTS over in the top right corner.
STEP 4
Choose the product you want add the Buy Now External Link button too, and click the ID number of that product.
STEP 5
Click on the META tab.
STEP 6
Click ADD METAFIELD.
STEP 7
Enter the following information:
KEY: BuyNowText
VALUE: BUY NOW on Amazon.com
VALUE TYPE: String
NAMESPACE: CustomExternalLink
DESCRIPTION: The value is the text the customer will see on the button.
Click SAVE.
STEP 8
Click ADD METAFIELD again.
STEP 9
Enter the following information:
KEY: BuyNowLink
VALUE: https://anydomain.com/some/link/to/product
VALUE TYPE: String
NAMESPACE: CustomExternalLink
DESCRIPTION: Enter external link in the value field. To disable external link, enter the word “none” (without quotes) in the value field.
Click SAVE.
STEP 10
Now go to ONLINE STORE then THEMES then click on ACTIONS for your current theme and choose EDIT CODE.
NOTE: I am using the free SIMPLE theme.
STEP 11
Locate the SECTIONS / PRODUCT-TEMPLATE.LIQUID file and click on it so the file opens up in the editor.
NOTE: The following code that I am going to modify is specific to the SIMPLE theme and is located in the SECTIONS / PRODUCT-TEMPLATE.LIQUID file. The code you are looking for may be slightly different if you are using a different theme, and may also be located in a different file. Another file to check for the code would be the TEMPLATES / PRODUCT.LIQUID file.
STEP 12
Look for the following code:
<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>
STEP 13
Replace the code above with this code:
{% comment %}
MOD by Jeff - Wrapped the DIV with the IF-ELSE statement to show External BUY NOW button.
- When link is found, the ADD TO CART and BUY NOW buttons will disappear and this button will show instead.
- Use Simple Admin app to add custom metafields.
- NAMESPACE: CustomExternalLink
- KEY: BuyNowLink = enter http link to external site or the word "none" without quotes to disable
- KEY: BuyNowText = the text you want customer to see
{% endcomment %}
{% if product.metafields.CustomExternalLink.BuyNowLink == blank or product.metafields.CustomExternalLink.BuyNowLink == 'none' %}
<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>
{% else %}
<a href="{{ product.metafields.CustomExternalLink.BuyNowLink }}"><button class="btn" style="background-color:black; pointer-events: none;"><span>{{ product.metafields.CustomExternalLink.BuyNowText }}</span></button></a>
{% endif %}
{% comment %}
END MOD by Jeff
{% endcomment %}
STEP 14
Click SAVE.
STEP 15
Go view your product and you should see the new BUY NOW button has been added and the ADD TO CART button has been removed.
Enjoy!!!
