Installation Guide for SC Product Options

Modified on Mon, 29 Apr 2024 at 03:07 AM

Overview

SC Product Options requires our Liquid code in order to run correctly on your store. The code installation ensures that the options will appear on your product pages and that your customer's selections will appear correctly on both the cart and checkout pages of your store.

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 the SC Product Options app to your store, it will immediately take you to a screen that notifies you of the importance of running an automatic installation on your store.

If you aren't seeing this option, please hover over Need Help? then Theme Installation.

Selecting Begin automatic update will allow you to choose your preferred theme that you would like to complete the automatic code installation on for SC Product Options.

Pro-Tip

We highly recommend creating a Duplicate version of your Shopify theme to ensure you have a copy without our code installation.

After the checkbox is selected to confirm you have a backup version of your theme, you will be able to proceed with the code installation.

It is important to note that if your current theme is not compatible with our automatic installation tool, the app will automatically notify you. If this happens, you can roll back your theme to its previous state.

When the installation has not been completed in full, reverting the changes will automatically create an installation request for our team to assist you further.

Manual Install

Step 1: Add Snippets

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 bold-common.liquid file.

If it doesn't currently exist:

Select Add a new snippet.
Enter the correct snippet name.
Select Create snippet.

Copy and paste the code: bold-common.liquid

{%- 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 }}',
      {%- if settings.currency_code_enabled -%}
      money_format: {{ shop.money_with_currency_format | json }},
      {%- else -%}
      money_format: {{ shop.money_format | json }},
      {%- endif -%}
      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>

Paste bold-common code

Select Save.

Under Snippets, find the sc-includes.liquid file.
If it doesn't currently exist:
- Select Add a new snippet.
- Enter the correct snippet name.
- Select Create snippet.
Make sure the sc-includes.liquid file contains the following code, if not, add it:

{%- comment -%}
SC-INCLUDES.LIQUID

---------------------------  WARNING  ---------------------------
THIS IS A GENERATED ASSET OF INCLUDES FOR INSTALLED BOLD APPLICATIONS SO DO NOT MODIFY
---------------------------  WARNING  ---------------------------
{%- endcomment -%}

<script>
    window.BOLD.common.cacheParams.options = 1669095856;
</script>
{{ 'bold-options.css' | asset_url | stylesheet_tag }}
{{ 'https://options.shopapps.site/js/options.js' | script_tag }}

4. Select Save.

Pro-Tip

For the Premium plan, please additionally create bold-options-hybrid.liquid snippet file

Select Add a new snippet.
Enter the correct snippet name.
Select Create snippet.
Make sure the bold-options-hybrid.liquid file contains the following code, if not, add it:

{% comment %}Bold:PO 2.0 - Hybrid - Updated 2020-02-04. {% endcomment %}
<script>
    window.BOLD = window.BOLD || {};
        window.BOLD.options = window.BOLD.options || {};
        window.BOLD.options.settings = window.BOLD.options.settings || {};
        window.BOLD.options.settings.v1_variant_mode = window.BOLD.options.settings.v1_variant_mode || true;
        window.BOLD.options.settings.hybrid_fix_auto_insert_inputs =
        window.BOLD.options.settings.hybrid_fix_auto_insert_inputs || true;
</script>

Step 2: Add Asset Files

Under Assets, find the bold-options.css file.
If this file doesn't exist:
1. Select Add a new asset.
2. Select Create a blank file.
3. Enter bold-options as the file name.
4. Select .css for the file extension.
5. Select Add asset.
6. Copy and paste the bold-options.css code into this file.
7. Select Save.

Step 3: Edit theme.liquid

Under Layout, select theme.liquid.
Copy and paste the following code directly below the {{ content_for_header }} line:

{%- render 'bold-common' -%}
{% render 'sc-includes' %}
{% if template == 'product' and product.metafields.inventory.ShappifyHidden or product.type contains '_HIDDEN_' %}<meta name='robots' content='noindex'>{% endif %}

3. Select Save.

Pro-Tip

For the Premium plan, also add {%- render 'bold-options-hybrid' -%} in the theme.liquid as shown below:

{%- render 'bold-options-hybrid' -%}
{%- render 'bold-common' -%}
{% render 'sc-includes' %}
{% if template == 'product' and product.metafields.inventory.ShappifyHidden or product.type contains '_HIDDEN_' %}<meta name='robots' content='noindex'>{% endif %}

Step 4: Edit collection.liquid

Under Templates, select collection.liquid.
Note: The contents for this file may be located under Sections in the collection-template.liquid file.
Find the following line of code:
```
{% for product in collection.products %}
```
Note: This line may appear more than once in the file and you will need to add the line of code for each instance. Can't find this code?

Copy and paste this code directly below this line:

{%- if product.metafields.inventory.ShappifyHidden == 'true' -%}{%- continue -%}{%- endif -%}

PO install instructions if product.metafields

Select Save.

Step 5: Edit search.liquid

Under Templates, select search.liquid.
Find the following line of code:
```
{% for item in search.results %}
```
Note: This line may appear more than once in the file and you will need to add the line of code for each instance.

Copy and paste this code directly below each instance:

{%- if item.metafields.inventory.ShappifyHidden == 'true' -%}{%- continue -%}{%- endif -%}

Paste item metafields

Select Save.

Step 6: Edit product.liquid

Under Templates, select product.liquid.
Note: The contents for this file may be located under Sections in the product-template.liquid file.

Copy and paste the following code at the top of this file:

{%- if product.metafields.inventory.ShappifyHidden == 'true' -%}{%- break -%}{%- endif -%}

PO install instructions product metafields

Select Save.

Step 7: Display Product Options

Under Templates, select product.liquid.
Note: The contents for this file may be located under "Sections" in the product-template.liquid file.
Copy and paste the following code just below the variant selector element:
```
<div class="bold_options" data-product-id="{{ product.id }}"></div>
```
Note: This section of code should end with </select> and reference productSelect and variants at the beginning.
Select Save.

Step 8: Edit cart.liquid

Under Templates, select cart.liquid.
Note: The contents for this file may be located under Sections in the cart-template.liquid file.
Find a section of code starting with:
```
{% for item in cart.items %}
```

Copy and paste the following code below :

 {%- comment -%}Bold:PO 2.0 - Hybrid Input{%- endcomment -%}
 {%- if item.properties._boldBuilderId  and item.properties._boldVariantIds == null -%}
<input type="hidden" name="updates[]" id="updates_{{- item.key -}}" class="bold_hidden_input cart__product-qty" value="{{- item.quantity -}}" min="0" data-id="{{- item.key -}}">
 {%- continue -%}
 {%- endif -%}

Find a section of code starting with:
```
{% for p in item.properties %}
```

Copy and paste the following code over top of this section:

Note: The above section of code should end with {% endif %}.

<span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_item_properties" style="display:none !important;"></span>
{% assign propertySize = item.properties | size %}
{% if propertySize > 0 %}
  {% for p in item.properties %}
    {% assign first_character_in_key = p.first | truncate: 1, '' %}
    {% unless p.last == blank or first_character_in_key == '_' %}
      {{ p.first }}:
      {% if p.last contains '/uploads/' %}
        <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
      {% else %}
        {{ p.last }}
      {% endif %}
    {% endunless %}
  {% endfor %}
{% endif %}

Bold Cart Line Item Properties

Find the following line of code:
```
{{ item.price | money }}
```
On newer themes, it will be:
```
{{ item.final_price | money }}
```

Copy and paste this code in front of each instance:

<span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_item_price" data-item-key="{{item.key}}" style="display:none !important;"></span>

Find the following line of code:

{{ item.line_price | money }}

On newer themes, it will be:

{{ item.final_line_price | money }}

Copy and paste this code in front of each instance:

<span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_item_total" data-item-key="{{item.key}}" style="display:none !important;"></span>

Find the following line of code:
```
{{ cart.total_price | money }}
```

Copy and paste this code in front of each instance:

<span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_total" style="display:none !important;"></span>

Select Save.

Note: Product Options is not compatible with dynamic checkout buttons that direct the customer to the checkout from the product page. This includes Buy it Now, PayPal, AmazonPay, ApplePay, GooglePay, etc. Hide the Buy Now Checkout Button with Product Options

Step 9: Update Notification Emails

From the Shopify admin, select Settings.
Select Notifications.
Under Orders, select Order confirmation.
Overwrite all of the code in the Email body with: Order confirmation
Select Save and navigate back to the Notifications page.
Select Abandoned checkout.

Replace this code:

<td class="button__cell"><a href="{{ url }}" class="button__text">Complete your purchase</a></td>
 </tr>
 </table>
 {% if shop.url %}
 <table class="link secondary-action-cell">
 <tr>
 <td class="link__cell"><a href="{{ shop.url }}" class="link__text"><span class='or'>or</span> Visit our store</a></td>

With this code:

<td class="button__cell"><a href="{{ shop.url }}/cart" class="button__text">Complete your purchase</a></td>
 </tr>
 </table&gt
 {% if shop.url %}
 <table class="link secondary-action-cell">
 <tr>
 <td class="link__cell"><a href="{{ shop.url }}" class="link__text"><span class='or'>or</span> Visit our store</a></td>

Select Save and navigate back to the Notifications page.
Select Shipping confirmation.
Overwrite all of the code in the Email body with: Shipping confirmation.
Select Save and navigate back to the Notifications page.
Under Shipping, select Shipping update.
Overwrite all of the code in the Email body with: Shipping update.
Select Save and navigate back to the Notifications page.
Under Templates, select New order.
Overwrite all of the code in the Email body with: New order notification.
Select Save.

Note: If you are experiencing storefront performance issues after completing Product Option's code installation, we recommend requesting an expert installation as your theme may require further liquid code changes. Please see previous step Request a Product Options Install for more information.

Request a SC Product Options Install

This option creates a ticket request with our installation team, which is then scheduled to be completed by our experts. By selecting this option, you will be asked to confirm which theme you would like this code installation completed on.

All of these requests are completed manually on a rotational basis. You will receive an email notification upon completion.

From within SC Product Options, hover over Need Help?
Select Liquid installation.
Under the automatic theme update information, select expert theme update service.
In the bottom left corner, select the theme you would like the code installation to be completed on.
Select Submit Request.

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 the code includes mentioned in the instruction steps above.

You can otherwise request a code removal by contacting our Merchant Success team.

Need Assistance with App Setup or Customization?
Schedule your session and enhance your app experience with expert guidance!
Book a Personalized Enablement Call.