Conditionally Render Snippets based on Button Clicks

Conditionally Render Snippets based on Button Clicks

Shopify Partner
3 0 0

Hello there, 

Can someone help me identify some potential solutions for the following use case:


I want to render some liquid snippets conditionally, based on the button clicks. I have two snippet files, let's say: fileA.liquid and fileB.liquid. And I have two buttons and each button serve as a purpose of deciding what will be customer's choice for purchase options. Here's a simplified version of code for my buttons:


<button id="one-time-purchase-btn"> One Time Purchase</button>
<button id="subscribe-btn">Subscribe & Save (Up To 25%)</button>


Based on what user clicks, I want to conditionally render the two snippet files (mentioned above). For example, if user clicks the first button (One Time Purchase), I would like to render fileA.liquid and if customer clicks the second button (Subscribe & Save), I want to render fileB.liquid.


I cannot assign JS variables to liquid since that's not possible. So what would be the best way to achieve this functionality? 


Thanks In Advance 🙂



Replies 0 (0)