Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Price variant not displaying in collection grid

Price variant not displaying in collection grid

TBS2023
Shopify Partner
213 1 17

Hello

Some of my products have variants - however the price of these doesn't display on the collection page

I had added the variant rates

 

TBS2023_0-1728283427867.png

 

https://the-body-shop-nordic.myshopify.com/collections/most-loved

 

 

TBS2023_0-1728283326612.png

 

 

https://the-body-shop-nordic.myshopify.com/

ubahdo

 

 

<div class="grid-product__price">
          {%- if on_sale -%}
            <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
            <span class="grid-product__price--original">{{ product.compare_at_price | money }}</span>
            <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
          {%- endif -%}
          {%- if product.price_varies -%}
            {%- assign price = product.price_min | money -%}
            {{ 'products.general.from_text_html' | t: price: price }}
          {%- else -%}
            {{ product.price  | money }}
          {%- endif -%}
          {%- if on_sale -%}
            {%- if settings.product_save_amount -%}
              {%- if settings.product_save_type == 'dollar' -%}
                {%- capture saved_amount -%}{{ product.compare_at_price | minus: product.price | money }}{%- endcapture -%}
              {%- else -%}
                {%- capture saved_amount -%}{{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round }}%{%- endcapture -%}
              {%- endif -%}
              <span class="grid-product__price--savings">
                {{ 'products.general.save_html' | t: saved_amount: saved_amount }}
              </span>
            {%- endif -%}
          {%- endif -%}

          {%- assign product_variant = product.selected_or_first_available_variant -%}
          {%- if product_variant.unit_price_measurement -%}
            <div class="product__unit-price">
              {%- capture unit_price_base_unit -%}
                {%- if product_variant.unit_price_measurement -%}
                  {%- if product_variant.unit_price_measurement.reference_value != 1 -%}
                    {{ product_variant.unit_price_measurement.reference_value }}
                  {%- endif -%}
                  {{ product_variant.unit_price_measurement.reference_unit }}
                {%- endif -%}
              {%- endcapture -%}

              {{ product_variant.unit_price | money }}/{{ unit_price_base_unit }}
            </div>
          {%- endif -%}

<div class="th_wl_col_btn" data-product_id="{{product.id}}" data-variant_id="{{product.selected_or_first_available_variant.id}}"></div>
          
        </div>
      </div>

 

Replies 8 (8)

BSSCommerce-B2B
Shopify Partner
1969 564 566

Hi @TBS2023 

I checked and found that the code has no issues, but please try adding a small text '...' before the price display. It will look like this.

<div class="grid-product__price">
          {%- if on_sale -%}
            <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
            <span class="grid-product__price--original">{{ product.compare_at_price | money }}</span>
            <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
          {%- endif -%}
          {%- if product.price_varies -%}
            <span>...</span>
            {%- assign price = product.price_min | money -%}
            {{ 'products.general.from_text_html' | t: price: price }}
          {%- else -%}
            {{ product.price  | money }}
          {%- endif -%}
          {%- if on_sale -%}
            {%- if settings.product_save_amount -%}
              {%- if settings.product_save_type == 'dollar' -%}
                {%- capture saved_amount -%}{{ product.compare_at_price | minus: product.price | money }}{%- endcapture -%}
              {%- else -%}
                {%- capture saved_amount -%}{{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round }}%{%- endcapture -%}
              {%- endif -%}
              <span class="grid-product__price--savings">
                {{ 'products.general.save_html' | t: saved_amount: saved_amount }}
              </span>
            {%- endif -%}
          {%- endif -%}

          {%- assign product_variant = product.selected_or_first_available_variant -%}
          {%- if product_variant.unit_price_measurement -%}
            <div class="product__unit-price">
              {%- capture unit_price_base_unit -%}
                {%- if product_variant.unit_price_measurement -%}
                  {%- if product_variant.unit_price_measurement.reference_value != 1 -%}
                    {{ product_variant.unit_price_measurement.reference_value }}
                  {%- endif -%}
                  {{ product_variant.unit_price_measurement.reference_unit }}
                {%- endif -%}
              {%- endcapture -%}

              {{ product_variant.unit_price | money }}/{{ unit_price_base_unit }}
            </div>
          {%- endif -%}

<div class="th_wl_col_btn" data-product_id="{{product.id}}" data-variant_id="{{product.selected_or_first_available_variant.id}}"></div>
          
        </div>
      </div>

Then let me know if it displays

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

TBS2023
Shopify Partner
213 1 17

The 3 little dots appear but not the price

 

TBS2023_0-1728295219732.png

 

ZestardTech
Shopify Partner
5907 1067 1412

Hello @TBS2023 


You can try using this code.

 

<div class="grid-product__price">
  {%- assign product_variant = product.selected_or_first_available_variant -%}
  
  {%- if on_sale and product_variant.compare_at_price > product_variant.price -%}
    <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <span class="grid-product__price--original">{{ product_variant.compare_at_price | money }}</span>
    <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
  {%- endif -%}
  
  {%- if product.price_varies -%}
    {%- assign price = product_variant.price | money -%}
    {{ 'products.general.from_text_html' | t: price: price }}
  {%- else -%}
    {{ product_variant.price | money }}
  {%- endif -%}

  {%- if on_sale and product_variant.compare_at_price > product_variant.price -%}
    {%- if settings.product_save_amount -%}
      {%- if settings.product_save_type == 'dollar' -%}
        {%- capture saved_amount -%}{{ product_variant.compare_at_price | minus: product_variant.price | money }}{%- endcapture -%}
      {%- else -%}
        {%- capture saved_amount -%}{{ product_variant.compare_at_price | minus: product_variant.price | times: 100.0 | divided_by: product_variant.compare_at_price | round }}%{%- endcapture -%}
      {%- endif -%}
      <span class="grid-product__price--savings">
        {{ 'products.general.save_html' | t: saved_amount: saved_amount }}
      </span>
    {%- endif -%}
  {%- endif -%}

  {%- if product_variant.unit_price_measurement -%}
    <div class="product__unit-price">
      {%- capture unit_price_base_unit -%}
        {%- if product_variant.unit_price_measurement.reference_value != 1 -%}
          {{ product_variant.unit_price_measurement.reference_value }}
        {%- endif -%}
        {{ product_variant.unit_price_measurement.reference_unit }}
      {%- endcapture -%}
      {{ product_variant.unit_price | money }}/{{ unit_price_base_unit }}
    </div>
  {%- endif -%}
</div>

<div class="th_wl_col_btn" data-product_id="{{ product.id }}" data-variant_id="{{ product_variant.id }}"></div>

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
TBS2023
Shopify Partner
213 1 17

nothing happened

EvinceDev
Shopify Partner
121 13 13

Hello @TBS2023 ,
Its look like object product is blank or undefined where product have more than one viariants.
Could you share the file code in which this code is included.

Shopify Theme Advanced Backend Developer and Debugger
Want to modify or develop new app, Hire us.
If our Answer is helpful then please Like and Accept Solution!
I am an eCommerce and Marketing Technology consultant based in India.
To inquire about consulting work availability, You can reach me on Skype by live: rahul.evince or mail on partners@evincedev.com.
Shopify Apps URL :- https://apps.shopify.com/partners/gemfind1
Customization on Shopify Theme | Shopify App Development | SEO & Digital Marketing
TBS2023
Shopify Partner
213 1 17

where do i find this, please?

EvinceDev
Shopify Partner
121 13 13

Please provide theme name of it.

Shopify Theme Advanced Backend Developer and Debugger
Want to modify or develop new app, Hire us.
If our Answer is helpful then please Like and Accept Solution!
I am an eCommerce and Marketing Technology consultant based in India.
To inquire about consulting work availability, You can reach me on Skype by live: rahul.evince or mail on partners@evincedev.com.
Shopify Apps URL :- https://apps.shopify.com/partners/gemfind1
Customization on Shopify Theme | Shopify App Development | SEO & Digital Marketing
TBS2023
Shopify Partner
213 1 17

Impulse