商品サムネイルについて、バリエーション毎に違う値段が表示されません

商品登録の際にバリエーションで、1つの商品に対して3つメニューを用意しているのですが

一つ一つ、値段が違います。

値段が3通りあるのですが商品サムネイルに表示されるのが3つの商品の最安値価格のみ表示されてしまいます。

¥2,000から¥5,000のメニューがあるのですが

¥2,000~¥5,000という風に商品サムネイルに表示されるのはどのようにすればいいでしょうか?

何卒、回答の方お願い致します。

使われているテーマにより編集するファイルが異なるかと思いますが、該当箇所のliquidファイル(Debutテーマの場合は/snippets/product-price-listing.liquid ファイル)のバリエーションがある商品の場合の価格表示部分を以下のようにすれば表示されるかと思います。

{{ product.price_min | money }}〜{{ product.price_max | money }}

参考)The product object

ただいずれかのバリエーションがセール価格の場合や売り切れの場合などに表示を変えたい場合は、上記だけでは足りないかと思いますので必要に応じて条件分岐させる必要があるかと思います。

2 Likes

ご回答ありがとうございます!

テーマが異なるためかどの部分か分からない状態です…

こちらのどの部分にコードを入れるかご教示頂ければ嬉しいです。

丸投げで本当に申し訳ございませんが何卒よろしくお願い致します。

{% comment %}
   class_root {String}
    Base class root

   show_range {Bool}
    Show price range

   price_range_format {String}
    'range' or 'from', defaults to 'range'

   product {Product}
    Product to reference for price

   compare_at_price_varies {Bool}
    Displays a range price if a product's variants have differing prices

   on_sale {Bool}
    If a product, or one of it's variants is on sale

   emphasize_price {Bool}
    Used in product grid item to add placeholder space

   show_original {Bool}
    Show original price if is consistent across all variants

   show_savings {Bool}
    Line of text indicating maximum savings on sale items (ex. "Save up to 20%")

   savings_format {String}
    Percentage or money for show_savings line
{% endcomment %}

{% assign include_hidden_price = include_hidden_price | default: true %}
{% comment %}Inject /shopify-price-ui/price begin{% endcomment %}
{% comment %}
   class_root {String}
    Base class root

   show_range {Bool}
    Show price range

   price_range_format {String}
      'range' or 'from', defaults to 'range'

   product {Product}
      Product to reference for price

   compare_at_price_varies {Bool}
    Displays a range price if a product's variants have differing prices

   on_sale {Bool}
    If a product, or one of it's variants is on sale

   emphasize_price {Bool}
    Used in product grid item to add placeholder space

   show_original {Bool}
    Show original price if is consistent across all variants

   show_savings {Bool}
    Line of text indicating maximum savings on sale items (ex. "Save up to 20%")

   savings_format {String}
    Percentage or money for show_savings line

   include_spacer {Bool}
    Include a spacer div above the price when emphasize price is enabled and there is no 'compare-at' price

   include_unit_price
    Include the unit price line

   include_tax_line
    Include tax line

   include_hidden_price
    Include a hidden element with price data to use in cases of unavailable variants or cases where no variant
    is selected by default

   include_compare_price
    Show compare at price
{% endcomment %}

{% assign price_min = nil %}
{% assign price_max = nil %}
{% assign compare_at_price_min = nil %}
{% assign compare_at_price_max = nil %}
{% assign price_varies = false %}
{% assign compare_at_price_varies = false %}
{% for variant in product.variants %}
  {% if price_min == nil or variant.price < price_min %}
    {% assign price_min = variant.price %}
  {% endif %}
  {% if price_max == nil or variant.price > price_max %}
    {% assign price_max = variant.price %}
  {% endif %}
  {% assign tmp_compare_at_price = variant.compare_at_price %}
  {% unless variant.compare_at_price %}
    {% assign tmp_compare_at_price = variant.price %}
  {% endunless %}
  {% if compare_at_price_min == nil or tmp_compare_at_price < compare_at_price_min %}
    {% assign compare_at_price_min = tmp_compare_at_price %}
  {% endif %}
  {% if compare_at_price_max == nil or tmp_compare_at_price > compare_at_price_max %}
    {% assign compare_at_price_max = tmp_compare_at_price %}
  {% endif %}
  {% if variant.price != price_min %}
    {% assign price_varies = true %}
  {% endif %}
  {% if tmp_compare_at_price != compare_at_price_min %}
    {% assign compare_at_price_varies = true %}
  {% endif %}
{% endfor %}

{% assign show_range = show_range | default: false %}
{% comment %}{% assign price = product.price %}{% endcomment %}
{% assign compare_at_price = product.compare_at_price %}
{% assign variants = product.variants %}
{% assign price_range_format = price_range_format | default: 'range' %}
{% assign savings_format = savings_format | default: 'percentage' %}
{% assign on_sale = on_sale | default: false %}
{% assign emphasize_price = emphasize_price | default: false %}
{% assign show_original = show_original | default: false %}
{% assign show_savings = show_savings | default: false %}
{% assign class_root = class_root | default: 'product' %}
{% assign include_spacer = include_spacer | default: false %}
{% assign include_unit_price = include_unit_price | default: false %}
{% assign include_tax_line = include_tax_line | default: false %}
{% assign include_compare_price = include_compare_price | default: true %}

  {% if include_compare_price %}
    

      {%- capture compare_at_price_html -%}
        {{ 'product_price.price.original' | t }}
        
          {{ compare_at_price | money }}
        
      {%- endcapture -%}

      {% if compare_at_price_varies %}
        {%- capture compare_at_price_range_html -%}
          {% if price_range_format == 'range' %}
            {{ 'product_price.price.original' | t }}
            
              {{ compare_at_price_min | money }}
            
            -
            {{ 'product_price.price.original' | t }}
            
              {{ compare_at_price_max | money }}
            
          {% else %}
            {{ 'product_price.item.price.range_html' | t: price: compare_at_price_html | strip_newlines }}
          {% endif %}
        {% endcapture %}
      {% endif %}

      {% if compare_at_price_varies and on_sale and show_original and show_range %}
        {{ compare_at_price_range_html }}
      {% elsif on_sale and show_original %}
        {{ compare_at_price_html }}
      {% elsif emphasize_price and include_spacer %}
        
      {% elsif show_original %}
        
      {% endif %}
    

    {% if include_hidden_price %}
      {% comment %}
        Hide an element containing compare at price info to fill in the price when no variant is selected
      {% endcomment %}
      
        {% if price_range_format == 'range' %}
          {{ 'product_price.price.original' | t }}
          
            {{ compare_at_price_min | money }}
          
          -
          {{ 'product_price.price.original' | t }}
          
            {{ compare_at_price_max | money }}
          
        {% else %}
          {{ 'product_price.item.price.range_html' | t: price: compare_at_price_html | strip_newlines }}
        {% endif %}
      

      
        {{ 'product_price.price.original' | t }}
        
          {{ compare_at_price | money }}
        
      

    {% endif %}
  {% endif %}

  
    {%- capture price_html -%}
      
        {{ price | money }}
      
    {%- endcapture -%}

    {% capture current_price_range_html %}
      {% if price_varies %}
        {% if price_range_format == 'range' %}
          {{ price_min | money}}
          -
          {{ price_max | money }}
        {% else %}
          {{ 'product_price.price.range_html' | t: price: price_html | strip_newlines }}
        {% endif %}
      {% endif %}
    {% endcapture %}

    {% capture current_price_html %}
      {% if on_sale and show_original %}
        {{ 'product_price.price.current' | t }}
      {% endif %}
      {{ price_html }}
    {% endcapture %}

    {% if show_range and price_varies %}
      {{ current_price_range_html }}
    {% else %}
      {{ current_price_html }}
    {% endif %}
  

  {% if include_hidden_price %}
    {% comment %}
      Hide an element containing current price info to fill in the price when no variant is selected
    {% endcomment %}
    
      {% if price_range_format == 'range' %}
        {{ price_min | money}}
        -
        {{ price_max | money }}
      {% else %}
        {{ 'product_price.price.range_html' | t: price: price_html | strip_newlines }}
      {% endif %}
    

    
      {{ 'product_price.price.current' | t }}
      {{ price_html }}
    

  {% endif %}

  {% if include_unit_price %}
    {% assign variant = product.selected_or_first_available_variant %}
    {% capture total_quantity %}{{ variant.unit_price_measurement.quantity_value }}{{ variant.unit_price_measurement.quantity_unit }}{% endcapture %}
    {% capture unit_price %}{{ variant.unit_price | money }}{% endcapture %}
    {% capture unit_measure %}{%- if variant.unit_price_measurement.reference_value != 1 -%}{{ variant.unit_price_measurement.reference_value }}{%- endif %}{{ variant.unit_price_measurement.reference_unit }}{% endcapture %}

    

      {{ 'product_price.price.price_per_unit_html' | t: total_quantity: total_quantity, unit_price: unit_price, unit_measure: unit_measure | strip_newlines }}
    

  {% endif %}

  {% if include_tax_line %}
    {%- capture tax_text -%}
      {{ 'product_price.price.tax_line_html' | t }}
    {%- endcapture -%}

    {%- if tax_text != blank and class_root != 'productitem' -%}
      
        {{ tax_text }}
      

    {%- endif -%}
  {% endif %}

{% comment %}Inject /shopify-price-ui/price end{% endcomment %}