How to add Buy Using Coins Button section to your Shopify theme?
If you want to add the buy with coins button to your Shopify website but you have an older theme that does not support app blocks, you need to add the section by editing the code of your theme.
Before doing the below steps make sure you have enabled and configured the buy with coins button, follow this article for more information.
Follow the below steps for adding the buy with coins button to your website:
Go to your Shopify admin page
Under "Online Store", click on "Themes" and click on "Edit Code" in the options
Find the "Snippets" folder and click on "Add a new snippet" and write the name "nectorcustom_buywithcoins_button"
Copy the below block of code and paste in the file you just created and click on "Save"
After that, find the file that has the code related to your product page, and paste the below line of code wherever appropriate based on where you want to display the section
Since each theme will have different files and structure, it is not possible to mention the exact file in which you have to put the below line of code. You need to find the appropriate file for your current theme and paste it in there.
Use the below line for adding the button on product page:
Use the below line for adding it to the cart page:
Click on "Save" button
After adding the line of code for "product" , the buy with coins button will be visible on your product page
After adding the line of code for "cart" , the buy with coins button will be visible on your cart page
Buy With Points
Before doing the below steps make sure you have enabled and configured the buy with coins button, follow this article for more information.
Follow the below steps for adding the buy with coins button to your website:
Go to your Shopify admin page
Under "Online Store", click on "Themes" and click on "Edit Code" in the options
Find the "Snippets" folder and click on "Add a new snippet" and write the name "nectorcustom_buywithcoins_button"
Copy the below block of code and paste in the file you just created and click on "Save"
{% assign nector_api_key = shop.metafields.nector.api_key %}
{% assign nector_entity_id = shop.metafields.nector.entity_id %}
{% assign nector_env = shop.metafields.nector.env %}
{% assign nector_platform_url = 'https://platform.nector.io' %}
{% assign nector_script_url = 'https://cdn.nector.io/nector-static/no-cache/reward-widget/mainloader.min.js' %}
{% if nector_env != 'production' %}
{% assign nector_platform_url = 'https://stageplatform.nector.io' %}
{% assign nector_script_url = 'https://cdn.nector.io/nector-static/no-cache/stagereward-widget/mainloader.min.js' %}
{% endif %}
{%- liquid
assign page_type = type | default: 'product'
assign buywithcoins_button_classes = buywithcoins_button_classes | default: ''
assign buy_button_selector = buy_button_selector | default: ''
assign animate_buywithcoins_button = animate_buywithcoins_button | default: false
-%}
{% if page_type == 'product' %}
{%- liquid
assign product_id = product.id
assign target = product.selected_or_first_available_variant
assign integer_price = target.price
assign price = integer_price | money_without_currency
-%}
{% elsif page_type == 'cart' %}
{%- liquid
assign product_id = ''
assign integer_price = cart.original_total_price
assign price = integer_price | money_without_currency
-%}
{% endif %}
<script
async
src="{{nector_script_url}}"
data-op="buywithcoinsbutton"
data-platform_url="{{nector_platform_url}}"
data-api_key="{{nector_api_key}}"
data-platform="shopify"
data-customer_id="{{ customer.id }}"
data-price="{{ price }}"
data-product_id="{{ product_id }}"
data-buy_button_selector="{{ buy_button_selector }}"
data-buywithcoins_button_classes="{{ buywithcoins_button_classes }}"
data-animate_buywithcoins_button="{{ animate_buywithcoins_button }}"
data-page_type="{{ page_type }}"
></script>
After that, find the file that has the code related to your product page, and paste the below line of code wherever appropriate based on where you want to display the section
Since each theme will have different files and structure, it is not possible to mention the exact file in which you have to put the below line of code. You need to find the appropriate file for your current theme and paste it in there.
Use the below line for adding the button on product page:
{%- render 'nectorcustom_buywithcoins_button', type: 'product', product: product, customer: customer %}
Use the below line for adding it to the cart page:
{%- render 'nectorcustom_buywithcoins_button', type: 'cart', cart: cart, customer: customer %}
Click on "Save" button
After adding the line of code for "product" , the buy with coins button will be visible on your product page
After adding the line of code for "cart" , the buy with coins button will be visible on your cart page
Related Articles
Buy With Points
Updated on: 17/10/2024