Customize the Subscriptions Checkout with CSS

 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.

Overview

With Bold Subscriptions V1, you are able to completely customize your Subscriptions checkout with CSS. This is completed by adding your customization directly to your stores theme files.

 


 

Customizing the Checkout

 Caution

Making adjustments to the Bold Subscriptions V1 checkout requires knowledge of CSS. If you are not comfortable with completing this on your theme, one of our partners would be happy to create this as a paid customization on your store. Please reach out to 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