CODEWITHSUNDEEP
shopify
Corey
Corey

Reputation: 2563

Shopify: More than 3 Product Options

Here is my scenario:

Most of my clients products are very simple, but they have one that is kind of complex. They sell a makeup compact that has 4 empty slots. Each slot can be filled with a different type of filler.

The user has these options to choose from to fill each slot in the compact:

–

–

–

–

–

So technically the user could fill it how they want. They could do this:

Or even:

Is there a way for me to do this? I felt like I had it figured out until there seems to be a hard limit of 3 on product options.

Any help with this would be amazing.

Thank you in advance!

Upvotes: 1

Views: 2510

Answers (2)

user3577416
user3577416

Reputation: 106

Corey it is not that complicated if I understand correctly what you want to achieve.

I would offer the user 4 dropdown seletions using the line item properties so it can show the selection in the cart and in your backend order. Make sure you go read about the Line Item Properties so you can understand exactly how it works. But here what I think the code should look like in your product.liquid page:

<label>Select slot 1</label>
<select id="slot1" name="properties[Slot1]">
<option value="Highlight / Filler Color: Linen" >Highlight / Filler Color: Linen</option>
<option value="Highlight / Filler Color: Sunlit" >Highlight / Filler Color: Sunlit</option>
<option value="Filler Type: Highlight / Filler Color: Wheat" >Filler Type: Highlight / Filler Color: Wheat</option>
<option value="Contour / Filler Color: Walnut" >Contour / Filler Color: Walnut</option>
... *add the rest of your options, total 10
</select>
<label>Select slot 2</label>
    <select id="slot2" name="properties[Slot2]">
    <option value="Highlight / Filler Color: Linen" >Highlight / Filler Color: Linen</option>
    <option value="Highlight / Filler Color: Sunlit" >Highlight / Filler Color: Sunlit</option>
    <option value="Filler Type: Highlight / Filler Color: Wheat" >Filler Type: Highlight / Filler Color: Wheat</option>
    <option value="Contour / Filler Color: Walnut" >Contour / Filler Color: Walnut</option>
    ... *add the rest of your options, total 10
    </select>
    ... *add the 2 other dropdown selections

Make sure you also add this code (it is explain in the line item properties) to your cart.liquid page:

 {% for p in item.properties %}
  {% unless p.last == blank %}
    {{ p.first }}:
    {% if p.last contains '/uploads/' %}
    <a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
    {% else %}
    {{ p.last }}
    {% endif %}
    <br />
  {% endunless %}
{% endfor %}

Upvotes: 1

Steph Sharp
Steph Sharp

Reputation: 11682

Take a look at Line Item Properties. There is no restriction on how many you can have. The tutorial uses a text field, but other form fields work fine too.

Upvotes: 0

Related Questions