Shopify themes, liquid, logos, and UX
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
https://the-body-shop-nordic.myshopify.com/collections/most-loved
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>
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
The 3 little dots appear but not the price
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>
nothing happened
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.
where do i find this, please?
Please provide theme name of it.
Impulse
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024