Select your platform

Customize the Bold Subscriptions V1 Checkout

Alexa
Alexa
  • Updated

With Bold Subscriptions V1, you can completely customize the recurring checkout with CSS, which can be added directly into your theme's asset files.

This article is relevant to Subscriptions V1. If you have Subscriptions for Shopify Checkout on your store, please visit Subscriptions for Shopify Checkout Overview. If you are unsure of which version of Bold Subscriptions that you have currently installed, please visit Identify Your Version of Bold Subscriptions

 


 

Customizing the Checkout

 Caution

Making adjustments to the Bold Subscriptions V1 checkout requires knowledge of CSS. If you are not comfortable completing this on your own, one of our partners would be happy to create this for you! Please reach out to our partners at HeyCarson via this form.

  1. From the Shopify admin, select Online store.
  2. Select Actions.
  3. Select Edit Code.
  4. Under Assets, select Add a new asset.
  5. Select Create a blank file.
  6. Next to Create a blank file, enter bold-checkout then select .CSS.

    CSS Selection

  7. Select Add Asset.
  8. Add your CSS styling into this file.
  9. Select Save.
  10. Under Layout, select theme.liquid.
  11. Find the <head> element near the top of the file.
  12. Paste this code right after the <head> tag:
    <meta name="bold-checkout-styles" content="{{ 'bold-checkout.css' | asset_url }}">
  13. Select Save.
  14. In another browser window, go to your storefront and right click on the page.
  15. Select View page source.

    View Page Source

  16. Copy the URL of your stylesheet.

    Steps to Complete

  17. From the Shopify admin, select Apps.
  18. Select Bold Subscriptions V1.
  19. Select Settings, then Display Settings.
  20. Under Select the page to customize, choose the Checkout page option.
  21. Under Custom CSS URL, paste the URL copied from the View Page Source step.

    Enter Custom CSS URL

  22. Select Save.