[Shopify] Product Options Display: CSS and How-To Examples

This guide provides CSS customization examples for the Autoship Cloud widget on Shopify product pages. For widget settings, installation, and advanced configuration, see the main documentation: [Shopify] Product Options Display Widget.

Before You Begin

Where to Add Custom CSS

Because the Autoship widget injects its styles via inline <style>   tags, theme-level Custom CSS (in Theme Settings) may not override widget styles. Instead, add your CSS using a Custom Liquid block that loads after the Autoship widget:

1. Go to Online Store > Themes > Customize
2. Navigate to your Product page template
3. Add a Custom Liquid block at the bottom of the page
4. Paste your CSS inside opening <style>  and closing </style>   tags
5. Save changes

Price Placeholders

Several examples below reference price elements like .price-details   and .price-old  . These require Widget Placeholders to be configured in your widget's data-subscribe-label   attribute.

Layout Customizations

Force Radio Button and Text Inline

Your Shopify Store's theme or Product template may display the radio buttons for the "Buy it once" and "Subscribe" options as stacked above their labels. To force them inline:

<style>
  /* Force radio + text on same line */
  .autoship-widget-option-wrapper.vertical {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  .autoship-widget-option-wrapper.vertical .autoship-widget-dropdown-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
  }

  .autoship-widget-dropdown-label__text {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    flex: 1 !important;
  }

  /* Buy it once option - force inline */
  .autoship-widget-option-wrapper:not(.vertical) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  .autoship-widget-option-wrapper:not(.vertical) .autoship-widget-dropdown-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
  }
</style>

Spacing Between Options

Add vertical spacing between "Buy it once" and "Subscribe" options:

<style>
  /* Add margin below the first option */
  .autoship-widget-options > .autoship-widget-option-wrapper:first-child {
    margin-bottom: 20px !important;
  }
</style>

Note: Using :first-child   ensures spacing works regardless of option order in widget settings.

Indent Sub-Elements Under Option Label

Make benefits list and frequency dropdown appear as sub-elements aligned with the option text:

<style>
  /* Indent to align with option text, past radio button */
  .autoship-widget-option-wrapper.vertical .autoship-widget-subscription-details,
  .autoship-widget-option-wrapper.vertical .autoship-deliver-every-dropdown {
    margin-left: 28px !important;
  }
</style>

Price Styling

Style Price Display

Customize how subscription and regular prices appear:

<style>
  /* Subscription price - black and bold */
  .price-details {
    color: #000000 !important;
    font-weight: 600 !important;
  }

  /* Crossed-out original price */
  .price-old {
    text-decoration: line-through !important;
    color: #999999 !important;
    font-weight: 400 !important;
  }
</style>

Right-Align Prices Within Each Option Row

Push prices to the right side of the option row. Requires price placeholders to be added to your widget settings.

<style>
  /* Prices pushed to the right */
  .price-details,
  .autoship-widget-dropdown-label__text .price-details,
  div.price-details {
    margin-left: auto !important;
    padding-left: 20px !important;
    text-align: right !important;
    flex-shrink: 0 !important;
  }
</style>

Border & Shape Customizations

Rounded Borders on Option Wrappers

Add rounded corners to match your theme:

<style>
  /* Subscribe option border */
  .autoship-widget-option-wrapper.vertical {
    border-radius: 16px !important;
    border: 1px solid #000000 !important;
  }

  /* Buy it once option border */
  .autoship-widget-option-wrapper:not(.vertical) {
    border-radius: 16px !important;
    border: 1px solid #000000 !important;
  }
</style>

Style the Frequency Dropdown

Match the dropdown to your theme's form styling:

<style>
  .autoship-deliver-every-dropdown select,
  .autoship-widget-dropdown,
  select.autoship-widget-dropdown {
    border: 1px solid #000000 !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    background-color: #fff !important;
    font-size: 16px !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
</style>

Add A List of "Subscriber Benefits" and Style It

Add Content in the Subscribe Details Section and Make it Your Own

Add simple HTML to the Subscribe Details Section of the Widget and then use CSS to replace the default bullets or dots with emoji or custom icons:

<!—- HTML Added to the Subscribe Details Section —>
<ul class="subscribe-benefits">
  <li>Free Shipping on Every Order</li>
  <li>Skip or Cancel At Any Time</li>
  <li>Save on All Future Deliveries</li>
  <li>Pre-Shipment Reminders</li>
</ul>

This is the CSS that you then add to the Custom Liquid Code block to style the bullets:

<style>
  /* Remove default bullets */
  ul.subscribe-benefits {
    list-style: none !important;
    padding-left: 0 !important;
  }

  ul.subscribe-benefits li {
    list-style: none !important;
    position: relative !important;
    padding-left: 28px !important;
    margin-bottom: 8px !important;
  }

  /* Custom bullet - change content to any emoji or character */
  ul.subscribe-benefits li::before {
    content: "✨" !important;  /* Change this to your preferred icon */
    position: absolute !important;
    left: 0 !important;
  }
</style>

Other popular bullet options:

Complete Example: Fully Styled Widget

This example combines all customizations for a polished, on-brand widget appearance:

<style>
  /* ========================================
     Autoship Widget - Complete Customization
     ======================================== */
  
  /* Spacing between option wrappers */
  .autoship-widget-options > .autoship-widget-option-wrapper:first-child {
    margin-bottom: 20px !important;
  }
  
  /* SUBSCRIBE OPTION: Layout fix */
  .autoship-widget-option-wrapper.vertical {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    border-radius: 16px !important;
    border: 1px solid #000000 !important;
  }
  
  .autoship-widget-option-wrapper.vertical .autoship-widget-dropdown-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
  }
  
  .autoship-widget-dropdown-label__text {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    flex: 1 !important;
  }
  
  /* Prices pushed fully right */
  .price-details,
  .autoship-widget-dropdown-label__text .price-details,
  .autoship-widget .price-details,
  div.price-details {
    margin-left: auto !important;
    padding-left: 20px !important;
    text-align: right !important;
    color: #000000 !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
  }
  
  .price-old,
  .price-details .price-old,
  .autoship-widget .price-old,
  span.price-old {
    text-decoration: line-through !important;
    color: #999999 !important;
    font-weight: 400 !important;
  }
  
  /* Indent sub-elements to align with option text */
  .autoship-widget-option-wrapper.vertical .autoship-widget-subscription-details,
  .autoship-widget-option-wrapper.vertical .autoship-deliver-every-dropdown {
    margin-left: 28px !important;
  }
  
  /* BUY IT ONCE OPTION: Force inline */
  .autoship-widget-option-wrapper:not(.vertical) .autoship-widget-dropdown-label,
  .autoship-widget label,
  .autoship-widget-dropdown-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
  }
  
  .autoship-widget-option-wrapper:not(.vertical) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    border-radius: 16px !important;
    border: 1px solid #000000 !important;
  }
  
  /* Frequency dropdown styling */
  .autoship-deliver-every-dropdown select,
  .autoship-widget-dropdown,
  select.autoship-widget-dropdown {
    border: 1px solid #000000 !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    background-color: #fff !important;
    font-size: 16px !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  
  /* Custom bullet icons */
  ul.subscribe-benefits {
    list-style: none !important;
    padding-left: 0 !important;
  }
  
  ul.subscribe-benefits li {
    list-style: none !important;
    position: relative !important;
    padding-left: 28px !important;
    margin-bottom: 8px !important;
  }
  
  ul.subscribe-benefits li::before {
    content: "✨" !important;
    position: absolute !important;
    left: 0 !important;
  }
</style>

Customization Variables Quick Reference

Use this table to quickly find and replace values for your brand:

Widget HTML Structure Reference

Understanding the widget's HTML structure helps when writing CSS selectors:

<div class="autoship-widget-options">
  <!-- Buy it once option -->
  <div class="autoship-widget-option-wrapper noborder">
    <label class="autoship-widget-dropdown-label">
      <input type="radio" name="one_time">
      <span class="autoship-widget-dropdown-label__text">
        Buy it once $28
      </span>
    </label>
  </div>
  
  <!-- Subscribe option -->
  <div class="autoship-widget-option-wrapper vertical option-active">
    <label class="autoship-widget-dropdown-label">
      <input type="radio" name="one_time" checked>
      <span class="autoship-widget-dropdown-label__text">
        Subscribe and save 25% 
        <div class="price-details">
          $21 <span class="price-old">$28</span>
        </div>
      </span>
    </label>
    
    <div class="autoship-widget-subscription-details">
      <ul class="subscribe-benefits">
        <li>Free Shipping on Every Order</li>
        <li>Skip or Cancel At Any Time</li>
      </ul>
    </div>
    
    <div class="autoship-deliver-every-dropdown">
      <select class="autoship-widget-dropdown" name="choose_selling_plan">
        <option value="...">Every 30 Days</option>
      </select>
    </div>
  </div>
</div>

Key classes:

Troubleshooting

CSS not applying?

• Ensure CSS is in a Custom Liquid block, not Theme Settings > Custom CSS
• Check that the Custom Liquid block is on the correct product template
• Clear browser cache and hard refresh (Ctrl+Shift+R / Cmd+Shift+R)
• Verify rules appear in browser DevTools (right-click > Inspect)

Rules showing but crossed out in DevTools?

• Add !important   to your declarations
• Use more specific selectors (combine classes, use parent selectors)

Price elements not showing?

• Check widget settings to ensure price display is enabled
• Configure Widget Placeholders in your widget's data attributes

Customizations only showing on some products?

• Ensure the Custom Liquid block is added to all product templates, not just the default

Related Documentation

• [Shopify] Product Options Display Widget — Main widget documentation
• Widget Properties — Data attributes for widget configuration
• Widget Placeholders — Price and discount placeholders
• Widget Events — JavaScript events for advanced integrations