Customize the Subscriptions Checkout with CSS

 Pro-Tip

Please note that this article only relates to Version 1 of Bold Subscriptions. Please visit Bold Subscriptions V1 & V2 Comparison for more information on determining which version of Bold Subscriptions you are currently on.

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.

 Alert

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.

If you have a good understanding of CSS and would like to apply a customization to your Subscriptions checkout, please follow these steps:

  1. From Shopify's 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 your Shopify's 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