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.