# Integrating easyPoints

WARNING

The easyPoints integration guide assumes intermediate level knowledge of Liquid, HTML, CSS, and JavaScript. This guide may not be the exact solution for integrating your store. If you are new to Shopify themes, it might be better to contact us at easypoints.jp (opens new window) for a custom integration by our in-house engineers.

# Pre-Integration

Download easyPoints boilerplate to your project folder:

Direct download (.zip file) (opens new window)
Github repo (opens new window)
Enable easyPoins x SDK embedded app block in your theme settings
In the easyPoints App Settings, check that the "Point System" and "Point System Display" are activated

Files should be placed in the exact location within your theme folder, as shown below:

# `[modified]` indicates that the file will require modification to include easyPoints code snippets.
/assets
  easy_points.js
  easy_points_integration.css
  easy_points_integration.js
/layout
  theme.liquid [modified]
/locales
  en.default.json [modified]
  ja.json [modified]
/snippets
  [some optional snippets are missing]
  easy_points_redemption.liquid
  epi_account_balance.liquid
  epi_cart_total_points.liquid
  epi_currency_cost.liquid
  epi_format_number.liquid
  epi_product_points.liquid
  epi_redemption_form.liquid
  epi_tiers_advancement.liquid

TIP

You can use git to keep track of the changes you are making to your theme. We recommend to make one commit per added easyPoints feature.

# Update `theme.liquid`

Before you begin inserting easyPoints code snippets into your theme, make sure that the following files is included within the theme.liquid file.

At the end of the </head> tag insert the following snippet:

  {%- comment -%} START EASYPOINTS - DO NOT MODIFY! 変更しないでください! INFO @ https://bit.ly/2Dn7ESM {%- endcomment -%}
    {%- unless shop.metafields.loyalty.easy_points_attributes.value.stealth_mode -%}
      {{ 'easy_points.js' | asset_url | script_tag }}
      {{ 'easy_points_integration.css' | asset_url | stylesheet_tag }}
      {{ 'easy_points_integration.js' | asset_url | script_tag }}
    {%- endunless -%}
  {%- comment -%} END EASYPOINTS {%- endcomment -%}
</head>

You can use the easy_points_integration.css to override the appearance of the point elements and you will need to use easy_points_integration.js when points values or the point redemption require special attention as this can depend on how your theme architecture.

# Product Points

Generally the product points are displayed in the product page under/next to the product price. In most shopify themes this is done within the main-product.liquid file.

Insert {% render 'epi_product_points' %} snippet where you want to display the points.

{%- comment -%} START EASYPOINTS - DO NOT MODIFY! 変更しないでください! INFO @ https://bit.ly/2Dn7ESM {%- endcomment -%}
  {%- unless shop.metafields.loyalty.easy_points_attributes.value.stealth_mode -%}
    {% render 'epi_product_points' %}
  {%- endunless -%}
{%- comment -%} END EASYPOINTS {%- endcomment -%}

# Account: Balance & Tiers

Generally the account balance etc. are displayed in the account page above the order history tables. In most shopify themes this is done within the main-account.liquid file.

Insert {% render 'epi_account_balance' %} where you want to display this information.

{%- comment -%} START EASYPOINTS - DO NOT MODIFY! 変更しないでください! INFO @ https://bit.ly/2Dn7ESM {%- endcomment -%}
  {%- unless shop.metafields.loyalty.easy_points_attributes.value.stealth_mode -%}
    {% render 'epi_account_balance' %}
  {%- endunless -%}
{%- comment -%} END EASYPOINTS {%- endcomment -%}

In order to check if the point balance is functioning correctly, you can allocate points to yourself manually (opens new window).

# Account: Birthday

WARNING

WIP

# Cart: Line Item Points

For the cart page, you will need to insert the product points for each product (line item) in the cart. In most shopify themes this is done within the main-cart-items.liquid file.

Insert {% render 'epi_product_points', line_ite,: item %} snippet where you want to display points for each product in your cart.

{%- comment -%} START EASYPOINTS - DO NOT MODIFY! 変更しないでください! INFO @ https://bit.ly/2Dn7ESM {%- endcomment -%}
  {%- unless shop.metafields.loyalty.easy_points_attributes.value.stealth_mode -%}
    <span class="easy-points__cart-item-points">
      {%- render 'epi_product_points', line_item: item -%}
    </span>
  {%- endunless -%}
{%- comment -%} END EASYPOINTS {%- endcomment -%}

Please note the line_item: item param, this may vary depending on your theme and can be found by location the in cart.items %} loop.

# Cart: Point Redemption

Last but not least, you will need to insert the point redemption form and button in the cart page. In most shopify themes this is done within the main-cart-footer.liquid file.

For the redemption form, insert this snippet above cart "Total Price":

{%- comment -%} START EASYPOINTS - DO NOT MODIFY! 変更しないでください! INFO @ https://bit.ly/2Dn7ESM {%- endcomment -%}
  {%- unless shop.metafields.loyalty.easy_points_attributes.value.stealth_mode and customer -%}
    {% render 'epi_redemption_form' %}
    {% render 'easy_points_redemption', class_button: 'btn btn--secondary' %}
  {%- endunless -%}
{%- comment -%} END EASYPOINTS {%- endcomment -%}

For the total points earned, insert this snippet below cart "Total Price":

<div class="totals">
  <h2 class="totals__total">{{ 'sections.cart.estimated_total' | t }}</h2>
  <p class="totals__total-value">{{ cart.total_price | money_with_currency }}</p>
</div>

{%# Often under div.totals you can paste the following: %}
{%- comment -%} START EASYPOINTS - DO NOT MODIFY! 変更しないでください! INFO @ https://bit.ly/2Dn7ESM {%- endcomment -%}
  {%- unless shop.metafields.loyalty.easy_points_attributes.value.stealth_mode -%}
    {% render 'epi_cart_total_points' %}
  {%- endunless -%}
{%- comment -%} END EASYPOINTS {%- endcomment -%}

# Other

# CSS

All our snippets have classes that can be styled using the easy_points_integration.css file. You can modify the classes in the css file to match your theme's style.

Optionally if you know what you are doing, you can also modify the liquid files to include your own classes.

# Currency Format

If your shop has money with a different currency format you will have to insert option_selection.js snippet in your theme.liquid file above the EasyPoints integration files:

{%- comment -%} START EASYPOINTS - DO NOT MODIFY! 変更しないでください! INFO @ https://bit.ly/2Dn7ESM {%- endcomment -%}
  {%- if request.page_type == 'cart' -%}
    {{ 'option_selection.js' | shopify_asset_url | script_tag }}
  {%- endif -%}
{%- comment -%} END EASYPOINTS {%- endcomment -%}

You may also need to include the following at the bottom of your html body depending on your theme money_format settings:

{%- comment -%} START EASYPOINTS - DO NOT MODIFY! 変更しないでください! INFO @ https://bit.ly/2Dn7ESM {%- endcomment -%}
  {%- unless shop.metafields.loyalty.easy_points_attributes.value.stealth_mode -%}
    <script>
      if (EasyPointsData) {
        EasyPointsData.shop.money_format = "{{ shop.money_with_currency_format }}";
      }
    </script>
  {%- endunless -%}
{%- comment -%} END EASYPOINTS {%- endcomment -%}

← Getting Started Checklist →