We offer a few different options to help you complete this installation on your store:
- An automatic installer
- The ability to request a professional installation from our team
- A step-by-step guide on completing this manually
Before you start, we highly recommend creating a Duplicate version of your Shopify theme to ensure you have a copy without our code installation.
Automatic Install
When you first install Bold Subscriptions V1 to your store, you are immediately taken to a screen that mentions the importance of running an automatic installation on your store.
If you are not seeing this option, please navigate to Help > Install to Theme.
Selecting Begin update allows you to choose your preferred theme that you would like to complete the automatic code installation on for Subscriptions V1.
Note When selecting which theme to update, there is a check box that says: "I have created a backup of this theme"
We recommend creating a Duplicate version of your Shopify theme to ensure you have a copy without our code installation.
Once the checkbox is selected to confirm you have a back up version of your theme, you will be able to proceed with the code installation.
If your current theme is not compatible with our automatic installation tool, Subscriptions V1 automatically notifies you. If this happens, you can rollback your theme to its previous state.
When the installation has not been completed in full, reverting the changes automatically creates an installation request for our team to assist you further.
Manual Install
This step instructs you on how to complete the Liquid code installation yourself. This method of installation is only suggested if you have a strong knowledge of Liquid coding.
Before you start the installation, it is highly recommended to create a duplicate of your theme. This allows you to test your installation before making the theme live on your store.
Note Our install team recommends completing an automatic installation first. The manual installation steps below can then be followed to ensure that everything is added correctly and displaying properly on your store.
Step 1: Add Snippet Files
- From the Shopify admin, select Online Store.
- Select Actions.
- Duplicate the theme you would like the installation completed on.
- Select Edit code on the duplicated theme.
- Under Snippets, find the following files:
- bold-common.liquid
- bold-includes.liquid
- bold-ro-init.liquid
- If they don't currently exist, select Add a new snippet.
- Enter the correct snippet name.
- Select Create snippet.
- Copy and paste the code from the following links:
-
{%- comment -%} BOLD-COMMON.LIQUID Last updated: 2018-Aug-9 --------------------------- WARNING --------------------------- This file is auto-generated by BOLD and should not be modified. It may be overwritten and any customizations would be lost. --------------------------- WARNING --------------------------- {%- endcomment -%} <script> {%- comment -%} common data {%- endcomment -%} window.BOLD = window.BOLD || {}; window.BOLD.common = window.BOLD.common || {}; window.BOLD.common.Shopify = window.BOLD.common.Shopify || {}; window.BOLD.common.Shopify.shop = { domain: '{{ shop.domain }}', permanent_domain: '{{ shop.permanent_domain }}', url: '{{ shop.url }}', secure_url: '{{ shop.secure_url }}', money_format: {{ shop.money_format | json }}, currency: {{ shop.currency | json }} }; window.BOLD.common.Shopify.customer = { id: {{ customer.id | json }}, tags: {{ customer.tags | json }}, }; window.BOLD.common.Shopify.cart = {{ cart | json }}; window.BOLD.common.template = '{{ template | split: "." | first }}'; {%- comment -%} common functions {%- endcomment -%} window.BOLD.common.Shopify.formatMoney = function(money, format) { function n(t, e) { return "undefined" == typeof t ? e : t } function r(t, e, r, i) { if (e = n(e, 2), r = n(r, ","), i = n(i, "."), isNaN(t) || null == t) return 0; t = (t / 100).toFixed(e); var o = t.split(".") , a = o[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1" + r) , s = o[1] ? i + o[1] : ""; return a + s } "string" == typeof money && (money = money.replace(".", "")); var i = "" , o = /\{\{\s*(\w+)\s*\}\}/ , a = format || window.BOLD.common.Shopify.shop.money_format || window.Shopify.money_format || "$ {% raw %}{{ amount }}{% endraw %}"; switch (a.match(o)[1]) { case "amount": i = r(money, 2, ",", "."); break; case "amount_no_decimals": i = r(money, 0, ",", "."); break; case "amount_with_comma_separator": i = r(money, 2, ".", ","); break; case "amount_no_decimals_with_comma_separator": i = r(money, 0, ".", ","); break; case "amount_with_space_separator": i = r(money, 2, " ", ","); break; case "amount_no_decimals_with_space_separator": i = r(money, 0, " ", ","); break; case "amount_with_apostrophe_separator": i = r(money, 2, "'", "."); break; } return a.replace(o, i); }; window.BOLD.common.Shopify.saveProduct = function (handle, product) { if (typeof handle === 'string' && typeof window.BOLD.common.Shopify.products[handle] === 'undefined') { if (typeof product === 'number') { window.BOLD.common.Shopify.handles[product] = handle; product = { id: product }; } window.BOLD.common.Shopify.products[handle] = product; } }; window.BOLD.common.Shopify.saveVariant = function (variant_id, variant) { if (typeof variant_id === 'number' && typeof window.BOLD.common.Shopify.variants[variant_id] === 'undefined') { window.BOLD.common.Shopify.variants[variant_id] = variant; } }; {%- comment -%} product data {%- endcomment -%} window.BOLD.common.Shopify.products = window.BOLD.common.Shopify.products || {}; window.BOLD.common.Shopify.variants = window.BOLD.common.Shopify.variants || {}; window.BOLD.common.Shopify.handles = window.BOLD.common.Shopify.handles || {}; {%- if template == 'product' -%} window.BOLD.common.Shopify.handle = {{ product.handle | json }} {%- endif -%} {%- comment -%} product page {%- endcomment -%} window.BOLD.common.Shopify.saveProduct({{ product.handle | json }}, {{ product.id | json }}); {%- for variant in product.variants -%}{%- assign csp_metafield_namespace = variant.id | prepend: "csp" -%}window.BOLD.common.Shopify.saveVariant({{ variant.id | json }}, { product_id: {{ product.id | json }}, product_handle: {{ product.handle | json }}, price: {{ variant.price | json }}, group_id: '{{variant.metafields.bold_rp.rp_group_id}}', csp_metafield: {{ product.metafields[csp_metafield_namespace] | json }}});{%- endfor -%} {%- comment -%} BOLD APPS INSTALLED {%- endcomment -%} {%- assign bold_apps_installed = shop | map: 'metafields' | map: 'bold_apps_installed' | first -%} window.BOLD.apps_installed = {{ bold_apps_installed | json }} || {}; {%- unless bold_apps_installed contains 'Customer Pricing' or bold_apps_installed contains 'Product Bundles' or bold_apps_installed contains 'Product Discount' or bold_apps_installed contains 'Quantity Breaks' or bold_apps_installed contains 'Custom Order' or bold_apps_installed contains 'Order Manager' or bold_apps_installed contains 'The Motivator'-%} {%- comment -%} collection page {%- endcomment -%} {%- for product in collection.products -%} window.BOLD.common.Shopify.saveProduct({{ product.handle | json }}, {{ product.id | json }}); {%- for variant in product.variants -%}{%- assign csp_metafield_namespace = variant.id | prepend: "csp" -%}window.BOLD.common.Shopify.saveVariant({{ variant.id | json }}, { product_id: {{ product.id | json }}, product_handle: {{ product.handle | json }}, price: {{ variant.price | json }}, group_id: '{{variant.metafields.bold_rp.rp_group_id}}', csp_metafield: {{ product.metafields[csp_metafield_namespace] | json }}});{%- endfor -%} {%- endfor -%} {%- comment -%} search page {%- endcomment -%} {%- for product in search.results -%} window.BOLD.common.Shopify.saveProduct({{ product.handle | json }}, {{ product.id | json }}); {%- for variant in product.variants -%}{%- assign csp_metafield_namespace = variant.id | prepend: "csp" -%}window.BOLD.common.Shopify.saveVariant({{ variant.id | json }}, { product_id: {{ product.id | json }}, product_handle: {{ product.handle | json }}, price: {{ variant.price | json }}, group_id: '{{variant.metafields.bold_rp.rp_group_id}}', csp_metafield: {{ product.metafields[csp_metafield_namespace] | json }}});{%- endfor -%} {%- endfor -%} {%- endunless -%} {%- comment -%} cart page {%- endcomment -%} {%- for item in cart.items -%}{%- assign csp_metafield_namespace = item.variant_id | prepend: "csp" -%}window.BOLD.common.Shopify.saveVariant({{ item.variant_id | json }}, { product_id: {{ item.product.id | json }}, product_handle: {{ item.product.handle | json }}, price: {{ item.variant.price | json }}, group_id: '{{item.variant.metafields.bold_rp.rp_group_id}}', csp_metafield: {{ item.product.metafields[csp_metafield_namespace] | json }}});{%- endfor -%} {%- comment -%} metafields {%- endcomment -%} window.BOLD.common.Shopify.metafields = window.BOLD.common.Shopify.metafields || {}; {%- assign metafield_namespaces_to_load = 'bold_rp,bold_csp_defaults' | split: ',' -%} {%- for namespace in metafield_namespaces_to_load -%} window.BOLD.common.Shopify.metafields[{{ namespace | json }}] = {{ shop.metafields[namespace] | json }}; {%- endfor -%} window.BOLD.common.cacheParams = window.BOLD.common.cacheParams || {}; </script> {%- comment -%} INCLUDE APP SCRIPTS BELOW {%- endcomment -%} -
{%- comment -%} BOLD-INCLUDES.LIQUID --------------------------- WARNING --------------------------- THIS IS A GENERATED ASSET OF INCLUDES FOR INSTALLED BOL APPLICATIONS SO NOT MODIFY --------------------------- WARNING --------------------------- {%- endcomment -%} -
<script> var BOLD = BOLD || {}; BOLD.recurring_orders = BOLD.recurring_orders || {}; if(typeof BOLD.recurring_orders.setSettings !== 'undefined') { BOLD.recurring_orders.setSettings({ loadingEnabled: true },true); } else { BOLD.recurring_orders.settings = { loadingEnabled: true }; } BOLD.recurring_orders.modes = { current_mode:{{ shop.metafields.bold_rp.recurring_type | json }}, recurring_cart:0, single_product:1, mixed_cart:2 }; BOLD.customer = BOLD.customer || {}; BOLD.customer.id = {{ customer.id | json }} || ''; BOLD.customer.email= {{ customer.email | json }} || ''; BOLD.customer.address1= {{ customer.default_address.address1 | json }} || ''; BOLD.customer.address = {{ customer.default_address.address2 | json }} || ''; BOLD.customer.city = {{ customer.default_address.city | json }} || ''; BOLD.customer.company = {{ customer.default_address.company | json }} || ''; BOLD.customer.country = {{ customer.default_address.country | json }} || ''; BOLD.customer.first_name = {{ customer.default_address.first_name | json }} || ''; BOLD.customer.last_name = {{ customer.default_address.last_name | json }} || ''; BOLD.customer.phone = {{ customer.default_address.phone | json }} || ''; BOLD.customer.province = {{ customer.default_address.province | json }} || ''; BOLD.customer.zip = {{ customer.default_address.zip | json }} || ''; BOLD.customer.tags = {{ customer.tags | json }} || ''; {% assign recurring_list = cart.items | map: 'properties' | map: 'frequency_num' | uniq %} {% if recurring_list.length > 1 or recurring_list[0] != blank %} {% assign is_mixed_cart = true %} {% endif %} window.mixed_cart = {{ is_mixed_cart | json }}; </script>
-
- Select Save.
Step 2: Edit bold-includes.liquid
- Under Snippets, select bold-includes.liquid.
- Copy and paste the following code in to the bottom of the file:
{{ 'https://ro.boldapps.net/v2_ui/js/ro.js' | script_tag }} - Select Save.
Step 3: Edit theme.liquid
- Under Layout, select theme.liquid.
- Copy and paste the following code directly above the </head> tag:
{%- render 'bold-common' -%}
{%- render 'bold-includes' -%}
{%- render 'bold-ro-init' -%} - Select Save.
Step 4: Edit customers/account.liquid
This step explains how to add the Manage Subscriptions page link in to the customer’s account details page. Without this link being inserted into an obvious area, subscribers may find it difficult to locate where to manage their subscription.
We recommend inserting this link into the recommended location, though other locations can be utilized as well - like in your main navigation bar. This link can be moved around to your liking.
- Under Templates, select customers/account.liquid.
-
Under the line:
{{ 'customer.account.details' | t }}or:
{{ 'customer.account.title' | t }}copy and paste the following code:
<p><a href="/tools/checkout/api/manage/subscription/app" class="text-link">Manage Subscription</a></p>If you are not seeing either of the codes above, you can add this under the </header>
- Select Save.
Step 5: Edit product.liquid
- Under Templates, select product.liquid. It may redirect you to product-template.liquid depending on your theme.
-
Add this code where you want the widget to display. The widget can be placed anywhere within a <form> or {%form%} on the product page. The widget normally is placed above the Add to Cart button or the Quantity Selector:
<div class="ro_widget"></div>Note This step is optional, as Bold Subscriptions V1 tries to automatically place the widget if this step is not done manually. If you would like to move the subscription widget on the product page, you can do so by moving the line of code mentioned above either up or down the liquid file between the <form> or { % form %} start and end lines.
- Find the add to cart input or button and add the class addtocart. If no class already exists, you need to create one. Your existing code should look something like the following:
<button type="submit" class="btn" name="add">Add To Cart</button>which should be changed to:
<button type="submit" class="btn addtocart" name="add">Add To Cart</button> - Select Save.
Step 6: Edit cart.liquid
- Under Templates, select cart.liquid.
Note If your theme contains sections, you may have to look for this code under Sections in cart-template.liquid instead.
- Find a line of code similar to:
On newer themes, it may be:{{ item.price | money }}{{ item.final_line_price | money }}Note This code may be referenced differently depending on the theme you are using. In some themes, this code may not exist at all. If it is contained within your theme, the code includes a reference to price.
- Copy and paste the following snippet of code above this line:
<span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_item_price" data-item-key="{{item.key}}" style="display:none !important;"></span> - Find a line of code similar to:
On newer themes, you may be searching for:{{ item.line_price | money }}{{ item.final_line_price | money }} - Copy and paste the following snippet of code above this line:
<span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_item_total" data-item-key="{{item.key}}" style="display:none !important;"></span> - Find a line of code similar to:
{{ cart.total_price | money }} - Copy and paste the following snippet of code above this line:
<span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_total" style="display:none !important;"></span>{{ cart.total_price | money_with_currency }} - Add the following pieces of code where you want the descriptions to display:
<span class="bold_ro_desc" data-product-id="{{item.id}}-{{ forloop.index0 }}"></span>
<span class="bold_load_cart_item_properties"></> - Place {% comment %} and {% endcomment %} tags around any existing properties loop:
- Copy and paste the following line of code around any third-party checkout buttons:
<divclass="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>Note Subscriptions is not compatible with additional checkout buttons. In order for your customer's orders to reoccur, the built in Subscriptions checkout must be used. PayPal, AmazonPay, ApplePay, and GooglePay are not supported within the Subscriptions checkout.
- Select Save.
Request a Subscriptions V1 Install
This option creates a ticket request with our instal team, which is then scheduled to be completed by our experts. By selecting this option, you are asked to confirm which theme you would like this code installation completed on.
All of these requests are completed manually on a rotational basis. An email notification is sent once the installation has been completed.
In order for our team to complete a Liquid code install or help troubleshoot certain issues, we will require access to your Shopify Admin.
To maintain the security of your Shopify account, we are now requesting that you do not proactively send us a Staff Account invite for access to your shop. Instead, a Collaborator account is sent from our team to access your store to complete the installation.
- From within Bold Subscriptions V1, navigate to Help, then Install to theme.
- Under the automatic theme update information, select expert theme update service.
- Review the terms, then select I have created a staff account for Bold.
- Select the theme you would like the code installation to be completed on.
- Select Submit Request.
Once this installation is completed on your store, the subscription widget and the Manage Subscription page should start appearing on your store.
We recommend that a Test Order with Bold Subscriptions V1 be created so you can review how orders appear and how they are managed by your customers.
Code Removal
If you would like to remove the liquid code from your theme, the liquid code can be removed by deleting the snippet files, asset files, and other code mentioned in the instruction steps above.
You can otherwise request a code removal by contacting our Customer Success team.
Note If you are experiencing storefront performance issues after completing the code installation, we recommend requesting an expert installation as your theme may require further liquid code changes. Please see previous section Request a Bold Subscriptions V1 Install for more information.