Conditionally Render Snippets based on Button Clicks

Technical Q&A
,

Topic summary

Main issue: Conditionally displaying Shopify Liquid snippets based on which of two buttons a customer clicks.

Setup: Two snippets (fileA.liquid, fileB.liquid) and two buttons:

  • “One Time Purchase” → should show fileA.liquid
  • “Subscribe & Save (Up To 25%)” → should show fileB.liquid

Desired interaction: Client-side click determines which purchase option content is shown.

Constraint: Author notes Liquid (Shopify’s server‑side templating) cannot be directly controlled by JavaScript variables after the page is rendered.

Artifacts central to understanding: A small HTML code snippet shows the two buttons; no images or additional files.

Status: Seeking best approach/solutions; no responses or resolution yet. Key open question: How to implement conditional rendering or display logic for snippets given the server-side nature of Liquid and the client-side button clicks.

Summarized with AI on January 4. AI used: gpt-5.
1

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:

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

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 :slightly_smiling_face: