How to display price of variant in the variant picker? (Theme: Dawn)

[RyanWTS]

Need help displaying the price of variants within the variant picker as shown in the example below. I am using the Dawn theme.

Thank you!

[EBOOST]

Hi @RyanWTS

You can refer code below. I created for Dawn theme(sections/main-product.liquid)

.......................................................................................................................................................................................................................................................
            {%- when 'variant_picker' -%}
              {%- unless product.has_only_default_variant -%}
                {%- if block.settings.picker_type == 'button' -%}
                  
                {%- else -%}
                  
                {%- endif -%}
              {%- endunless -%}

.......................................................................................................................................................................................................................................................

[TROAD]

Cool! How do I apply this to dropdown options instead of radio buttons?

Also are these 2 the key elements?
value=“{{ value | escape }}”

---

{%- for value in option.values -%}
                              

[EBOOST]

Hi,

Maybe I suggest code below:

1. Go to snippets/product-variant-options.liquid

2. Replace code below

{% comment %}
  Renders product variant options

  Accepts:
  - product: {Object} product object.
  - option: {Object} current product_option object.
  - block: {Object} block object.
  - picker_type: {String} type of picker to dispay

  Usage:
  {% render 'product-variant-options',
    product: product,
    option: option,
    block: block
    picker_type: picker_type
  %}
{% endcomment %}
{%- liquid
  assign variants_available_arr = product.variants | map: 'available'
  assign variants_option1_arr = product.variants | map: 'option1'
  assign variants_option2_arr = product.variants | map: 'option2'
  assign variants_option3_arr = product.variants | map: 'option3'

  assign product_form_id = 'product-form-' | append: section.id
-%}

{%- for value in option.values -%}
  {%- liquid
    assign option_disabled = true

    for option1_name in variants_option1_arr
      case option.position
        when 1
          if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
            assign option_disabled = false
          endif
        when 2
          if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
            assign option_disabled = false
          endif
        when 3
          if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
            assign option_disabled = false
          endif
      endcase
    endfor

    if value.swatch.image
      assign image_url = value.swatch.image | image_url: width: 50
      assign swatch_value = 'url(' | append: image_url | append: ')'
    elsif value.swatch.color
      assign swatch_value = 'rgb(' | append: value.swatch.color.rgb | append: ')'
    else
      assign swatch_value = nil
    endif
  -%}

  {%- capture input_id -%}
    {{ section.id }}-{{ option.position }}-{{ forloop.index0 -}}
  {%- endcapture -%}

  {%- capture label_unavailable %}
    
      {{- 'products.product.variant_sold_out_or_unavailable' | t -}}
    
  {%- endcapture %}

  {%- if picker_type == 'swatch' -%}
    {% assign checked = false %}
    {% if option.selected_value == value %}
      {% assign checked = true %}
    {% endif %}
    {%
      render 'swatch-input',
      id: input_id,
      name: option.name,
      value: value | escape,
      product_form_id: product_form_id,
      checked: checked,
      disabled: option_disabled,
      shape: block.settings.swatch_shape,
      help_text: label_unavailable
    %}
  {%- elsif picker_type == 'button' -%}
    
    
  {%- elsif picker_type == 'dropdown' or picker_type == 'swatch_dropdown' -%}
    
  {%- endif -%}
{%- endfor -%}

3. Go to Customize theme → select product → update variant picker setting from Pills to Dropdown

[MarcelV]

can you please be more specific where do we have to input the codes! do we have the replace the old ones or just copy paste in sections/main-product.liquid ? if yes, which exactly

thanks in advance for your answer

[deanmaxingroup]

I am looking for support to add price variants to the products displayed in the collection on my homepage it’s possible.?

[EBOOST]

Hi @deanmaxingroup ,

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code

2. create file snippets/price_variants.liquid file

3. Add code below to snippets/price_variants.liquid file

{%  assign variants =  product.variants %}

{%  for variant in variants  %}
  - {{ variant.title }} - 
    
       {% if settings.currency_code_enabled %}
          {{ variant.price | money_with_currency }}
        {% else %}
          {{ variant.price | money }}
        {% endif %}
    
  
{%  endfor %}

3. Go to snippets/card-product.liquid

4. remove {% render ‘price’, product: card_product, price_class: ‘’, show_compare_at_price: true %}

5. add {% render ‘price_variants’, product: card_product %}