Troubleshooting Display Settings in Bold Subscriptions

Occasionally you may experience an issue with the display of Bold Subscriptions V1. This article outlines how to resolve these issues.

Please select an option below to view more information.

 Alert

Please note that this article only relates to Version 1 of Bold Subscriptions. If you have Version 2 of Bold Subscriptions installed on your store, please visit Subscriptions V2 Overview.

If you are unsure of which version of Bold Subscriptions that you have currently installed, please visit Bold Subscriptions V1 & V2 Comparison.

 


 

If you have recently installed Bold Subscriptions V1 or changed themes, we recommend following our install instructions to ensure that all of our Liquid code is present in your published theme.

If the subscription widget is appearing for some products but not all, you will need to clear the subscriptions cache. Please visit Caching in Bold Subscriptions for more information.

If you would simply like to move the subscription widget, you can do so by moving the following line of code in your theme. It is important to note that the widget can only be placed within a <form> or {%form%}

<div class="ro_widget"></div>

 


 

If the widget isn't appearing on your store's home page, it's possible that it's not being added to the Bold.common.Shopify.variants objects.

  1. From the Shopify admin, navigate to Online Store.
  2. Select Edit code on the theme you'd like to make these changes on.
  3. Find the Liquid file that is using the featured-product display on the home page.

    Note: This Liquid file could be located in sections, snippets or templates.

  4. At the top of the file, paste the following code:
    <script>
    {%- comment -%} product page {%- endcomment -%}
    window.BOLD.common.Shopify.saveProduct({{ product.handle | json }}, {{ product.id | json }});
    {%- for variant in product.variants -%} 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}}'}); {%- endfor -%}
    </script>
 Caution

If the Liquid product variable is named something other than product, you then need adjust the product variable (in the snippet code above) to match.

 


 

Customers who are signed in to your storefront with an existing active subscription will be able to see an extra button on the product page: Add to Existing Subscription. This will be displayed near the Add to Cart button and allow your customers to add additional products into their existing subscription(s).

  1. From the Shopify admin, select Online Store.
  2. Select Actions on your theme.
  3. Select Edit Code.
  4. Under Templates, select product.liquid.
    Note: 
    If your theme contains sections you may need to open the product-template.liquid under Sections instead.
  5. Find The add to cart input:
    <input id="addToCart" class="btn" name="add" type="submit" value="add to cart"/>
  6. and add this class:
    class="{{ bold_add_to_cart_class }}"
    If you don't see this code, then you'll have to create one. The code should look something like this:
    <input class="btn {{ bold_add_to_cart_class }}" name="add" type="submit" value="add to cart"/>
  7. Below this code, add:
    <!-- bold-ro-liquid --> <div class="bold_add_to_orders" style="display: inline-block;"> </div> <!-- bold-ro-liquid -->
  8. Select Save.

 


 

The See Details feature can be enabled to display more information about your subscriptions.

If you have enabled this feature but it isn't appearing, we recommend reviewing your Display Settings; sometimes the See Details feature is generated with colors that blend in to your store's background color.

  1. From the Shopify admin, select Apps.
  2. Select Bold Subscriptions V1.
  3. Select Settings, then Display Settings.
  4. Within the Product Page Widget tab, scroll down to More Details Hover Box.
  5. Adjust the Background Color and/or Font Color.

    See Details Feature Display

  6. Select Save.

 


 

There are a few things that can cause the checkout to display $0.00 when your customers are buying a subscription.

Most of the time it's due to a symbol being in your Shopify product description - specifically the equals (=) sign. If your product description has an equals (=) sign, please remove it and re-attempt the checkout.

  1. From the Shopify admin, select Products.
  2. Select the product that is displaying as $0.
  3. In the Description field, check for and remove the = symbols if they are present.

    Shopify Product Description

  4. Select Save.

 


 

Solution #1

If the Continue button doesn't work inside of the recurring checkout, it's likely because your store is password protected.

To verify this, go to your storefront. If you're taken to your store's URL with /password at the end, or you see a password page, you will need to disable this setting.

  1. From the Shopify admin, select Online Store.
  2. Select Preferences.
  3. Scroll down to Password Page.
  4. Deselect Enable password page to disable it.
  5. Select Save.
    Note: If you need to keep your store password protected, you can re-enable the password page after you've completed the testing.

 


 

Solution #2

Alternatively, you can resolve this issue by using Fixed Shipping Rates in Subscriptions. Using Bold Subscriptions' fixed shipping rates allows you to enter a shipping rate address for the country you have a fixed rate for, even with a storefront password.

This solution only works for shipping rates made for Canada and the United States.

 Caution

It is important to remove the fixed shipping rate(s) before your store launches / re-opens. If the fixed shipping rates are left in the app, Bold Subscriptions will continue using these rates instead of your Shopify shipping rates.

 


 

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under Assets, select your theme's main .CSS file.
    Note: This will vary by theme and could be something like theme.scss.liquid.
  5. Find the class below:
    .product-form__cart-submit
  6. Add this CSS styling to it:
    float: left; 
    margin-right: 5px;
  7. Select Save.
Was this article helpful?
0 out of 0 found this helpful