If input field is X, then show Y (custom recommendation engine)

Store Design
, ,

Topic summary

Goal: Build a simple color recommendation feature for an iPhone case that suggests case colors based on the customer’s iPhone color.

Planned setup: A standalone “Color Recommendations” page with an input/select field for the iPhone color and conditional logic (Liquid) to display matching case colors.

Core logic: “If input is X, then show Y” using Liquid (Shopify’s templating language) to conditionally render recommendations.

Key questions: Whether JavaScript and event handling are needed to capture user input and update recommendations dynamically, and how to implement that.

Extension: Considerations for moving this feature onto the product page near the variant selector, including how it interacts with existing variant selection workflows.

Status: No solutions or code provided yet; guidance requested on implementation details. Discussion remains open.

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

Let’s say my product is an iPhone case.

I want to offer my customers an easy way to choose the color of their case, based on the color of their iPhone.

For starters, let’s say I’m doing this on a custom, stand-alone page called Color Recommendations.

Elements I see

  1. an form/input field in which the user selects or inputs the color of their iphone

  2. some liquid logic (if form_input is X, then show Y)

Questions

  • Do I need javascript and an event to capture the form input? How can I do that?
  • Are there additional considerations if I wanted to implement this on my product page (in/near my variant selector block) instead of on its own page?

Thank you!