Customize the Subscriptions Checkout with CSS

Overview

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

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.
  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