How to add Use Your Points Checkout section to your Shopify theme?

If you want to add the Use Your Points checkout 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 Use Your Points checkout, follow this article for more information.

Follow the below steps for adding the Use Your Points checkout 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_useyourpoints_checkbox




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 useyourcoins_checkbox_classes = useyourcoins_checkbox_classes | default: ''
  assign price_selector = price_selector | default: ''
  assign auto_apply = auto_apply | 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="useyourcoinscheckbox"
  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-price_selector="{{ price_selector }}"
  data-useyourcoins_checkbox_classes="{{ useyourcoins_checkbox_classes }}"
  data-auto_apply="{{ auto_apply }}"
  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_useyourcoins_checkbox', type: 'product', product: product, customer: customer %}

Use the below line for adding it to the cart page:

{%- render 'nectorcustom_useyourcoins_checkbox', type: 'cart', cart: cart, customer: customer %}

Click on "Save" button

After adding the line of code for "product" , the use your points checkout will be visible on your product page




After adding the line of code for "cart" , the use your points checkout will be visible on your cart page

Related Articles

Use Your Points

Updated on: 15/07/2024