Customize the Recurring Checkout with CSS

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

  1. From "Shopify Admin", select Online Store.

    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.

    Select Settings 

  21. Select Display.

    Select Display 

  22. Select the Checkout Page tab.

    select the checkout page 

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

     paste the url

  24. Select Save.

    select save 

That's it!

View a Sample Recurring Orders Checkout Stylesheet.

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.

Next Steps