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.

Follow the below steps for adding the Use Your Points checkout to your website:

1. Go to your Shopify admin page

2. Under Online Store, click on Themes and click on Edit Code in the options

3. Find the Snippets folder and click on Add a new snippet and write the name nectorcustom_useyourpoints_checkbox

4. 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>

5. 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

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

6. 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