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
![](https://storage.crisp.chat/users/helpdesk/website/d9947dc4cf2ed000/image_14bmx7t.png)
Find the Snippets folder and click on Add a new snippet and write the name nectorcustom_useyourpoints_checkbox
![](https://storage.crisp.chat/users/helpdesk/website/d9947dc4cf2ed000/image_1w6i9vp.png)
Copy the below block of code and paste in the file you just created and click on "Save"
![](https://storage.crisp.chat/users/helpdesk/website/d9947dc4cf2ed000/image_x1nwwn.png)
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 use your points checkout will be visible on your product page
![](https://storage.crisp.chat/users/helpdesk/website/d9947dc4cf2ed000/image_1abwuhd.png)
After adding the line of code for "cart" , the use your points checkout will be visible on your cart page
![](https://storage.crisp.chat/users/helpdesk/website/d9947dc4cf2ed000/image_7w6i1l.png)
Use Your Points
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
![](https://storage.crisp.chat/users/helpdesk/website/d9947dc4cf2ed000/image_14bmx7t.png)
Find the Snippets folder and click on Add a new snippet and write the name nectorcustom_useyourpoints_checkbox
![](https://storage.crisp.chat/users/helpdesk/website/d9947dc4cf2ed000/image_1w6i9vp.png)
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>
![](https://storage.crisp.chat/users/helpdesk/website/d9947dc4cf2ed000/image_x1nwwn.png)
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
![](https://storage.crisp.chat/users/helpdesk/website/d9947dc4cf2ed000/image_1abwuhd.png)
After adding the line of code for "cart" , the use your points checkout will be visible on your cart page
![](https://storage.crisp.chat/users/helpdesk/website/d9947dc4cf2ed000/image_7w6i1l.png)
Related Articles
Use Your Points
Updated on: 15/07/2024