Change Price on Collection Page Based on Variant Selected

This code is to add a variant dropdown to collection page and update price based on what option is selected.

Note: This is example was done for https://getmainelobster.com/ Providence theme so the code will need to be changed to fit the OLM structure.

Step #1

Find where the price is being outputted on snippet product.liquid.

    {% include 'pricing' %}

Replace it with:

    {% if product.variants.size > 1 %}
      <div class="product-price">
        {% for variant in product.variants %}
          <div class="variant-price price sell-price font-size-14 fw-600 lht inline-block converted" id="{{ variant.id }}">{{ variant.price | money_with_currency }} {% include 'price' amount: compare_at_price, class: compare_at_class %}</div>
        {% endfor %}
      </div>
    {% else %}
      {% include 'pricing' %}
    {% endif %}

Then you will need to change the

You will need to find where the actions div starts.

<div class="actions">

Replace the entire actions div with:

      <div class="actions">
        <form method="post" action="/cart/add">

            <input type="hidden" name="id" value="{{ variant.id }}" />
            {% if product.options.size > 1 %}
              <div class="col-xs-12 col-lg-6">
                <div class="spacer"></div>
              </div>
            {% else %}
                {% if product.variants.size > 1 %}
                  {% for option in product.options_with_values %}

                    <div class="item">
                      <label for="option-select-{{ option.name | handleize }}">{{ option.name }}</label>
                      <select id="selector"  name="id" class="selector form-control input-lg">
                        {% for variants in product.variants %}
                        <option value="{{ variants.id }}"{% if variants == product.selected_or_first_available_variant %} selected="selected"{% endif %}>{{ variants.title }}</option>
                        {% endfor %}
                      </select>
                    </div>
                  {% endfor %}

                {% else %}
                  <div class="col-xs-12 col-lg-6">
                    <div class="spacer"></div>
                  </div>
                {% endif %}
            {% endif %}
          {% comment %}
            Add to cart / sold out button
          {% endcomment %}

          {% if product.options.size > 1 %}
            <a class="add-to-cart button small" href="{{ product.url }}" title="{{ product.title }}">View Options</a>
          {% else %}
            {% if show_add_to_cart_button %}
              {% if product.available %}
                <button class="add-to-cart button small" type="submit" data-cart-action="{{ settings.cart_type }}">{{ 'products.add_to_cart' | t }}</button>
              {% else %}
                <button class="add-to-cart button small disabled" type="submit" disabled>{{ 'products.sold_out' | t }}</button>
              {% endif %}
            {% endif %}
          {% endif %}
        </form>
      </div>

Add these to custom under the collection section.

/*================================
==================================
COLLECTIONS
==================================
================================*/

	.collection-product .variant-price {
		display:none;
		&:first-child {
			display:block;
		}
	}