Shopify Theme Integration Guide
version 2.1.7
NOTE: Duplicate theme first. DO NOT directly edit the live theme.
TIP: Start and end of blocks of HelixPay code added to the theme is commented like this {% comment %} HelixPay Start {% endcomment %}
to easily identify added and modified code.
-
Add global assets
Upload assets
helixpay-global.js
andhelixpay.css
and include them in thetheme.liquid file
. Include css file before the head closing tag and script before the body closing tag.{% comment %} HelixPay added line below {% endcomment %} {{ 'helixpay.css' | asset_url | stylesheet_tag }} {% comment %} HelixPay added line below {% endcomment %} <script src="{{ 'helixpay-global.js' | asset_url }}"></script>
-
Add recurrence selector in the product page
Create snippet
helixpay_recurrence_selector.liquid
and include it on the product page. Copy contents ofhelixpay_recurrence_selector.liquid
.Include the snippet inside
{% form 'product'
below variant selector and above Add to Cart button. Apply necessary styling to match the theme (you can modify markup ofhelixpay_recurrence_selector.liquid
and modify classes inhelixpay.css
).{% form 'product' %} {% comment %} Variant selector here {% endcomment %} {% comment %} HelixPay Start {% endcomment %} {%- render 'helixpay_recurrence_selector', product: product -%} {% comment %} HelixPay End {% endcomment %} {% comment %} Add to cart button here {% endcomment %} {% endform %}
NOTE: if selector is shown in a dynamically added element like for example a modal or pop-up, call the function
HelixPay.initMultipleInputsForRecurrence
with 1st param of initial selected recurrence code (nullable) and the modal element to initialize the selector JS.// HelixPay Start if (HelixPay && HelixPay.initMultipleInputsForRecurrence) { HelixPay.initMultipleInputsForRecurrence(null, modalElement); } // HelixPay End
-
Handle subscription price discount display in product page
Look for code that displays product price. Wrap existing code in
<span class="default-theme-price">
. Duplicate the span and change attributes into<span class="helixpay-price" data-price="{{ current_variant.price }}">
. Inhelixpay-price
, adjust code to display the discounted style.On the
helixpay-price
element. Change display conditions to always display the discounted style. Changecompare_at_price
to<span class="recurrence-undiscounted-price" data-money-format="{{ price | money }}"></span>
then change previous price to<span class="recurrence-discounted-price" data-money-format="{{ shop.money_format }}" style="display:none"></span>
. You can also useshop.money_with_currency_format
depending on theme style.{% comment %} HelixPay added line below {% endcomment %} <span class="default-theme-price"> {% comment %} Existing theme code starts here {% endcomment %} ... {% comment %} Existing theme code ends here {% endcomment %} {% comment %} HelixPay added line below {% endcomment %} </span> {% comment %} HelixPay Start {% endcomment %} <span class="helixpay-price" data-price="{{ current_variant.price }}" style="display:none"> ... <span class="recurrence-undiscounted-price" data-money-format="{{ shop.money_format }}" > {{ current_variant.price | money }} </span> <span class="recurrence-discounted-price" data-money-format="{{ shop.money_format }}" ></span> ... </span> {% comment %} HelixPay End {% endcomment %}
-
Display selected recurrence in cart page
Find cart item liquid file. Adjust display of cart item properties. Check if property
Frequency
is displayed.NOTE: some themes display the cart in a drawer or a pop up. Adjust code to handle dynamic JS when necessary.
<div> {%- if item.properties.Frequency != blank -%} {{ item.properties.Frequency }} {%- else -%} Single Order {%- endif -%} </div>
-
Add price discount display in cart items
Add condition to display recurrence discounted price when
item.properties._recurrenceDiscountValue
is notblank
. Apply appropriate styling. Reuse theme CSS classes when possible.{% comment %} HelixPay Start {% endcomment %} {%- if item.properties._recurrenceDiscountValue != blank -%} {% liquid if item.original_line_price != item.final_line_price assign used_price = item.final_price assign used_line_price = item.final_line_price else assign used_price = item.original_price assign used_line_price = item.original_line_price endif if item.properties._computationType and item.properties._computationType == '2' if item.properties.Recurrence == 'quarterly' assign used_price = used_price | times: 3 else if item.properties.Recurrence == 'annually' assign used_price = used_price | times: 12 endif endif if item.properties._recurrenceDiscountType == '1' assign discount_amount = item.properties._recurrenceDiscountValue | times: 100 else if item.properties._recurrenceDiscountType == '2' and discount_percent > 0 assign discount_percent = item.properties._recurrenceDiscountValue | divided_by: 100.0 assign discount_amount = used_price | times: discount_percent else assign discount_amount = 0 endif assign recurrence_discounted_price = used_price | minus: discount_amount assign recurrence_discounted_line_price = recurrence_discounted_price | times: item.quantity assign applied_price = recurrence_discounted_price %} {% comment %} Use used_price or used_line_price depending on theme. {% endcomment %} <div>{{ used_price | money }}</div> <div>{{ recurrence_discounted_price | money }}</div> {% comment %} HelixPay: line below should not be duplicated across multiple screen views {% endcomment %} <input type="hidden" class="helixpay-cart-line-price" value="{{recurrence_discounted_line_price}}"> {%- else -%} {% assign applied_price = item.final_price %} {% comment %} Existing theme code starts here {% endcomment %} ... {% comment %} Existing theme code ends here {% endcomment %} {% comment %} HelixPay: added line below. should not be duplicated across multiple screen views {% endcomment %} <input type="hidden" class="helixpay-cart-line-price" value="{{item.original_line_price}}"> {%- endif -%} {% comment %} HelixPay End {% endcomment %}
-
Display price discount display in cart subtotal
Find where
cart.total_price
is displayed. Add the classorig-subtotal
and data attributesdata-orig-subtotal="{{ cart.total_price }}" data-display="inline"
to the direct element it is displayed. Add another element beside it forhelixpay-subtotal
(Follow guide below). Add classhelixpay-subtotal-wrapper
to their parent element.Before:
{{ 'cart.general.subtotal' | t }} <span class="money">{{ cart.total_price | money }}</span>
After:
{% comment %} HelixPay added class helixpay-subtotal-wrapper {% endcomment %} <div class="helixpay-subtotal-wrapper"> {{ 'cart.general.subtotal' | t }} {% comment %} HelixPay Start {% endcomment %} <span class="money orig-subtotal" data-orig-subtotal="{{ cart.original_total_price }}" data-display="inline" > {{ cart.total_price | money }} </span> <span class="money helixpay-subtotal" data-money-format="{{ shop.money_format }}" style="display: none" ></span> {% comment %} HelixPay End {% endcomment %} </div>
NOTE: Make sure the code below is added only once on each cart item with the respective cart line price.
<input type="hidden" class="helixpay-cart-line-price" value="{{recurrence_discounted_line_price}}">
or
<input type="hidden" class="helixpay-cart-line-price" value="{{item.original_line_price}}">
Then call the
HelixPay.initHelixpaySubtotal()
function on the first load of the cart page wrapped inDOMContentLoaded
listener. Also call theHelixPay.initHelixpaySubtotal()
function in every dynamic load of subtotal.// HelixPay Start document.addEventListener("DOMContentLoaded", function () { if (HelixPay && HelixPay.initHelixpaySubtotal) { HelixPay.initHelixpaySubtotal(); } }); // HelixPay End
When handling a dynamic cart page or cart drawer where the subtotal is changed by javascript, call the
HelixPay.initHelixpaySubtotal()
function in every dynamic load of subtotal. You might also need to update the data attributedata-orig-subtotal
value.// Inside function that dynamically loads subtotal // HelixPay Start var origSubtotal = document.querySelector('orig-subtotal'); if (origSubtotal) { origSubtotal.dataset.origSubtotal = NEWSUBTOTAL; } if (HelixPay && HelixPay.initHelixpaySubtotal) { HelixPay.initHelixpaySubtotal(); } // HelixPay End
-
Integrate smart checkout button
Smart because it redirects accordingly. Comment existing checkout button then add new checkout button. Make sure the
data-cart-form-id
value is the cart form id used to checkout products. You may need to add the id if the form doesn't have one. Apply appropriate styling to match the theme.{% comment %} HelixPay Start {% endcomment %} <button type="button" class="helixpay-checkout" data-shop-domain="{{ shop.permanent_domain }}" data-cart-form-id="cart" > Checkout </button> {% comment %} HelixPay End {% endcomment %}
-
Integrate dynamic checkout button (Buy it Now button)
Look for
form | payment_button
in liquid files. Wrap it in a div with classshopifyDynamicCheckoutArea
then add the div beside it with classhelixpayDynamicCheckoutArea
. make sure the value ofdata-product-form-id
is the Add to Cart form id. Apply styling to the Subscribe Now button to match the theme.{% comment %} HelixPay Start {% endcomment %} <div class="shopifyDynamicCheckoutArea" style="display: none"> {{ form | payment_button }} </div> <div class="helixpayDynamicCheckoutArea" style="display: none"> <button type="button" class="helixpayDynamicCheckoutButton" data-shop-domain="{{ shop.domain }}" data-product-form-id="{{ product_form_id }}" > Subscribe Now </button> </div> {% comment %} HelixPay End {% endcomment %}
Updated about 2 years ago