Product Variants With Multiple Choices

Karen11
New Member
3 0 2

I need two product pages to sell perfume samples and soap samples. Six choices (drop downs) of the same scents drawing from one inventory for each variant scent for one single price.

Like this:

http://www.maysfudge.com/fudge-set-3-slices/

 

Or this:

http://www.motherbutterspopcorn.com/pick-your-flavors-3-way-for-3-1-2-gallons/

 

I’ve seen this option on Bigcommerce, Woocommerce, Prestashop, and others, but not here on Shopify. I have searched the discussion forums to no avail.

What coding can be added to the product page to accomplish this task? Can someone help me with how to set this up please?

 

Thanks,
Karen

Alice_S
Shopify Staff
Shopify Staff
62 0 15

Hey, Karen!

My name is Alice and I'm a guru here at Shopify, thanks for reaching out to us, I'd be happy to try to help you out with this query! ?

From what you've described and the examples you've given, I think that an App would be the best fit for you to get this up and running on your store!

Infinite Options allows you to easily add an unlimited number of product customizations to your products so you're not restricted by the normal 3 option limit, meaning that you could have any number of dropdown options for the product.  Infinite Option is a free App also, which is always a plus!

Custom Product Options this App allows infinite fields including file uploaders, drop downs, checkbox groups, text areas, and much more.  This App would be $8.99 per month, but would be another option for you to look at, with a 7 day free trial.

From my understanding of what you need, either of these Apps would be perfect for what you're trying to achieve, and if you have any other questions on this, please let me know and I'd be happy to help you out however I can, Karen! ?

Just to let you know, the Guru team are here to help you out 24-7 on Emails, Chats or Phones; and you can find us here.

0 Likes
Karen11
New Member
3 0 2

Hi Alice!

I appreciate the suggestions, thank you. However, what I am looking for is the code to achieve this without paying for the use of a third party app,  I don’t think Infinite Options can be linked to a single inventory, can it?

I’m looking for code that can be placed in index.liquid, product.liquid, and cart.liquid. I have been searching through GitHub, but I have not found anything yet. I was hoping someone here could either point me to the code or a programmer that can create it for me.

Alice_S
Shopify Staff
Shopify Staff
62 0 15

Hey, Karen!

Apologies about the confusion, I thought that these Apps would have been able to achieve this based on the examples given!

Hopefully someone will have more of an idea of how to achieve this with coding, or you could look to see if one of the Shopify Experts would be able to programme or design this for you the way you need it to operate!

Again apologies for the mix up, and if you need anything else let me know and I'll do all I can to help! ?

0 Likes
Jenauris
New Member
5 0 0

I am the owner of a bakery. I am using the brooklyn theme with a goal to offer multiple options before cart is chosen. Example. 

I would like to sell cupcakes by the dozen and half dozen. The variant list isn't giving me that option. I would also like to offer assortment options for multiple  cupcakes. Here is our site below. 

https://jenauris-vegan-bakery.myshopify.com/admin/themes/43911774298/editor

0 Likes
Jenauris
New Member
5 0 0

I am the owner of a bakery. I am using the brooklyn theme with a goal to offer multiple options before cart is chosen. Example. 

I would like to sell cupcakes by the dozen and half dozen. The variant list isn't giving me that option. I would also like to offer assortment options for multiple  cupcakes. Here is our site below. 

https://jenauris-vegan-bakery.myshopify.com/admin/themes/43911774298/editor
HELP!

0 Likes
lolahSoul
Tourist
3 0 0

Hey Karen,

Did you ever find someone to do the code for you? I am looking for the same thing.  The idea of having to pay ~$10/month for an app makes my head (and my wallet) hurt.  I'd prefer code.

0 Likes
xyh
Tourist
10 0 1
<form action="/cart/add" method="post">
  {% if product.variants.size > 1 %}
    {% if product.options[0] %}
      {% assign used = '' %}
      <label for="select-one">{{ product.options[0] }}</label>
      <select id="select-one" onchange="letsDoThis()">
        {% for variant in product.variants %}
          {% unless used contains variant.option1 %}
            <option value="{{ variant.option1 }}">{{ variant.option1 }}</option>
            {% capture used %}
              {{ used }}
              {{ variant.option1 }}
            {% endcapture %}
          {% endunless %}
        {% endfor %}
      </select>
    {% endif %}
    {% if product.options[1] %}
      {% assign used = '' %}
      <label for="select-one">{{ product.options[1] }}</label>
      <select id="select-two" onchange="letsDoThis()">
        {% for variant in product.variants %}
          {% unless used contains variant.option2 %}
            <option value="{{ variant.option2 }}">{{ variant.option2 }}</option>
            {% capture used %}
              {{ used }}
              {{ variant.option2 }}
            {% endcapture %}
          {% endunless %}
        {% endfor %}
      </select>
    {% endif %}
    {% if product.options[2] %}
      {% assign used = '' %}
      <label for="select-one">{{ product.options[2] }}</label>
      <select id="select-three" onchange="letsDoThis()">
        {% for variant in product.variants %}
          {% unless used contains variant.option3 %}
            <option value="{{ variant.option3 }}">{{ variant.option3 }}</option>
            {% capture used %}
              {{ used }}
              {{ variant.option3 }}
            {% endcapture %}
          {% endunless %}
        {% endfor %}
      </select>
    {% endif %}
  {% endif %}
  <input type="hidden" name="id" id="product-select" value="{{ product.variants.first.id }}"/>
</form>
<script>
  function letsDoThis() {
    {% if product.options[0] %}
      var opt1 = document.getElementById("select-one").value;{% endif %}{% if product.options[1] %}
      var opt2 = document.getElementById("select-two").value;{% endif %}{% if product.options[2] %}
      var opt3 = document.getElementById("select-three").value;{% endif %}var id = "";{% for v in product.variants %}
      if (
        opt1 == "{{ v.option1 }}"{% if product.options[1] %} && opt2 == "{{ v.option2 }}"{% endif %}{% if product.options[2] %} && opt3 == "{{ v.option3 }}"{% endif %}
      ) {
        var id = {{ v.id }};
        var price = "{{ v.price | money }}";
      }
    {% endfor %}
    if (id != "") {
      document.getElementById("product-select").value = id;
      document.getElementById("price").innerHTML = price;
    } else {
      document.getElementById("product-select").value = "";
      document.getElementById("price").innerHTML = "Unavailable";
    }
  }
</script>

 

Give a try paste this code to product page. If it doesn't work feel free to email me

No9Aromas
New Member
1 0 0

HI XYH,

I have copied the above code into product-template.liquid and it hasn't worked, please could you let me now where i should put it exactly.

Appreciate your help,

Thank you,

Lauren

 

0 Likes
SLB2
New Member
3 0 0

I am wanting something similar not sure if someone has coding for my situation 

So I sell hair accessories say I have 1 quantity left 

but I want the option of it as a hair clip, book and or bookmark 

the hair clip is $1 cheaper then the other 2 items .

I am trying to have one inventory for the one item but want that 1 item to be used towards the options instead of having to put 1 available for each variant . Is there a way to do this ?

1 quantity for 3 items total options 

0 Likes