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"

{% 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: 12/07/2024