Create a custom Amazom buy button for product page

[Aliasgar]

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.

[JoesIdeas]

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 %}

<a href="link_to_the_amazon_product" class="button-style-class">Buy on Amazon</a>

{% 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.

[Aliasgar]

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 %}
<div style="position: relative; z-index: 3" id="ProductSection-{{ unique_product_id }}"
data-section-id="{{ unique_product_id }}"
data-section-type="product"
data-enable-history-state="false"
data-ajax-enabled="true"
>
{% include 'product-price-listing', product: product, show_vendor: show_vendor %}

<div class="product-form__error-message-wrapper product-form__error-message-wrapper--hidden{% if section.settings.enable_payment_button %} product-form__error-message-wrapper--has-payment-button{% endif %}"
data-error-message-wrapper
role="alert"
>
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span class="product-form__error-message" data-error-message>{{ 'products.product.quantity_minimum_message' | t }}</span>
</div>

{% 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 %}
<div class="product-form__controls-group">
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item custom-select" {% if option.name == 'Size' %} style="flex-basis: 50%;"{% endif %}>
<label for="SingleOptionSelector-{{ unique_product_id }}-{{ forloop.index0 }}" class="hide">
{{ option.name }}
</label>

<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 %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
{% capture selectorid %}SingleOptionSelector-{{ unique_product_id }}-{{ forloop.index0 }}{% endcapture %}
{% comment %}
<!-- Buttonize -->
<div class="buttonize hide" data-formid="ProductSection-{{ unique_product_id }}">
<label class="hide">{{ option.name }}:</label>
{% for value in option.values %}
<a class="bze-option{% if option.selected_value == value %} is-active{% endif %}" data-value="{{ value | escape }}" data-target="{{ selectorid }}">{{ value | escape }}</a>
{% endfor %}
</div>
{% endcomment %}
<div class="prod-card-product-variation-drp">
<div class="prod-card-custom-dropdown">
<div class="prod-pack-size-arrow-icon">
<div class="prod-card-custom-selected-data">{{ option.selected_value }}</div>
<div style="overflow: hidden; box-sizing: border-box; display: inline-block; position: relative; width: 10px; height:26px;"><img data-src="https://cdn.shopify.com/s/files/1/0560/0732/7881/files/dropd_arrow.png?v=1645006705" decoding="async" data-nimg="true" width="10" height="6" class="lazyload prod-down-arrow"></div>
</div>
</div>
</div>

<div class="buttonize prod-card-custom-drop-value" data-formid="ProductSection-{{ unique_product_id }}">
{% for value in option.values %}
<div class="prod-card-single-valued bze-option{% if option.selected_value == value %} is-active{% endif %} {% if forloop.last %} last{% endif %}{% if forloop.last and forloop.first %} single{% endif %}" data-value="{{ value | escape }}" data-target="{{ selectorid }}">{{ value | escape }}</div>
{% endfor %}
{% comment %}
<div class="prod-card-single-valued">Pack of 2</div>
<div class="prod-card-single-valued last">Pack of 3</div>
{% endcomment %}
</div>

</div>
{% endfor %}
</div>
{% endunless %}
<select name="id" id="ProductSelect-{{ unique_product_id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
<option value="{{ variant.id }}"
{%- if variant == current_variant %} selected="selected" {%- endif -%}
>
{{ variant.title }} {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
</option>
{% endfor %}
</select>

<div class="product-form__controls-group product-form__controls-group--submit">
<div class="product-form__item product-form__item--submit
{%- if section.settings.enable_payment_button %} product-form__item--payment-button {%- endif -%}
{%- if product.has_only_default_variant %} product-form__item--no-variants {%- endif -%}"
>
<button type="submit" name="add"
{% unless current_variant.available %} aria-disabled="true"{% endunless %}
aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
class="btn product-form__cart-submit gtm-atc-category{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary-accent{% endif %}"
{% if settings.enable_ajax %}aria-haspopup="dialog"{% endif %}
data-add-to-cart>
<span data-add-to-cart-text class="gtm-atc-category">
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
<!--<span>Add to cart</span>-->
<span class="hide" data-loader>
{% include 'icon-spinner' %}
</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
</div>
{% endform %}

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

<p class="visually-hidden" data-product-status
aria-live="polite"
role="status"
></p>

{%- 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 -%}

<p class="visually-hidden" data-loader-status
aria-live="assertive"
role="alert"
aria-hidden="true"
>{{ 'products.product.loader_label' | t }}</p>
</div>
{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ unique_product_id }}">
{{ product | json }}
</script>
<script type="application/json" id="ModelJson-{{ unique_product_id }}">
{{ product.media | where: 'media_type', 'model' | json }}
</script>
{% endunless %}

[Libautech-Davis]

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&surf...

[Incredibl]

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