Custom Shopify Subscribe & Save Selector | One-Time Purchase Toggle

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.

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:

Community Insights & The "Shopify Plus" Question

The discussion quickly picked up steam. JohnQQ initially raised a valid point, suggesting that this kind of custom control might require Shopify Plus due to checkout extensions. And honestly, for some deep customizations, that's often true. However, this is where the beauty of the Shopify community shines! Another expert, Ploqo, jumped in with a game-changing insight: 'You do not need Shopify Plus.' This was fantastic news for many store owners, proving that clever custom code can often bypass higher-tier plan requirements for specific UI elements.

The key, as ai-theme-code-editor also highlighted, is that your subscription option needs to connect to a subscription app (like the 'Supr Bundle & Subscription App' veluxe1 was using) that supports Shopify selling plans. The visual design itself can then be handled with theme code, even if your app doesn't offer that exact layout out of the box.

The Solution Unveiled: Ploqo's Custom Liquid Magic

Ploqo, a true wizard with Liquid and JavaScript, provided a comprehensive solution that directly addressed veluxe1's request. The core idea is to use a 'Custom Liquid' block within your theme editor. This block then houses all the necessary HTML, CSS, and JavaScript to create a dynamic, interactive selector that seamlessly integrates with your existing subscription app's selling plans.

Here’s how Ploqo’s solution elegantly tackles the problem:

Smart Integration: It automatically reads the selling plans from your existing subscription app, populating the delivery frequency options dynamically.
Sleek Design: The selector appears as two 'slim pills' – a much cleaner and more compact look than many default app UIs.
Dynamic Display:
- When 'Subscribe and Save' is selected, it shows the discounted subscription price and a dropdown for delivery frequency. You even get a 'save X%' indicator!
- Switch to 'One time,' and it instantly displays the normal product price, hides the frequency picker, and crucially, offers a dedicated spot for any 'installment HTML' you might want to show for one-time purchases.

Ploqo even shared screenshots of the result, which looked exactly like what veluxe1 was aiming for:

Putting it into Practice: Step-by-Step Instructions

Ready to implement this on your store? Here’s a breakdown of how to get Ploqo’s solution working:

Step 1: Locate Your Custom Liquid Block

Go to your Shopify Admin, navigate to Online Store > Themes.
Click Customize on your current theme.
Open a product page (you might need to select a product from the dropdown at the top).
In the theme editor sidebar, add a new 'Custom Liquid' block to your product page template. Ploqo recommends placing it in the product area, ideally above your 'Add to cart' button.

Step 2: Paste the Custom Code

Inside the 'Custom Liquid' block, replace any existing code with the following. This is the complete solution provided by Ploqo, including the styling and logic:

{%- 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 -%}

Step 3: Add Your Installment HTML (Optional)

If you have specific HTML content you want to display only when 'One time' is selected (perhaps for payment plans or other one-off details), find these lines in the code you just pasted:
Paste your HTML content directly between these two comment lines. It will automatically show/hide based on the selector.

Step 4: Customize the Look (CSS)

Ploqo made it easy to adjust the styling right within the code. Look for these lines in the

Unlock Custom Shopify Subscriptions: A DIY Guide to 'Subscribe & Save' Selectors