Prices in the drop-down menu next to sizes

Store Design
, ,

Topic summary

A user wants to display variant prices next to size options in a dropdown menu on product pages using the Dawn 15.3.0 theme.

Proposed Solutions:

Multiple community members offered code modifications:

  • Snippet modification approach: Edit product-variant-options.liquid to add price data to dropdown options
  • Comprehensive approach: Modify main-product.liquid to append prices to each variant option using Liquid logic that matches variants and displays their prices
  • Dynamic updates: Additional JavaScript modifications in global.js may be needed to maintain price display when variants change
  • Styling: CSS can be added to base.css to improve dropdown text readability

Current Status:

The user requested right-aligned prices without dashes (as shown in their attachment). While removing the dash is possible by adjusting the Liquid code, one responder confirmed that achieving the exact right-aligned layout shown in the reference image isn’t possible with the standard dropdown approach.

The discussion remains open regarding the formatting limitation.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

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.

2

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

3

Hello @Bajgor ,

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

search for

replace it with

Regards

Guleria

1 Like
4

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.

:wrench: 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 %}

{{ value }} {% endfor %}

Replace the 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 %}

{{ value }} - {{ variant_price }} {% else %} {{ value }} - Sold Out {% endif %} {% else %} {{ value }} {% 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!

5

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

6

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.