Advanced Subscription Widget Customization

Return to Subscriptions for Shopify Checkout

Our advanced customization tool allows you to quickly and easily customize the appearance of your subscription widget without the need to understand code.

You can use the visual editor to customize the subscription widget colors and style while previewing the results in real-time. Once you are happy with the widget style, you can click to generate the CSS code and apply it to your theme files.

This guide provides detailed step-by-step instructions on how to use the editor and apply the CSS to your theme files.

Subscription widget customizer

Customize Widget

Generate CSS

Subscription widget

---

Widget Background Color:

Widget Corner Radius:

Widget Border Color:

Widget Border Thickness:

Widget Border Style: Solid Dashed Dotted Double None

Purchase Options

---

Layout Styles: Default layout Vertical Radio 1 Vertical Radio 2 Vertical Radio 3 Vertical 1 Vertical Radio 4 Vertical 2 Vertical 3

Remove Option Icon

Radio Option Accent Color:

Line Seprator Color

Radio Option Box Background Color:

Radio Option Box Border Radius:

Radio Option Box Border Color:

Radio Option Box Border Thickness:

Radio Option Box Border Style: Solid Dashed Dotted Double None

Options Icon Color (Unselected):

Option Icon Color (Selected):

Options Background Color:

Options Border Thickness:

Options Border Style: Solid Dashed Dotted Double None

Options Corner Radius:

Options Shadow Color (Hover):

Options Text Color (Unselected):

Options Text Color (Selected):

Options Border Color (Unselected):

Options Border Color (Selected):

Subscription Frequencies

---

Delivery Frequency Heading Color:

Price Color (Unselected):

Price Color (Selected):

Delivery Color (Unselected):

Delivery Color (Selected):

Frequency Text Color (Unselected):

Frequency Text Color (Selected):

Frequency Radio Color (Selected):

Frequency Background Color (Selected):

Frequency Background Color (Hover):

Plan Check Color:

Prepaid Subscriptions (Not applicable for Liquid installations)

---

Prepay for Subs Text Color:

Prepay for Subs Check Color:

Billing Frequency Heading Color:

Prepay Frequency Background Color (Selected):

Prepay Frequency Background Color (Hover):

Prepay Frequency Box Check Color:

Prepay Frequency Title Color (Unselected):

Prepay Frequency Title Color (Selected):

Prepay Frequency Subtitle Color (Selected):

Prepay Frequency Selected Caution Color (Selected):

Prepay Frequency Price Color (Unselected):

Prepay Frequency Price Color (Selected):

Prepay Frequency Delivery Text Color (Unselected):

Prepay Frequency Delievery Text Color (Selected):

Subscription Details (Not applicable for Liquid installations)

---

Sub Details Text Color:

Sub Details Heading Color:

Sub Details Description Color:

Sub Policy Link Color:

Sub Details Background Color:

Preview

Purchase Options

One-time Purchase

Subscribe and Save
(Save up to 10%)

Delivery Frequency

Daily

$20  /  delivery

Weekly

$50  /  delivery

Monthly

$90  /  delivery

---

Prepay for subscription (Save 5%)

Billing Frequency

2 Orders (5% off)

Billed $1,329.90 today

Becomes a regular subscription after 2 orders

$664.95  / delivery

5 Orders (10% off)

Billed $3,149.75 today

Becomes a regular subscription after 5 orders

$629.95  / delivery

Subscription details

Here's how it works:

These prices don't include taxes or other fees. This subscription auto-renews. It can be skipped or cancelled at anytime.

View subscription policy

Powered by

Setup

Use the instructions below to style your widget, generate the CSS, and apply it to your theme.

Note: The advanced customization tool works best with Shopify's Online Store 2.0 themes. Some style elements such as those shown under Subscriptions Details and Prepaid Subscriptions are not applicable on vintage themes with Liquid installation.

Step 1: Use the subscription widget customizer to style the widget

1. In the widget Preview, expand the following sections to preview all elements:
   1. Click on the Subscribe and Save option.
   2. Check the box next to Prepay for subscription.
   3. Click on Subscription details.
      
2. Under Customize Widget, make your style choices for each element using the instructions below:
   1. To select an element’s color, click in the color palette and use the picker to select a color, or enter a custom HEX, RGB, or HSL code.
   2. Enter a number for a Border Thickness or Corner Radius.
   3. Expand the dropdown menu to select a Border Style.
   4. For any elements that say (Selected), you must click on the element to see the selected state styles.
   5. For any elements that say (Hover), you must hover over the element to see the hover state styles.
   6. Under Purchase Options, expand the dropdown menu to choose a Layout Style.
   7. Move the toggle to the right to Remove Option Icons.
      

Step 2: Generate the CSS and apply it to your theme

1. Click the Generate CSS button located at the top of the editor, next to Customize Widget.
2. Scroll down to the generated CSS code, and click Copy.
3. In your Shopify admin, navigate to Sales channels > Online Store > Themes.
4. Click the ellipsis (three dots) next to your desired theme, and select Edit code.
5. In the left menu, expand the assets folder, and click Add a new asset.
6. Click Create a blank file.
7. Ensure the Extension is set to css.
8. In the File name field, enter bsub-variable.

   

9. Click Done.
10. Paste the generated CSS code from the widget customizer into this file.
11. Click Save.
12. Under assets, click Create a new asset again.
13. Click Create a blank file.
14. Ensure the Extension is set to css.
15. In the File name field, enter bsub-new.
16. Click Done.
17. Copy and paste the following code into this file:

    • @keyframes bsub-fadeInFromNone {
      0% {
      display: none;
      opacity: 0;
      }
      1% {
      display: block;
      opacity: 0;
      }
      100% {
      display: block;
      opacity: 1;
      }
      }
      .bsub__hidden {
      display: none;
      }
      .bsub-widget {
      padding: 0 5px !important;
      border: 0 !important;
      margin: 0 !important;
      }
      .bsub-widget legend {
      margin-bottom: 5px;
      }
      .bsub-widget__wrapper {
      padding: 24px;
      border-radius: var(--bsubWidgetCornerRadius);
      border: var(--bsubWidgetBorderThickness) var(--bsubWidgetBorderStyle) var(--bsubWidgetBorderColor);
      background-color: var(--bsubWidgetBackgroundColor);
      font-size: 14px;
      }
      .bsub-widget__wrapper fieldset {
      border: 0;
      background-color: inherit;
      margin: 0;
      padding: 0;
      }
      .bsub-widget__wrapper legend {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 3px;
      }
      .bsub-widget__wrapper--single .bsub-widget__groups-container {
      display: none;
      }
      .bsub-widget__wrapper--single .bsub-widget__plans-container,
      .bsub-widget__wrapper--single .bsub-widget__options-container {
      margin-top: 0;
      }
      .bsub-widget__description {
      margin-top: 20px;
      padding-top: 10px;
      color: black;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      }
      .bsub-widget__groups-container {
      display: flex;
      align-items: stretch;
      }
      
      .bsub-widget__group-label > .bsub-widget__group-header > svg {
      display: var(--displayTypeForImages);
      }
      
      .bsub-widget__groups-container input[type="radio"] {
      display: var(--displayTypeForOptions);
      }
      .bsub-widget__groups-container:only-child {
      margin-bottom: 0;
      }
      .bsub-widget__group {
      flex: 1 1 100%;
      }
      .bsub-widget__group + .bsub-widget__group {
      margin-left: var(--fixedSpaceBetweenOptions);
      }
      .bsub-widget__group-header {
      display: flex !important;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      text-align: center;
      padding: 1rem;
      transition: 0.3s;
      border-width: var(--bsubOptionsBoxBorderThickness);
      border-style: var(--bsubOptionsBoxBorderStyle);
      border-color: var(--bsubOptionsBoxBorderColor);
      
      /* border: var(--bsubOptionsBoxBorderThickness) var(--bsubOptionsBoxBorderStyle) var(--bsubOptionsBoxBorderColor); */
      border-radius: var(--bsubOptionsBoxBorderRadius);
      background-color: var(--bsubOptionsBoxBackgroundColor);
      }
      .bsub-widget__group-header .bsub-widget__image {
      display: block;
      width: 4em;
      height: 4em;
      color: var(--defaultOptionImageColor);
      }
      
      input:checked + .bsub-widget__group-header .bsub-widget__image {
      color: var(--subOptionSelectedImageColor);
      }
      
      .bsub-widget__group-header:hover {
      box-shadow: 0px 0px 2px 2px var(--hoverShadowColorOnSubOptions);
      }
      
      input:checked + .bsub-widget__group-header {
      border-color: var(--subOptionSelectedBorderColor);
      color: var(--subOptionSelectedTextColor);
      font-weight: 700;
      }
      
      input:not(checked) + .bsub-widget__group-header {
      color: var(--subOptionTextColor);
      }
      
      .bsub-widget__delivery-fieldset > legend,
      .bsub-widget__plans-container > fieldset > legend {
      color: var(--deliveryFrequencyColor);
      }
      
      .bsub-widget__billing-fieldset > legend {
      color: var(--billingFrequencyColor);
      }
      
      .bsub-widget__group-label {
      background-color: var(--radioOptionBoxBackgroundColor);
      height: 100%;
      }
      
      .bsub-widget__group-discount-summary {
      font-size: 12px;
      }
      .bsub-widget__plans-container,
      .bsub-widget__options-container {
      animation: bsub-fadeInFromNone 100ms ease-in-out;
      margin-top: 24px;
      }
      .bsub-widget__plans-container input[type="radio"],
      .bsub-widget__options-container input[type="radio"] {
      display: none;
      }
      .bsub-widget__plans-container fieldset + fieldset,
      .bsub-widget__options-container fieldset + fieldset {
      margin-top: 10px;
      }
      .bsub-widget__plan,
      .bsub-widget__option {
      width: 100%;
      }
      .bsub-widget__plan + .bsub-widget__plan,
      .bsub-widget__option + .bsub-widget__option {
      margin-top: 5px;
      }
      .bsub-widget__plan-header {
      display: flex !important;
      align-items: center;
      padding: 6px;
      border-radius: 8px;
      }
      .bsub-widget__plan-header .bsub-widget__image {
      width: 20px;
      height: 20px;
      margin-right: 8px;
      }
      .bsub-widget__plan-header .bsub-widget__text {
      flex-grow: 1;
      }
      
      .bsub-widget__delivery-fieldset input:checked + .bsub-widget__plan-header,
      input:checked + .bsub-widget__plan-header {
      font-weight: 700;
      background: var(--frequencySelectBackgroundColor);
      cursor: pointer;
      }
      
      /* .bsub-widget__main-text {
      color: var(--subFrequencyTextNotSelectColor);
      } */
      
      /* .bsub-widget__plan-header .bsub-widget__text {
      color: var(--frequencyLabelColor);
      } */
      
      .bsub-widget__delivery-fieldset input:checked + .bsub-widget__plan-header .bsub-widget__text .bsub-widget__main-text,
      input:checked + .bsub-widget__plan-header .bsub-widget__text .bsub-widget__main-text,
      .bsub-widget__delivery-fieldset input:checked + .bsub-widget__plan-header .bsub-widget__text,
      input:checked + .bsub-widget__plan-header .bsub-widget__text {
      color: var(--subFrequencyTextSelectedColor);
      }
      
      .bsub-widget__delivery-fieldset input:not(checked) + .bsub-widget__plan-header .bsub-widget__text .bsub-widget__main-text,
      input:not(checked) + .bsub-widget__plan-header .bsub-widget__text .bsub-widget__main-text,
      .bsub-widget__delivery-fieldset input:not(checked) + .bsub-widget__plan-header .bsub-widget__text,
      input:not(checked) + .bsub-widget__plan-header .bsub-widget__text {
      color: var(--frequencyLabelColor);
      }
      
      .bsub-widget__delivery-fieldset input:checked + .bsub-widget__plan-header .bsub-widget__plan-pricing span:nth-child(1),
      input:checked + .bsub-widget__plan-header .bsub-widget__plan-pricing span:nth-child(1) {
      color: var(--selectedPriceLabelColor);
      }
      
      .bsub-widget__delivery-fieldset input:not(checked) + .bsub-widget__plan-header .bsub-widget__plan-pricing span:nth-child(1),
      input:not(checked) + .bsub-widget__plan-header .bsub-widget__plan-pricing span:nth-child(1) {
      color: var(--priceLabelColor);
      }
      
      .bsub-widget__delivery-fieldset input:checked + .bsub-widget__plan-header .bsub-widget__plan-pricing span:nth-child(2),
      input:checked + .bsub-widget__plan-header .bsub-widget__plan-pricing span:nth-child(3) {
      color: var(--selectedDeliveryLabelColor);
      }
      
      .bsub-widget__delivery-fieldset input:not(checked) + .bsub-widget__plan-header .bsub-widget__plan-pricing span:nth-child(2),
      input:not(checked) + .bsub-widget__plan-header .bsub-widget__plan-pricing span:nth-child(3) {
      color: var(--deliveryLabelColor);
      }
      
      input:checked + .bsub-widget__plan-header .bsub-widget__unchecked-icon {
      display: none;
      }
      input:not(:checked) + .bsub-widget__plan-header .bsub-widget__checked-icon {
      display: none;
      }
      input:not(:checked) + .bsub-widget__plan-header:hover {
      cursor: pointer;
      background: var(--frequencyBoxHoverColor);
      }
      .bsub-cart__selling-plan-details,
      .bsub-cart-popup__selling-plan-details {
      font-size: 12px;
      }
      
      .bsub-widget .bsub-widget__delivery-fieldset input:checked + .bsub-widget__plan-header > .bsub-widget__checked-icon,
      input:checked + .bsub-widget__plan-header > .bsub-widget__checked-icon {
      color: var(--frequencyPlanCheckedTickColor);
      }
      
      /* Sub Policy */
      .bsub-widget__toggle-details-btn div {
      color: var(--subPolictTextColor);
      }
      
      .bsub-widget__sub-details-heading {
      color: var(--subDetailsHeaderTextColor);
      }
      
      .bsub-widget__sub-details-desc {
      color: var(--subDetailsDescColor);
      }
      
      .bsub-widget__policy-link {
      color: var(--viewSubPolicyLinkColor);
      }
      
      .bsub-widget__sub-details {
      background-color: var(--subDetailsBgColor);
      }
      
      /* bsub-widget__delivery-fieldset */
      
      /* prepay */
      .bsub-widget__prepaid-checkbox .bsub-widget__prepaid-checkbox-label .bsub-widget__text {
      color: var(--prepayTextColor);
      }
      
      .bsub-widget__billing-fieldset input:checked + .bsub-widget__plan-header {
      font-weight: 700;
      background: var(--billingFrequencyBoxBackgroundColor);
      cursor: pointer;
      }
      .bsub-widget__billing-fieldset input:not(:checked) + .bsub-widget__plan-header:hover {
      cursor: pointer;
      background: var(--billingFrequencyBoxHoverColor);
      }
      
      .bsub-widget__billing-fieldset input:checked + .bsub-widget__plan-header > .bsub-widget__checked-icon {
      color: var(--billingFrequencyTickColor);
      }
      
      .bsub-widget__billing-fieldset input:checked + .bsub-widget__plan-header .bsub-widget__main-text {
      color: var(--billingFrequencySelectedTitleColor);
      }
      
      .bsub-widget__billing-fieldset input:not(checked) + .bsub-widget__plan-header .bsub-widget__main-text {
      color: var(--billingFrequencyTitleColor);
      }
      
      .bsub-widget__billing-fieldset input:checked + .bsub-widget__plan-header .bsub-widget__sub-text {
      color: var(--billingFrequencySubTitleColor);
      }
      
      .bsub-widget__billing-fieldset input:not(checked) + .bsub-widget__plan-header .bsub-widget__sub-text {
      color: var(--billingFrequencySelectedSubTitleColor);
      }
      
      .bsub-widget__billing-fieldset input:checked + .bsub-widget__plan-header .bsub-widget__renewal-text {
      color: var(--billingFrequencySelectedCautionColor);
      }
      
      .bsub-widget__billing-fieldset input:not(checked) + .bsub-widget__plan-header .bsub-widget__renewal-text {
      color: var(--billingFrequencyCautionColor);
      }
      
      .bsub-widget__billing-fieldset input:not(checked) + .bsub-widget__plan-header > .bsub-widget__plan-pricing > span:nth-child(1) {
      color: var(--billingFrequencyPriceColor);
      }
      
      .bsub-widget__billing-fieldset input:checked + .bsub-widget__plan-header > .bsub-widget__plan-pricing > span:nth-child(1) {
      color: var(--billingFrequencySelectedPriceColor);
      }
      
      /* billingFrequencySelectedPriceColor */
      
      .bsub-widget__billing-fieldset input:checked + .bsub-widget__plan-header > .bsub-widget__plan-pricing > span:nth-child(2) {
      color: var(--billingFrequencySelectedDeliveryLabelColor);
      }
      
      .bsub-widget__billing-fieldset input:not(checked) + .bsub-widget__plan-header > .bsub-widget__plan-pricing > span:nth-child(2) {
      color: var(--billingFrequencyDeliveryLabelColor);
      }
      
      /* .bsub-widget .bsub-widget__delivery-fieldset input:checked + .bsub-widget__plan-header > .bsub-widget__checked-icon { */
      .bsub-widget .bsub-widget__billing-fieldset input:checked + .bsub-widget__plan-header > .bsub-widget__checked-icon {
      color: var(--billingFrequencyTickColor);
      }
      
      .bsub-widget .bsub-widget__prepaid-checkbox input:checked + div > svg {
      color: var(--checkedPolicyTickCollor);
      }
      
      /* Radio Button Accent color */ 
      input[name="bsub-selling-plan-group"] {
      accent-color: var(--radioAccentColor);
      }
      
      /* Delivery Frequency and Prepay Subscript radio accent color */
      .bsub-options-container input[type="radio"],
      .bsub-widget__plans-container input[type="radio"] {
       accent-color: var(--verticalSixRadioAccentColor);
      }

18. Click Save.
19. In your theme files, open theme.liquid.
20. Scroll to the bottom of the file, and add the following two links before the </body> tag.

      {{ 'bsub-variable.css' | asset_url | stylesheet_tag }}
      {{ 'bsub-new.css' | asset_url | stylesheet_tag }}
    

    

21. Click Save.

Next steps

Once you are finished you can test your newly styled subscription widget on your storefront.

If you'd like to change the subscription widget placement, language, or set the default selection to subscribe and save, you can use the app block settings as outlined in Customize the Subscription Widget App Block.

Return to article

Customize the Subscription Widget App Block