Shopify option_selection.js - how to modify?

Question

I am having a bit of trouble. I am reworking my store and I am trying to alter how the variant dropdowns show on the front end. From what I've read, option_selection.js is a global asset hosted & loaded from Shopifys servers and it changes how my product options appear within my theme.

At the moment it provides two dropdowns with the two oviduct options I have set up. What I would like is to display the products price next to the title of the option in the dropdown.

At the moment it looks like this...

I would like it to look like this...

Or better still have the +/- price modifier like this...

Unfortunately I do not know how to deal within this. The template code seems to be set up to show the price, however I am guessing that it's overridden by the option_selection.js

Heres the template code:

<select name="id" id="productSelect" class="product-variants trees">
      {% for variant in product.variants %}
        {% if variant.available %}

          <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

        {% else %}
          <option disabled="disabled">
            {{ variant.title }} - Sold out
          </option>
        {% endif %}
      {% endfor %}
    </select>

I have asked in Shopifys forums but they seem dead.

Answer 1

1. Make your own option_selection.js and upload that file to the assets folder in your theme.

2. Find this line in your theme files(possible templates/product.liquid).

   {{ 'option_selection.js' | shopify_asset_url | script_tag }}
   

3. Comment that line and add this code below it.

   {{ 'new_option_selection.js' | asset_url | script_tag }}
   

Hope that helps.

Answer 2

I know it's not the best solution but one thing you COULD potentially do.

1. Download the option_selection.js and add it in as an asset yourself.

2. Version control it, making any additions you need then when Shopify updates it's version merge it in with your copy using the VCS so you get updates/fixes but still keep your additions.

This is what I had to do on a project recently and I haven't ran into any problems thus far.

Hope that helps a bit.

Answer 3

Depending on your circumstances, you can get a desired UX for a customer with a couple lines of CSS:

.selector-wrapper {
    display: none !important;
}

select#product-select {
    display: block !important;
}

Some things to consider:

In cases where there is more than 1 variant, not displaying the price next to each option makes sense. If an item had 3 materials and 3 sizes, a user would likely get confused seeing prices for each material, then seeing prices for each size, especially since a combination of X material and Y size could ultimately be something different. There should be one price identifier during that process.

In cases where there is only 1 variant, it makes a lot more sense to show the price difference between them.

The default option_selection.js outputs the selectors and hides the "final" <select name="id"> variant selector. Below is an example of an output if 2 variants were provided:

<div class="selector-wrapper">
    <label for="product-select-option-0">First Variant</label>
    <select class="single-option-selector" data-option="option1" id="product-select-option-0">
         <option value="firstvariant1">First Variant Option 1</option>
        <option value="firstvariant2">First Variant Option 2</option>
        <option value="firstvariant3">First Variant Option 3</option>
    </select>
</div>
<div class="selector-wrapper">
    <label for="product-select-option-1">Second Variant</label>
    <select class="single-option-selector" data-option="option2" id="product-select-option-1">
        <option value="secondvariant1">Second Variant Option 1</option>
        <option value="secondvariant2">Second Variant Option 2</option>
    </select>
</div>
<select id="product-select" name="id" style="display: none;">                           
    <option selected="" value="xxxxxxxxxxxxx">
        First Variant 1 / Second Variant 1 - $1.99
    </option>
    <option value="xxxxxxxxxxxxx">
        First Variant 1 / Second Variant 2 - $1.99
    </option>
    <option value="xxxxxxxxxxxxx">
        First Variant 2 / Second Variant 1 - $2.99
    </option>
    <option value="xxxxxxxxxxxxx">
        First Variant 2 / Second Variant 2 - $3.99
    </option>
    <option value="xxxxxxxxxxxxx">
        First Variant 3 / Second Variant 1 - $4.99
    </option>
    <option value="xxxxxxxxxxxxx">
        First Variant 3 / Second Variant 2 - $5.99
    </option>
</select>

So you can override this with the CSS provided above and accomplish the experience you wish to provide this way. In the cases of just 1 variant, I think a lot of users would prefer this process, however it is not the OP's desired syntax.