Custom Shopify Subscribe & Save UI | Liquid & CSS Development Guide

Hey fellow store owners! Ever found yourself scrolling through Shopify apps, wishing you could just tweak that one little thing on your product page to perfectly match your brand? I know I have! Recently, a fantastic discussion popped up in the community, and it's a perfect example of how a bit of custom code can solve those 'app doesn't quite do it' dilemmas. We're talking about a sleek 'Subscribe & Save' and 'One-Time Purchase' selector, designed exactly how you want it.

Shopify product page with One-Time Purchase selected, showing installment HTML

The Challenge: A Custom Look for Subscriptions

Our friend veluxe1 kicked off the thread with a common pain point. They wanted a specific, clean design for their product page – a toggle, essentially, between 'Subscribe & Save' (which would then show delivery frequency options) and a 'One-Time Purchase' (displaying standard product details). The catch? Most subscription apps, while powerful, often come with their own pre-defined UI, making it tough to get that pixel-perfect brand alignment. veluxe1 even shared an image of their desired look:

Many merchants face similar hurdles. While subscription apps are invaluable for managing recurring orders, their front-end components often offer limited customization options. This can lead to a disjointed user experience, where the subscription widget doesn't quite blend with your meticulously designed theme. The goal is to provide customers with a clear, intuitive choice between a one-time purchase and a subscription, with all relevant information displayed dynamically.

Community Insights & The "Shopify Way": Custom Liquid & Selling Plans

The beauty of Shopify lies in its flexibility, especially when you harness the power of Liquid, CSS, and JavaScript. The solution provided by community expert Ploqo demonstrates how to integrate a custom UI directly into your theme, leveraging Shopify's native selling plans functionality. This means you don't necessarily need Shopify Plus for this specific UI enhancement; it works with any store utilizing selling plans.

Deconstructing the Custom Subscription Selector Code

Ploqo's solution is a masterful blend of Liquid for data retrieval, CSS for styling, and JavaScript for dynamic behavior. Let's break down the key components:

1. The HTML/Liquid Structure

The core of the UI is a custom Liquid block that checks if a product has selling plan groups. It then renders two 'pill' buttons for "Subscribe and Save" and "One time purchase." Crucially, it includes placeholders for dynamic pricing, a note (e.g., delivery frequency), and a dedicated section for "installment HTML" that only appears when "One time" is selected.

{%- assign cw_product = closest.product | default: product -%}
This line ensures the code works correctly whether it's in a section or a block, referencing the current product.

{%- if cw_product.selling_plan_groups.size > 0 -%}
This conditional check ensures the subscription selector only appears for products that actually have selling plans configured.

2. The CSS Styling

Embedded directly within the Liquid block, the CSS provides a clean, modern look for the selector. It transforms the default, potentially bulky app UI into two slim, interactive pills. Key customizable elements include:

Accent Color: --cw-accent:#2f5d54; – Easily change this to match your brand.
Button Text Size: font-size:.9rem on .cw-po__btn
Price Size: font-size:1.15rem on .cw-po__price

This level of control ensures your subscription options look like an integral part of your product page, not an afterthought.

3. The JavaScript Logic

The JavaScript is the brain behind the interactivity. It handles:

Mode Switching: Toggles between "Subscribe and Save" and "One time" when buttons are clicked.
Dynamic Content: Updates the displayed price, delivery frequency, and "save %" based on the selected mode and variant.
Conditional Visibility: Hides the delivery frequency selector and shows the custom installment HTML only when "One time" is selected.
Form Integration: Adds or removes the selling_plan input to the add-to-cart form, ensuring the correct product type (one-time or subscription) is added to the cart.

Implementing the Solution: Step-by-Step

Here's how you can implement this custom subscription selector on your Shopify store:

Locate Your Product Page Template: In your Shopify admin, navigate to Online Store > Themes > Customize. Find your product page template (e.g., Default product).
Add a Custom Liquid Block: In the theme editor, find the section where you want the selector to appear (typically near the add-to-cart button). Add a new "Custom Liquid" block.
Paste the Code: Replace the default content of the Custom Liquid block with the code provided below.
Add Your Installment HTML: Find the lines and within the code. Paste your specific installment HTML (e.g., payment plan details, financing options) between these two markers. This content will only display when the "One time" purchase option is active.
Customize Styling: Adjust the CSS variables (--cw-accent), font sizes, and other styles to perfectly match your brand's aesthetic.
Test Thoroughly: Always test your changes on different products, variants, and devices to ensure everything functions as expected before publishing. Make sure to back up your theme before making significant code changes.

The Code:

{%- assign cw_product = closest.product | default: product -%}
{%- if cw_product.selling_plan_groups.size > 0 -%}
  {%- assign cw_group = cw_product.selling_plan_groups | where: 'name', 'Subscribe & Save' | first -%}
  {%- unless cw_group -%}{%- assign cw_group = cw_product.selling_plan_groups.first -%}{%- endunless -%}
  {%- assign cw_uid = block.id | default: section.id -%}

  

  
    
      
      
    
    
      
      

      
        Delivery frequency
        
      

      {%- comment -%} Shows only when "One time" is selected. Paste your installment HTML between the two marks. {%- endcomment -%}
      
        

        
      
    
  

  
{%- endif -%}

Why This Matters for Your Store

Implementing a custom subscription UI goes beyond aesthetics; it significantly impacts your store's performance:

Enhanced User Experience (UX): A clean, intuitive selector reduces friction and makes it easier for customers to choose their preferred purchase option.
Brand Consistency: By perfectly matching your theme's design, you reinforce your brand identity and build trust.
Increased Conversions: A seamless and clear presentation of subscription benefits (like "save X%") can encourage more customers to opt for recurring purchases, boosting your customer lifetime value (LTV).
Flexibility for Future Growth: Having control over your UI means you can adapt and evolve your product pages without being constrained by app limitations.

Beyond the Basics: Shopping Cart Mover's Expertise

At Shopping Cart Mover, we understand that every e-commerce business is unique. While this custom code offers a powerful solution for subscription UI, complex migrations or extensive theme customizations can be daunting. Whether you're moving your store to Shopify from another platform or need advanced development to perfect your existing Shopify setup, our team of experts specializes in seamless transitions and bespoke solutions.

Leveraging the robust capabilities of Shopify, merchants can achieve remarkable customization and functionality. If you're looking to start your own Shopify store or optimize your current one, remember that a solid foundation and expert development can make all the difference.

Conclusion

The Shopify platform, combined with a little custom Liquid, CSS, and JavaScript, offers unparalleled flexibility for merchants who want to stand out. By taking control of your subscription UI, you can create a truly branded and optimized shopping experience that drives engagement and sales. Don't let generic app interfaces limit your vision – embrace the power of customization!

Unlocking Custom Shopify Subscriptions: A Developer's Guide to 'Subscribe & Save' UI with Liquid