Customize the Subscriptions Checkout with CSS

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

 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.

 


 

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 called, enter bold-checkout then select .CSS in the dropdown.

    CSS Selection

  7. Select Add Asset.
  8. Add your CSS Styling here.
  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.
Was this article helpful?
0 out of 0 found this helpful