We have a client who sells items that have 10 different sizes. They have products on Etsy, and are moving them to Shopify. One thing about the product options on Etsy is that the price for the option (variant) is displayed in the dropdown next to the option. We feel this is convenient for the user,
On the Shopify product page (Dawn theme) the user has to select a dropdown item before seeing the price change on the template.
Is it possible to modify Shopify’s Dawn theme product variant dropdown to display the associated price for that variant, as it appears on the Etsy listing?
I think this would have to be done in the “sections > main-product.liquid” template around lines 389 for the dropdown (and again around line 418 for the loop in the noscript tag).
I can get the noscript working by adding “variant.price” like so:
{%- for variant in product.variants -%}
{%- endfor -%}
I can see the result of that if I view source, and it’s as expected.
The main option dropdown is trickier. There is a loop in a loop. I can see where the price would go in the dropdown around line 390 (if I hardcode something there is shows as expected), but it’s not clear how to get the variant attribute for price to display here.
If there are multiple options, then the multiple variants that get created are split into their respective dropdowns on the product page. The combination of the dropdown values that are selected dynamically calculates the price that is displayed on the product page.
The product variants that are output between the “noscript” tags are different (and only seen if JavaScript is disabled), in that they display as a complete list of all the variant combinations in one select element, so it’s easier to loop through and display the variant values there.
