Unlock Custom 'Subscribe & Save' on Shopify: A Community-Driven Solution for Your Product Page

Hey fellow store owners! Ever found yourself scrolling through Shopify apps, looking for that one perfect feature, only to realize your ideal design isn't quite there? That's exactly what happened in a recent community discussion I was following, and it sparked some fantastic insights into custom solutions. Our friend veluxe1 kicked things off, asking a question many of us have pondered: "Is it possible to make custom button like the picture below?"

The goal was clear: a visually appealing selector on the product page, giving customers a clean choice between a "Subscribe & Save" option (with delivery frequency details) and a "One-time Purchase" option (showing standard price and potentially installment info).

The Community Weighs In: Yes, It's Possible!

The general consensus from experts like Steve_TopNewYork, JohnQQ, and ai-theme-code-editor was a resounding "Yes!" This kind of customization is absolutely achievable, even if your go-to subscription app doesn't offer that exact visual out-of-the-box. The key takeaway? While many apps provide the backend functionality for subscriptions, achieving a unique front-end design often requires a bit of custom code – specifically, Liquid, CSS, and JavaScript.

A crucial point that came up was about Shopify Plus. JohnQQ asked about the plan, hinting that checkout extensions might require Plus. However, for the product page widget itself, you don't necessarily need Shopify Plus. The main requirement is that your chosen subscription app must support Shopify selling plans, which is how Shopify natively handles recurring purchases.

The Iterative Journey to a Solution

veluxe1 was using the Horizon theme and the "Supr Bundle & Subscription App," which confirmed they had the necessary selling plan infrastructure. Steve_TopNewYork jumped in with an initial code snippet to get things going, suggesting it be placed in a Custom Liquid block on the product page, above the 'Add to cart' button.

As often happens in development, the first pass sometimes needs refinement. veluxe1 reported some errors, leading to further discussion. This is where the community really shines! Ploqo then stepped in with a more polished and comprehensive solution that directly addressed veluxe1's subsequent requests: a cleaner, more compact button selector and a clear spot for installment HTML.

The Winning Solution: Custom Liquid for a Seamless Experience

Ploqo's code provided a fantastic way to implement this, making the selector appear as two "slim pills" instead of bulky blocks. It dynamically switches the displayed information:

• When "Subscribe and Save" is selected, it shows the discounted price and the delivery frequency dropdown, along with a "save X%" indicator.
• When "One time" is selected, it hides the frequency options, displays the standard price, and reveals a dedicated spot for any installment HTML you want to include.

Here's a look at what the solution accomplished:

Step-by-Step: Implementing the Custom Selector

If you're looking to implement this on your own Shopify store, here's how you can do it:

1. Navigate to Your Theme Editor: From your Shopify admin, go to Online Store > Themes > Customize. Open a product page.

2. Add a Custom Liquid Block: In the product area (ideally above your 'Add to cart' button), add a new Custom Liquid block. This is where our code will live.

3. Paste the Code: Replace any existing code in that Custom Liquid block with the following:

   {%- 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 -%}
   
     
   
     
   
       
   
         
           Subscribe and Save 
         
         
           One time
         
       
       
   
         
   
         
   
   
         
   
           Delivery frequency
           
             {%- for plan in cw_group.selling_plans -%}
               {{ plan.name }}
             {%- endfor -%}
           
         
   
         {%- comment -%} Shows only when "One time" is selected. Paste your installment HTML between the two marks. {%- endcomment -%}
         
       
     
   
     
   {%- endif -%}

4. Add Your Installment HTML (Optional): If you have specific HTML you want to display only for the "One time" purchase option (like payment plan details), find these lines in the code near the bottom of the block: and . Paste your HTML between these two comment lines. It will automatically show/hide as the customer toggles between options.

5. Customize the Styling: The provided CSS is quite flexible. You can adjust:

   • Accent Color: Change the --cw-accent:#2f5d54; value on the first CSS line to match your brand.
   • Button Text Size: Modify font-size:.9rem on .cw-po__btn.
   • Price Size: Adjust font-size:1.15rem on .cw-po__price.

6. Save Your Changes!

Important Notes for Your Implementation

• This code is designed to automatically read your subscription app's plans. Whatever delivery options you've configured (weekly, monthly, etc.) will populate the frequency dropdown.
• The "Subscribe" option will show the discounted price and the frequency picker, while "One time" will display the normal price and hide the picker.
• If your theme (like Horizon, in veluxe1's case) already displays a price above this widget, you might see two prices. You can choose to hide the theme's default price block if you prefer only the custom widget's price to show.

It's truly inspiring to see how the Shopify community collaborates to solve these kinds of challenges. While apps offer incredible functionality, sometimes a little custom Liquid, CSS, and JavaScript, combined with the power of Shopify selling plans, is all you need to create that perfectly tailored user experience. Don't be afraid to experiment and tap into the wealth of knowledge available in the community – you might just find the exact solution you're looking for!