Customize the Subscriptions Checkout with CSS


If you have a good understanding of CSS and would like to customize the subscriptions checkout with CSS, you can do so by following these steps:

  1. From Shopify's admin, select Online Store.

    Select Online Store

  2. Select Actions.


  3. Select Edit code.

    Edit code

  4. Under "Assets", select Add a new asset.

    select add a new asset

  5. Select Create a blank file.

    Select create a blank file

  6. Next to "Create a blank file called", enter bold-checkout.

    enter bold-checkout

  7. Select .css from the drop-down box.

    change to css

  8. Select Add asset.

    Select add asset

  9. Add your CSS styling.

    add your css

  10. Select Save.

    Select save

  11. Under "Layout", select theme.liquid.

    select theme.liquid

  12. Find the <head> element near the top of the file.

    find the head element

  13. Copy and paste this line right after it:
    <meta name="bold-checkout-styles" content="{{ 'bold-checkout.css' | asset_url }}">

    copy and paste this code

  14. Select Save.

    select save

  15. In another browser, from your "storefront", right-click on the page.

    right-click storefront

  16. Select View page source.

    view page source

  17. Copy the URL of your stylesheet.

    copy the stylesheet url

  18. Select Apps.

    Select Apps

  19. Select Recurring Orders & Subscriptions by Bold.

    Select Recurring Orders

  20. Select Settings, then Display Settings.

    Select Settings/Display Settings

  21. Under "Select the page to customize", choose the Checkout Page option.

    Select Checkout Page

  22. Under "Custom CSS URL", paste the URL you copied in Step 17.

    Enter Custom CSS URL

  23. Select Save.

    Note: Due to Shopify's caching system, you will have to complete steps 15 - 24 every time you make a change to the CSS. If you don't complete these steps, you will not see the changes.


That's it! View a Sample Bold Subscriptions Checkout Stylesheet.

Next Steps:

Blog Posts:

3 out of 3 found this helpful



Please sign in to leave a comment.