Hello, I am looking to build a custom flavor picker into my Shopify theme without using third-party apps. I need a way for customers to select specific flavors for a box set (e.g., choosing 6 different flavors for one product) that will appear as line item properties in the cart. Since my inventory is only tracked at the box level and not by individual flavors, I am looking for Liquid or JavaScript suggestions to create this selection interface. Thank you!
Topic summary
Custom flavor picker for a Shopify box set without third‑party apps. Customers must choose 6 flavors for one product, with selections stored as line item properties (custom fields attached to the cart item). Inventory is tracked only at the box level, not per flavor.
Proposed approach: With 8 total flavors, use a grid of clickable flavor tiles. Manage selection via JavaScript to toggle choices, cap selections at 6, and display a live counter (e.g., “3/6 selected”). On add-to-cart, serialize the chosen flavors into line item properties. Use Liquid to render the flavor list and IDs, with JavaScript handling UI state and validation.
Status and next steps: The responder requested flavor count and suggested the JS + line item properties method. The OP confirmed there are 8 flavors and asked for a concrete implementation/example. No code has been provided yet; the thread remains open pending a sample JavaScript/Liquid snippet and integration steps.
@qinen0929 how many flavors do you have?
If the list isn’t too large something like a grid where customers can click on the flavors they want could be a good way to do this. Additionally you can add an indicator somewhere to show the customers how many flavors they have selected out of the 6 they should select.
In terms of code, most of this would be managed through Javascript, your idea about tracking this in line item properties can work so I think that’d be a good path to explore.
hi thanks for the prompt reply! We have 8 flavours in total at the moment. Do you mind to show me how to do that?
@qinen0929 you’d have to edit your product page and add the code in there. Depending on the theme you are using the filename might be different, but it should be something along the lines of main-product.liquid or product-information.liquid
The implementation will depend on the theme you’re using.
Generally, there is no need for javascript and even theme code is not necessary.
You should be able to reach your goal by using Custom Liquid block.
You can use the Line Item Property – Shopify UI Elements Generator.
The only problem is that these inputs must be linked to the main product form.
Old themes had product form contain entire product section while modern themes (like dawn) usually limit product form to cart buttons only.
To link your inputs to this form it’s necessary to use form property on the inputs.
For example, for Dawn you need to use “Custom liquid” block inside Product info section and use the form parameter like this (the code was generated via the link above and amended to use proper Dawn classes):
<label class="form__label">Flavor 1</label>
<div class="select">
<select
class="select__select"
id="flavor-1" name="properties[Flavor 1]"
form="{{ 'product-form-' | append: section.id }}"
>
<option value="sour">Sour</option>
<option value="sweet">Sweet</option>
</select>
</div>
Hi @qinen0929
You can build a flavor selector by using line item properties. Insert checkboxes or dropdowns in your product template for each flavor, then capture selections as name="properties[Flavor 1]", properties[Flavor 2], etc. Limit selections to six using JavaScript. These two properties will show in the cart but will not impact inventory.