Create a custom Amazom buy button for product page

Store Design
, , ,
1

I want to create a custom amazon buy button for my product page so that if a product is out of stock on my website, he can buy the same product on amazon. So I need to link the button to the amazon product page. How can I achieve this using custom coding? I don’t want to rely on third-party apps, and just in case it is not feasible a good app recommendation is also appreciated.

Here’s the link to my store: https://setu.in/products/lean-lite-pack-of-2?variant=41123070967945

I need the button below the “Add to cart” button. I’m using the Debut theme.

2

You can do this with the product Liquid object (https://shopify.dev/docs/api/liquid/objects/product).

Example:

{% if product.available %}

put your regular add to cart button code here

{% else %}

Buy on Amazon

{% endif %}

Your add to cart button code is probably in a section / snippet called product.liquid, or product-form.liquid, something like that. You can find that in your theme editor.

To style the button, you’ll use CSS, making some properties for how you want the button to look.

If you want to do on your own, I would do this:

  1. Duplicate your live theme, then open the theme editor on the new theme

  2. Read through the product.liquid template / section files to see where the add to cart button code is.

  3. Add that snippet above and preview the theme. Once you see it you’ll know your code is working

  4. Now style it by creating a custom.css file, including that in your theme.liquid file, and adding the CSS class there. If you’re not familiar with CSS, just google what you’re looking to do (for example: “how to make a button in CSS”).

If you’re not familiar working with theme files, this guide will help: https://speedboostr.com/how-to-safely-edit-your-shopify-theme.

If you prefer to have a developer handle it, I would either contact the team from that article, or browse experts.shopify.com. Something like this is a small job for a developer so won’t be too expensive.

3

This is the code for my “add to cart” button:

{%- assign current_variant = product.first_available_variant -%}
{% capture unique_product_id %}{{prefix}}-{{product.id}}{% endcapture %}

{% include 'product-price-listing', product: product, show_vendor: show_vendor %}
{{ 'general.accessibility.error' | t }} {% include 'icon-error' %} {{ 'products.product.quantity_minimum_message' | t }}

{% capture “form_classes” -%}
product-form product-form-{{ unique_product_id }} setu-flex
{%- if section.settings.enable_payment_button and product.has_only_default_variant %} product-form–payment-button-no-variants {%- endif -%}
{%- if current_variant.available == false %} product-form–variant-sold-out {%- endif -%}
{%- endcapture %}

{% form ‘product’, product, class:form_classes, novalidate: ‘novalidate’, data-product-form: ‘’ %}
{{ form | payment_terms }}

{% unless product.has_only_default_variant %}

{% for option in product.options_with_values %}
{{ option.name }}

<select class=“single-option-selector single-option-selector-{{ unique_product_id }} product-form__input hide”
id=“SingleOptionSelector-{{ unique_product_id }}-{{ forloop.index0 }}”
data-index=“option{{ forloop.index }}”

{% for value in option.values %}

{{ value }} {% endfor %} {% capture selectorid %}SingleOptionSelector-{{ unique_product_id }}-{{ forloop.index0 }}{% endcapture %} {% comment %}
{{ option.name }}: {% for value in option.values %} {{ value | escape }} {% endfor %}
{% endcomment %}
{{ option.selected_value }}
{% for value in option.values %}
{{ value | escape }}
{% endfor %} {% comment %}
Pack of 2
Pack of 3
{% endcomment %}
{% endfor %}
{% endunless %}
{% unless current_variant.available %} {{ 'products.product.sold_out' | t }} {% else %} {{ 'products.product.add_to_cart' | t }} {% endunless %} {% include 'icon-spinner' %} {% if section.settings.enable_payment_button %} {{ form | payment_button }} {% endif %}
{% endform %}

{%- comment -%}
Live region for announcing updated price and availability to screen readers
{%- endcomment -%}

{%- comment -%}
Live region for announcing that the product form has been submitted and the
product is in the process being added to the cart
{%- endcomment -%}

{{ 'products.product.loader_label' | t }}

{% unless product == empty %} {% endunless %}
4

My recommendation would be to use the Libautech: Amazon Buy Button app, as it includes an algorithm designed to improve your organic Amazon keyword ranking.

https://apps.shopify.com/price-comparison-funnel?search_id=8584d90d-f2e7-4c08-b3c4-a52c47d0b9ef&surface_detail=libautech&surface_inter_position=1&surface_intra_position=2&surface_type=search

5

I’m not able to integrate this on Prestige theme version 4.3.3, would appreciate if you could help.