Prices in the drop-down menu next to sizes

[Bajgor]

Hi, I have a question. I want my dropdown menu, when we are on a product and select a size, to show the price in the dropdown menu next to the size. I am attaching an example of what I have in mind. I am using the dawn 15.3.0 template.

[The_ScriptFlow]

Hey @Bajgor,

Welcome to the Shopify community.

In order to show the price near the Product variant required to do the custom code in your theme file.

Would you like to share the store url so that I can take a look and provide you with the solution code.

Thanks

[Guleria · Accepted solution]

Hello @Bajgor ,

Edit go to snippets -> product-variant-options.liquid 

search for 

    <option
      id="{{ input_id }}"
      value="{{ value | escape }}"
      {% if value.selected %}
        selected="selected"
      {% endif %}
      {% if swatch_value and picker_type == 'swatch_dropdown' %}
        data-option-swatch-value="{{ swatch_value }}"
        {% if swatch_focal_point %}
          data-option-swatch-focal-point="{{ swatch_focal_point }}"
        {% endif %}
      {% endif %}
      {{ input_dataset }}
    >
      {% if option_disabled -%}
        {{- 'products.product.value_unavailable' | t: option_value: value -}}
      {%- else -%}
        {{- value -}}
      {%- endif %}
    </option>

replace it with

<option
  id="{{ input_id }}"
  value="{{ value | escape }}"
  {% if value.selected %}
    selected="selected"
  {% endif %}
  {% if swatch_value and picker_type == 'swatch_dropdown' %}
    data-option-swatch-value="{{ swatch_value }}"
    {% if swatch_focal_point %}
      data-option-swatch-focal-point="{{ swatch_focal_point }}"
    {% endif %}
  {% endif %}
  {{ input_dataset }}
>
  {% if option_disabled %}
    {{ 'products.product.value_unavailable' | t: option_value: value }}
  {% else %}
    {% assign variant_price = '' %}
    {% for variant in product.variants %}
      {% if variant.title contains value %}
        {% assign variant_price = variant.price | money %}
        {% break %}
      {% endif %}
    {% endfor %}
    {{ value }} {% if variant_price != '' %}- {{ variant_price }}{% endif %}
  {% endif %}
</option>

Regards

Guleria

[Bajgor]

And what will be the css code and where to give it so that these prices will be on the right side without the dash as in the attachment

[Guleria]

Possible to remove the - dash.
replace  this line 
{{ value }} {% if variant_price != '' %}- {{ variant_price }}{% endif %}

with this one

{{ value }} {% if variant_price != '' %}  {{ variant_price }}{% endif %}

But with this setup it's not possible to align them like you shared in the attachment. 

[Vi-WizzCommerce]

Hey @Bajgor !

To show the price next to each size option in the variant dropdown on product pages, you’ll need to modify the product form code and JavaScript that renders the variant picker.

🔧 Step-by-Step Instructions

1. Edit the Variant Picker

In your Shopify admin:

• Go to Online Store → Themes → next to Dawn theme, click “…” → Edit Code

• Open: sections/main-product.liquid

Search for the variant dropdown — it will look something like:

<select
id="Option-{{ forloop.index0 }}"
class="product__input product__input--dropdown"
name="options[{{ option.name }}]"
>
{% for value in option.values %}
<option value="{{ value | escape }}">{{ value }}</option>
{% endfor %}
</select>

Replace the <option> line with this:

{% for value in option.values %}
{% assign matched_variant = product.variants | where: 'option' | where: option.name, value | first %}
{% if matched_variant %}
{% assign variant_price = matched_variant.price | money %}
{% if matched_variant.available %}
<option value="{{ value | escape }}">{{ value }} - {{ variant_price }}</option>
{% else %}
<option value="{{ value | escape }}" disabled>{{ value }} - Sold Out</option>
{% endif %}
{% else %}
<option value="{{ value | escape }}">{{ value }}</option>
{% endif %}
{% endfor %}

This attempts to get the price for each variant and append it to the label.

2. Ensure Dynamic Updates Work

The above will only show correct info on page load, but if your store has dynamic variant switching, you should also update this logic in:

/assets/global.js (or global.js.liquid)

Look for or add the logic inside the function that renders variant options (often updateOptions, updateMasterId, or similar) and enhance the option text.

If you share your current JS file or structure of how the variant dropdown is rendered, I can write the exact JavaScript needed for your case.

3. (Optional) Style the Options

Some themes cut off long dropdown text. You can add CSS like:

.product__input--dropdown option {
white-space: normal;
padding: 6px;
}

Add this in base.css under Assets to improve readability.

If this reply was useful to you, we would really appreciate it if you gave us a LIKE and mark the issue as SOLVED!