How to show product price range for variant in collection view ???|
like $5 - $10
Website - https://general-24-store.myshopify.com/
password - 123
Topic summary
Goal: show a variant price range (e.g., $5 – $10) on collection page product cards.
What happened:
- OP shared store URL/password and asked how to display a price range in collection view.
- Helpers requested the relevant theme file: first “product-card.liquid,” later clarified as the pricing snippet “product-prices.liquid,” not “collection-card.liquid.”
- OP posted code for collection-card.liquid, then product-card-1.liquid (multiple times), but snippets appear incomplete/corrupted and don’t include the pricing logic.
- Another helper asked for a screenshot to confirm placement; OP uploaded a collection grid screenshot showing where the range should appear.
- A collaborator invitation was suggested to inspect and adjust the theme directly.
Key files/terms:
- product-card.liquid: controls product card content in collection grids.
- product-prices.liquid: typically handles price display; likely where min/max variant prices would be rendered.
Status:
- No solution implemented yet. Awaiting the correct product-prices.liquid code (or collaborator access) and confirmation of exact placement. The screenshots are central to determine where the range should display.
Hi @liteleraja ,
Please send me the code of card-product.liquid file, I will check it for you
Do you mean collection-card.liquid ??
{%- liquid
assign aspect_ratio = image.aspect_ratio
if image_rounded
assign aspect_ratio = 1
endif
for i in (1..index)
capture current
cycle 1, 2, 3, 4, 5, 6
endcapture
endfor
assign placeholder_image = 'collection-' | append: current
assign all_products_count = collection.all_products_count
if collection == blank
assign all_products_count = 12
endif
assign hover = 'm-hover-box'
case hover_effect
when 'scaling-down'
assign hover = hover | append: ' m-hover-box--scale-down'
when 'scaling-up'
assign hover = hover | append: ' m-hover-box--scale-up'
when 'zoom-in'
assign hover = hover | append: ' m-hover-box--zoom-in'
else
assign hover = ''
endcase
assign classes = ''
if animated
assign classes = classes | append: ' m-scroll-trigger' | append: ' animate--' | append: animation_effect
endif
if card_style == 'boxed'
assign classes = classes | append: ' m-gradient' | append: ' m-color-' | append: settings.collection_card_color_scheme
endif
-%}
{% case card_style %}
{% when 'inside' %}
{% if image != blank %}
{% render 'responsive-image', image: image, image_class: 'm:w-full', aspect_ratio: aspect_ratio %}
{% else %}
{{ placeholder_image | placeholder_svg_tag: 'm-placeholder-svg' }}
{% endif %}
###
{{ title | default: collection.title }}
{% if show_product_count == true %}
{{ 'collections.general.collection_items' | t: title: all_products_count }}
{% endif %}
{% when 'inside-2' %}
{% if image != blank %}
{% render 'responsive-image', image: image, image_class: 'm:w-full', aspect_ratio: aspect_ratio %}
{% else %}
{{ placeholder_image | placeholder_svg_tag: 'm-placeholder-svg' }}
{% endif %}
###
{{ title | default: collection.title }}
{{ title | default: collection.title }}
{% when 'standard' %}
{% if image != blank %}
{% render 'responsive-image', image: image, image_class: 'm:w-full', aspect_ratio: aspect_ratio %}
{% else %}
{{ placeholder_image | placeholder_svg_tag: 'm-placeholder-svg' }}
{% endif %}
###
{{ title | default: collection.title }}
{% if show_product_count == true and section.settings.count_inline_title == true %}
<sup>{{ all_products_count }}</sup>
{% endif %}
{% if show_product_count == true and section.settings.count_inline_title == false %}
{{ 'collections.general.collection_items' | t: title: all_products_count }}
{% endif %}
{% endcase %}
Hi @liteleraja ,
No, it could be product-card.liquid file 
This one is product-card-1.liquid
{% comment %}
Accepts:
- product: {Object} Product (required)
- show_variant_options: {Boolean} Show variant swatches at the bottom (optional)
- hide_title: {String} Hide product title (optional)
- image_ratio: {String} Product media ratio (optional)
- pcard_alignment: {String} Product alignment (optional)
- show_vendor: {Boolean} Show product vendor (optional)
- show_cart_button: {Boolean} Show Add to cart button (optional)
- show_quickview_button: {Boolean} Show Quickview button (optional)
- show_wishlist_button: {Boolean} Show Wishlist button (optional)
- show_compare_button: {Boolean} Show Compare button (optional)
- column_wrapper: {Boolean} Wrap product card (optional)
- remove_params: {Boolean} Remove url params (optional)
Usage:
{% render 'product-card-1', product: product %}
{% endcomment %}
{% liquid
if show_variant_options == null
assign show_variant_options = settings.show_swatch_option
endif
if show_inventory == null
assign show_inventory = settings.pcard_show_inventory
endif
assign show_title = true
if hide_title == true
assign show_title = false
endif
if image_ratio == null or image_ratio == blank
assign image_ratio = settings.pcard_image_ratio | default: '1/1'
endif
if image_ratio == 'original'
assign image_ratio = product.featured_image.aspect_ratio | default: '1/1'
endif
if show_vendor == null
assign show_vendor = settings.show_vendor
endif
if show_desc == null
assign show_desc = true
endif
assign sold_out = false
if product.available == false
assign sold_out = true
endif
assign discount = ''
assign compare_at_price = product.compare_at_price
assign price = product.price
assign on_sale = false
if compare_at_price > price
assign on_sale = true
assign discount = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price
endif
assign show_on_sale_badge = false
if settings.on_sale_badge != 'hide' and on_sale
assign show_on_sale_badge = true
endif
assign quick_add_text = 'products.product.quick_add' | t
unless product.has_only_default_variant
capture quick_add_text
render 'new-locale', key: 'products.product.select_options'
endcapture
endunless
assign sold_number = product.metafields.foxkit.sold_number
assign selected_variant = product.selected_or_first_available_variant
if product.available
assign variant_id = product.first_available_variant.id
else
assign variant_id = product.selected_or_first_available_variant.id
endif
assign selected_variant_id = ''
if section.settings.change_product_variant_on_fitlering
assign variant_id = product.selected_or_first_available_variant.id
assign selected_variant_id = product.selected_variant.id
endif
if pcard_alignment == null
assign pcard_alignment = settings.pcard_alignment
endif
assign pcard_default_image = settings.pcard_default_image
if image_ratio == null or image_ratio == blank
assign image_ratio = settings.pcard_image_ratio | default: '1/1'
endif
if show_cart_button == null
assign show_cart_button = settings.show_cart_button
endif
if show_quickview_button == null
assign show_quickview_button = settings.show_quickview_button
endif
if show_wishlist_button == null
assign show_wishlist_button = settings.show_wishlist_button
endif
if show_compare_button == null
assign show_compare_button = settings.show_compare_button
endif
assign preview_image = product.media[0].preview_image
if section.settings.change_product_variant_on_fitlering == true and product.selected_variant.image != null
assign preview_image = product.selected_variant.image
endif
if image_ratio == 'original'
assign image_ratio = product.media[0].aspect_ratio | default: '1/1'
endif
assign second_image = ''
if settings.show_second_img and product.images.size > 1 and product.images[1] != blank
assign second_image = product.images[1]
endif
assign product_card_classes = 'm-product-card m-product-card--style-1'
if sold_out
assign product_card_classes = product_card_classes | append: ' m-product-card--soldout'
endif
if on_sale
assign product_card_classes = product_card_classes | append: ' m-product-card--onsale'
endif
if settings.show_second_img and second_image != blank
assign product_card_classes = product_card_classes | append: ' m-product-card--show-second-img'
endif
assign product_url = product.url
if remove_params
assign product_url = product.url | split: '?' | first
endif
assign firstMediaType = product.media.first.media_type
assign show_video = false
if settings.pcard_show_video and firstMediaType == 'video'
assign show_video = true
endif
%}
{%- if column_wrapper -%}{%- endif -%}
{% if preview_image != blank or firstMediaType == 'video' %}
{% unless show_video %}
{%- liquid
assign asp_rat = image_ratio | default: preview_image.aspect_ratio
if asp_rat == 'original'
assign asp_rat = preview_image.aspect_ratio
endif
assign alt = alt | default: preview_image.alt | escape
-%}
{%- capture sizes -%}(min-width: {{ settings.container_width }}px) {{ settings.container_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2){%- endcapture -%}
{%- if second_image != blank -%}
{%- liquid
assign asp_rat = image_ratio | default: second_image.aspect_ratio
if asp_rat == 'original'
assign asp_rat = second_image.aspect_ratio
endif
assign alt = alt | default: second_image.alt | escape
-%}
{%- capture sizes -%}(min-width: {{ settings.container_width }}px) {{ settings.container_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2){%- endcapture -%}
{%- endif -%}
{% else %}
{% endunless %}
{% else %}
{% if pcard_default_image != blank %}
{%- liquid
assign asp_rat = image_ratio | default: pcard_default_image.aspect_ratio
if asp_rat == 'original'
assign asp_rat = pcard_default_image.aspect_ratio
endif
assign alt = alt | default: pcard_default_image.alt | escape
-%}
{%- capture sizes -%}(min-width: {{ settings.container_width }}px) {{ settings.container_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2){%- endcapture -%}
{% else %}
{{ 'product-1' | placeholder_svg_tag: 'm-placeholder-svg' }}
{% endif %}
{% endif %}
{% if settings.show_badge_sale %}
{% for tag in product.tags %}
{% if tag contains 'tag__' %}
{%- liquid
assign tag_content = tag | split: '__' | last
assign type = tag_content | split: '_' | first
assign tag_name = tag_content | split: '_' | last
assign color_scheme_class = 'm-gradient m-color-'
case type
when 'sale':
assign color_scheme_class = color_scheme_class | append: settings.sale_badge_color_scheme
when 'new':
assign color_scheme_class = color_scheme_class | append: settings.new_badge_color_scheme
when 'hot':
assign color_scheme_class = color_scheme_class | append: settings.hot_badge_color_scheme
endcase
-%}
{{- tag_name -}}
{% endif %}
{% endfor %}
{% endif %}
{% assign custom_badge_class = 'm-product-card__tag-name m-product-tag m-product-tag--preorder m-gradient m-color-'
| append: settings.preorder_badge_color_scheme
%}
{% capture foxkit_preorder_badge %}{% render 'foxkit-preorder-badge', product: product, static: true, custom_class: custom_badge_class %}{% endcapture %}
{% unless foxkit_preorder_badge contains 'Liquid error' %}
{{ foxkit_preorder_badge }}
{% endunless %}
{% if show_on_sale_badge %}
{%- if settings.on_sale_badge == 'show_text' -%}
{{ 'products.product.on_sale' | t }}
{%- elsif settings.on_sale_badge == 'show_percentage' -%}
{{ discount | append: '%' | prepend: '-' }}
{%- endif -%}
{% endif %}
{%- if settings.show_badge_soldout -%}
{{- 'products.product.sold_out' | t -}}
{%- endif -%}
{%- if show_quickview_button or show_wishlist_button or show_compare_button or show_cart_button -%}
{% liquid
assign tooltips = 'compare,quickview'
assign tooltip_items = tooltips | split: ','
if show_cart_button
render 'tooltip', type: 'add-to-cart', section: section, product: product, class_name: 'm-tooltip--top m-product-card__atc-button'
endif
%}
{%- if show_wishlist_button -%}
{% assign wishlist_app = settings.wishlist_app %}
{% if wishlist_app == 'growave' %}
{% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %}
{% unless the_snippet_fave_icon contains 'Liquid error' %}
{{ the_snippet_fave_icon }}
{% else %}
{% render 'mm-ssw-widget-faveicon' with product.id %}
{% endunless %}
{{ 'products.product.add_to_wishlist' | t }}
{% else %}
{% liquid
render 'tooltip', type: 'wishlist', product: product, class_name: 'm-tooltip--left'
%}
{% endif %}
{%- endif -%}
{%- for tooltip in tooltip_items -%}
{%- assign settings_key = 'show_' | append: tooltip | append: '_button' | replace: 'add-to-cart', 'cart' -%}
{%- if [settings_key] -%}
{% render 'tooltip', type: tooltip, section: section, product: product, class_name: 'm-tooltip--left' %}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{% liquid
assign metafields_time = product.metafields.global.minimog_countdown
if settings.show_countdown and metafields_time != blank
render 'countdown-timer', time: metafields_time, separator: false, short_label: true, extra_classes: 'm-product-card__countdown m:hidden'
endif
%}
{%- if sold_out == false -%}
{% render 'product-card-quick-add-btn',
product: product,
quick_add_text: quick_add_text,
section: section,
button_style: 'white'
%}
{% endif %}
{%- if show_vendor -%}
{{ product.vendor }}
{%- endif -%}
{% if show_title == true %}
###
{{ product.title }}
{% endif %}
{% if settings.show_review_badge %}
{% render 'product-reviews-app__badge', product: product %}
{% endif %}
{% render 'product-prices', product: product, is_product_card: true %}
{% if product.has_only_default_variant == false and show_variant_options %}
{% render 'product-card-option',
product: product,
show_variant_options: show_variant_options,
pcard_alignment: pcard_alignment
%}
{% endif %}
{%- if show_inventory and selected_variant.inventory_management != blank -%}
{%- liquid
assign inventory_threshold = settings.low_inventory_threshold
assign show_inventory_count = settings.show_inventory_count
assign inventory_visibility = settings.inventory_visibility
assign inventory_hide_backordered = settings.inventory_hide_backordered
assign total = 0
assign inventory_policy = ''
for variant in product.variants
if variant.inventory_quantity > 0
assign total = total | plus: variant.inventory_quantity
endif
if variant.inventory_policy == 'continue'
assign inventory_policy = 'continue'
endif
endfor
if total <= 0
if inventory_policy == 'continue'
assign status = 'backordered'
elsif product.available
assign status = 'instock'
else
assign status = 'outofstock'
endif
elsif total <= inventory_threshold
assign status = 'low'
else
assign status = 'normal'
endif
assign show = false
if inventory_visibility == 'always'
assign show = true
if status == 'backordered' and inventory_hide_backordered
assign show = false
endif
else
if status == 'low'
assign show = true
endif
endif
if status == 'outofstock'
assign show = false
endif
assign show_inventory_number = true
if show_inventory_count == 'never' or total <= 0 or show_inventory_count == 'low_inventory' and status != 'low'
assign show_inventory_number = false
endif
-%}
{%- if show == true -%}
{% liquid
case status
when 'backordered'
render 'new-locale', key: 'products.product.backordered'
when 'low'
if show_inventory_number
render 'new-locale', key: 'products.product.inventory_low_quantity_html', param: '{{ quantity }}', value: total
else
render 'new-locale', key: 'products.product.low_stock'
endif
else
if show_inventory_number
render 'new-locale', key: 'products.product.inventory_quantity_html', param: '{{ quantity }}', value: total
else
echo 'products.product.in_stock' | t
endif
endcase
%}
{%- endif -%}
{%- endif -%}
{%- if show_desc -%}
{{ product.description | strip_html | truncatewords: 15, '...' }}
{%- endif -%}
{%- if show_quickview_button or show_wishlist_button or show_compare_button or show_cart_button -%}
{% render 'product-card-quick-add-btn', product: product, quick_add_text: quick_add_text, section: section %}
{% liquid
assign tooltips = 'compare,quickview,'
assign tooltip_items = tooltips | split: ','
if show_cart_button
render 'tooltip', type: 'add-to-cart', section: section, product: product, class_name: 'm-tooltip--top m-product-card__atc-button'
endif
%}
{%- if show_wishlist_button -%}
{% assign wishlist_app = settings.wishlist_app %}
{% if wishlist_app == 'growave' %}
{% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %}
{% unless the_snippet_fave_icon contains 'Liquid error' %}
{{ the_snippet_fave_icon }}
{% else %}
{% render 'mm-ssw-widget-faveicon' with product.id %}
{% endunless %}
{{ 'products.product.add_to_wishlist' | t }}
{% else %}
{% liquid
render 'tooltip', type: 'wishlist', product: product, class_name: 'm-tooltip--top'
%}
{% endif %}
{%- endif -%}
{%- for tooltip in tooltip_items -%}
{%- assign settings_key = 'show_'
| append: tooltip
| append: '_button'
| replace: 'add-to-cart', 'cart'
-%}
{%- if [settings_key] -%}
{% render 'tooltip', type: tooltip, section: section, product: product, class_name: 'm-tooltip--top' %}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- if column_wrapper -%}
{%- endif -%}
Hi @liteleraja ,
I’m not sure, can I send you a collaborator invitation? it will help me search and change things for the better
I am using product-card-1.liquid
below is the code
Hello, @liteleraja
Can you please share screen shot and specify where u want on actual place ?
Thank you!
{% comment %}
Accepts:
- product: {Object} Product (required)
- show_variant_options: {Boolean} Show variant swatches at the bottom (optional)
- hide_title: {String} Hide product title (optional)
- image_ratio: {String} Product media ratio (optional)
- pcard_alignment: {String} Product alignment (optional)
- show_vendor: {Boolean} Show product vendor (optional)
- show_cart_button: {Boolean} Show Add to cart button (optional)
- show_quickview_button: {Boolean} Show Quickview button (optional)
- show_wishlist_button: {Boolean} Show Wishlist button (optional)
- show_compare_button: {Boolean} Show Compare button (optional)
- column_wrapper: {Boolean} Wrap product card (optional)
- remove_params: {Boolean} Remove url params (optional)
Usage:
{% render 'product-card-1', product: product %}
{% endcomment %}
{% liquid
if show_variant_options == null
assign show_variant_options = settings.show_swatch_option
endif
if show_inventory == null
assign show_inventory = settings.pcard_show_inventory
endif
assign show_title = true
if hide_title == true
assign show_title = false
endif
if image_ratio == null or image_ratio == blank
assign image_ratio = settings.pcard_image_ratio | default: '1/1'
endif
if image_ratio == 'original'
assign image_ratio = product.featured_image.aspect_ratio | default: '1/1'
endif
if show_vendor == null
assign show_vendor = settings.show_vendor
endif
if show_desc == null
assign show_desc = true
endif
assign sold_out = false
if product.available == false
assign sold_out = true
endif
assign discount = ''
assign compare_at_price = product.compare_at_price
assign price = product.price
assign on_sale = false
if compare_at_price > price
assign on_sale = true
assign discount = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price
endif
assign show_on_sale_badge = false
if settings.on_sale_badge != 'hide' and on_sale
assign show_on_sale_badge = true
endif
assign quick_add_text = 'products.product.quick_add' | t
unless product.has_only_default_variant
capture quick_add_text
render 'new-locale', key: 'products.product.select_options'
endcapture
endunless
assign sold_number = product.metafields.foxkit.sold_number
assign selected_variant = product.selected_or_first_available_variant
if product.available
assign variant_id = product.first_available_variant.id
else
assign variant_id = product.selected_or_first_available_variant.id
endif
assign selected_variant_id = ''
if section.settings.change_product_variant_on_fitlering
assign variant_id = product.selected_or_first_available_variant.id
assign selected_variant_id = product.selected_variant.id
endif
if pcard_alignment == null
assign pcard_alignment = settings.pcard_alignment
endif
assign pcard_default_image = settings.pcard_default_image
if image_ratio == null or image_ratio == blank
assign image_ratio = settings.pcard_image_ratio | default: '1/1'
endif
if show_cart_button == null
assign show_cart_button = settings.show_cart_button
endif
if show_quickview_button == null
assign show_quickview_button = settings.show_quickview_button
endif
if show_wishlist_button == null
assign show_wishlist_button = settings.show_wishlist_button
endif
if show_compare_button == null
assign show_compare_button = settings.show_compare_button
endif
assign preview_image = product.media[0].preview_image
if section.settings.change_product_variant_on_fitlering == true and product.selected_variant.image != null
assign preview_image = product.selected_variant.image
endif
if image_ratio == 'original'
assign image_ratio = product.media[0].aspect_ratio | default: '1/1'
endif
assign second_image = ''
if settings.show_second_img and product.images.size > 1 and product.images[1] != blank
assign second_image = product.images[1]
endif
assign product_card_classes = 'm-product-card m-product-card--style-1'
if sold_out
assign product_card_classes = product_card_classes | append: ' m-product-card--soldout'
endif
if on_sale
assign product_card_classes = product_card_classes | append: ' m-product-card--onsale'
endif
if settings.show_second_img and second_image != blank
assign product_card_classes = product_card_classes | append: ' m-product-card--show-second-img'
endif
assign product_url = product.url
if remove_params
assign product_url = product.url | split: '?' | first
endif
assign firstMediaType = product.media.first.media_type
assign show_video = false
if settings.pcard_show_video and firstMediaType == 'video'
assign show_video = true
endif
%}
{%- if column_wrapper -%}
{%- endif -%}
{% if preview_image != blank or firstMediaType == 'video' %}
{% unless show_video %}
{%- liquid
assign asp_rat = image_ratio | default: preview_image.aspect_ratio
if asp_rat == 'original'
assign asp_rat = preview_image.aspect_ratio
endif
assign alt = alt | default: preview_image.alt | escape
-%}
{%- capture sizes -%}(min-width: {{ settings.container_width }}px) {{ settings.container_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2){%- endcapture -%}
{%- if second_image != blank -%}
{%- liquid
assign asp_rat = image_ratio | default: second_image.aspect_ratio
if asp_rat == 'original'
assign asp_rat = second_image.aspect_ratio
endif
assign alt = alt | default: second_image.alt | escape
-%}
{%- capture sizes -%}(min-width: {{ settings.container_width }}px) {{ settings.container_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2){%- endcapture -%}
{%- endif -%}
{% else %}
{% endunless %}
{% else %}
{% if pcard_default_image != blank %}
{%- liquid
assign asp_rat = image_ratio | default: pcard_default_image.aspect_ratio
if asp_rat == 'original'
assign asp_rat = pcard_default_image.aspect_ratio
endif
assign alt = alt | default: pcard_default_image.alt | escape
-%}
{%- capture sizes -%}(min-width: {{ settings.container_width }}px) {{ settings.container_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2){%- endcapture -%}
{% else %}
{{ 'product-1' | placeholder_svg_tag: 'm-placeholder-svg' }}
{% endif %}
{% endif %}
{% if settings.show_badge_sale %}
{% for tag in product.tags %}
{% if tag contains 'tag__' %}
{%- liquid
assign tag_content = tag | split: '__' | last
assign type = tag_content | split: '_' | first
assign tag_name = tag_content | split: '_' | last
assign color_scheme_class = 'm-gradient m-color-'
case type
when 'sale':
assign color_scheme_class = color_scheme_class | append: settings.sale_badge_color_scheme
when 'new':
assign color_scheme_class = color_scheme_class | append: settings.new_badge_color_scheme
when 'hot':
assign color_scheme_class = color_scheme_class | append: settings.hot_badge_color_scheme
endcase
-%}
{{- tag_name -}}
{% endif %}
{% endfor %}
{% endif %}
{% assign custom_badge_class = 'm-product-card__tag-name m-product-tag m-product-tag--preorder m-gradient m-color-'
| append: settings.preorder_badge_color_scheme
%}
{% capture foxkit_preorder_badge %}{% render 'foxkit-preorder-badge', product: product, static: true, custom_class: custom_badge_class %}{% endcapture %}
{% unless foxkit_preorder_badge contains 'Liquid error' %}
{{ foxkit_preorder_badge }}
{% endunless %}
{% if show_on_sale_badge %}
{%- if settings.on_sale_badge == 'show_text' -%}
{{ 'products.product.on_sale' | t }}
{%- elsif settings.on_sale_badge == 'show_percentage' -%}
{{ discount | append: '%' | prepend: '-' }}
{%- endif -%}
{% endif %}
{%- if settings.show_badge_soldout -%}
{{- 'products.product.sold_out' | t -}}
{%- endif -%}
{%- if show_quickview_button or show_wishlist_button or show_compare_button or show_cart_button -%}
{% liquid
assign tooltips = 'compare,quickview'
assign tooltip_items = tooltips | split: ','
if show_cart_button
render 'tooltip', type: 'add-to-cart', section: section, product: product, class_name: 'm-tooltip--top m-product-card__atc-button'
endif
%}
{%- if show_wishlist_button -%}
{% assign wishlist_app = settings.wishlist_app %}
{% if wishlist_app == 'growave' %}
{% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %}
{% unless the_snippet_fave_icon contains 'Liquid error' %}
{{ the_snippet_fave_icon }}
{% else %}
{% render 'mm-ssw-widget-faveicon' with product.id %}
{% endunless %}
{{ 'products.product.add_to_wishlist' | t }}
{% else %}
{% liquid
render 'tooltip', type: 'wishlist', product: product, class_name: 'm-tooltip--left'
%}
{% endif %}
{%- endif -%}
{%- for tooltip in tooltip_items -%}
{%- assign settings_key = 'show_' | append: tooltip | append: '_button' | replace: 'add-to-cart', 'cart' -%}
{%- if [settings_key] -%}
{% render 'tooltip', type: tooltip, section: section, product: product, class_name: 'm-tooltip--left' %}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{% liquid
assign metafields_time = product.metafields.global.minimog_countdown
if settings.show_countdown and metafields_time != blank
render 'countdown-timer', time: metafields_time, separator: false, short_label: true, extra_classes: 'm-product-card__countdown m:hidden'
endif
%}
{%- if sold_out == false -%}
{% render 'product-card-quick-add-btn',
product: product,
quick_add_text: quick_add_text,
section: section,
button_style: 'white'
%}
{% endif %}
{%- if show_vendor -%}
{{ product.vendor }}
{%- endif -%}
{% if show_title == true %}
###
{{ product.title }}
{% endif %}
{% if settings.show_review_badge %}
{% render 'product-reviews-app__badge', product: product %}
{% endif %}
{% render 'product-prices', product: product, is_product_card: true %}
{% if product.has_only_default_variant == false and show_variant_options %}
{% render 'product-card-option',
product: product,
show_variant_options: show_variant_options,
pcard_alignment: pcard_alignment
%}
{% endif %}
{%- if show_inventory and selected_variant.inventory_management != blank -%}
{%- liquid
assign inventory_threshold = settings.low_inventory_threshold
assign show_inventory_count = settings.show_inventory_count
assign inventory_visibility = settings.inventory_visibility
assign inventory_hide_backordered = settings.inventory_hide_backordered
assign total = 0
assign inventory_policy = ''
for variant in product.variants
if variant.inventory_quantity > 0
assign total = total | plus: variant.inventory_quantity
endif
if variant.inventory_policy == 'continue'
assign inventory_policy = 'continue'
endif
endfor
if total <= 0
if inventory_policy == 'continue'
assign status = 'backordered'
elsif product.available
assign status = 'instock'
else
assign status = 'outofstock'
endif
elsif total <= inventory_threshold
assign status = 'low'
else
assign status = 'normal'
endif
assign show = false
if inventory_visibility == 'always'
assign show = true
if status == 'backordered' and inventory_hide_backordered
assign show = false
endif
else
if status == 'low'
assign show = true
endif
endif
if status == 'outofstock'
assign show = false
endif
assign show_inventory_number = true
if show_inventory_count == 'never' or total <= 0 or show_inventory_count == 'low_inventory' and status != 'low'
assign show_inventory_number = false
endif
-%}
{%- if show == true -%}
{% liquid
case status
when 'backordered'
render 'new-locale', key: 'products.product.backordered'
when 'low'
if show_inventory_number
render 'new-locale', key: 'products.product.inventory_low_quantity_html', param: '{{ quantity }}', value: total
else
render 'new-locale', key: 'products.product.low_stock'
endif
else
if show_inventory_number
render 'new-locale', key: 'products.product.inventory_quantity_html', param: '{{ quantity }}', value: total
else
echo 'products.product.in_stock' | t
endif
endcase
%}
{%- endif -%}
{%- endif -%}
{%- if show_desc -%}
{{ product.description | strip_html | truncatewords: 15, '...' }}
{%- endif -%}
{%- if show_quickview_button or show_wishlist_button or show_compare_button or show_cart_button -%}
{% render 'product-card-quick-add-btn', product: product, quick_add_text: quick_add_text, section: section %}
{% liquid
assign tooltips = 'compare,quickview,'
assign tooltip_items = tooltips | split: ','
if show_cart_button
render 'tooltip', type: 'add-to-cart', section: section, product: product, class_name: 'm-tooltip--top m-product-card__atc-button'
endif
%}
{%- if show_wishlist_button -%}
{% assign wishlist_app = settings.wishlist_app %}
{% if wishlist_app == 'growave' %}
{% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %}
{% unless the_snippet_fave_icon contains 'Liquid error' %}
{{ the_snippet_fave_icon }}
{% else %}
{% render 'mm-ssw-widget-faveicon' with product.id %}
{% endunless %}
{{ 'products.product.add_to_wishlist' | t }}
{% else %}
{% liquid
render 'tooltip', type: 'wishlist', product: product, class_name: 'm-tooltip--top'
%}
{% endif %}
{%- endif -%}
{%- for tooltip in tooltip_items -%}
{%- assign settings_key = 'show_'
| append: tooltip
| append: '_button'
| replace: 'add-to-cart', 'cart'
-%}
{%- if [settings_key] -%}
{% render 'tooltip', type: tooltip, section: section, product: product, class_name: 'm-tooltip--top' %}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- if column_wrapper -%}
{%- endif -%}
Hi @liteleraja ,
The code will be in the product-prices.liquid file, can you send me the code?
1 Like
Hi , this is the code
{% comment %}
Accepts:
- product: {Object} Product (required)
- show_variant_options: {Boolean} Show variant swatches at the bottom (optional)
- hide_title: {String} Hide product title (optional)
- image_ratio: {String} Product media ratio (optional)
- pcard_alignment: {String} Product alignment (optional)
- show_vendor: {Boolean} Show product vendor (optional)
- show_cart_button: {Boolean} Show Add to cart button (optional)
- show_quickview_button: {Boolean} Show Quickview button (optional)
- show_wishlist_button: {Boolean} Show Wishlist button (optional)
- show_compare_button: {Boolean} Show Compare button (optional)
- column_wrapper: {Boolean} Wrap product card (optional)
- remove_params: {Boolean} Remove url params (optional)
Usage:
{% render 'product-card-1', product: product %}
{% endcomment %}
{% liquid
if show_variant_options == null
assign show_variant_options = settings.show_swatch_option
endif
if show_inventory == null
assign show_inventory = settings.pcard_show_inventory
endif
assign show_title = true
if hide_title == true
assign show_title = false
endif
if image_ratio == null or image_ratio == blank
assign image_ratio = settings.pcard_image_ratio | default: '1/1'
endif
if image_ratio == 'original'
assign image_ratio = product.featured_image.aspect_ratio | default: '1/1'
endif
if show_vendor == null
assign show_vendor = settings.show_vendor
endif
if show_desc == null
assign show_desc = true
endif
assign sold_out = false
if product.available == false
assign sold_out = true
endif
assign discount = ''
assign compare_at_price = product.compare_at_price
assign price = product.price
assign on_sale = false
if compare_at_price > price
assign on_sale = true
assign discount = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price
endif
assign show_on_sale_badge = false
if settings.on_sale_badge != 'hide' and on_sale
assign show_on_sale_badge = true
endif
assign quick_add_text = 'products.product.quick_add' | t
unless product.has_only_default_variant
capture quick_add_text
render 'new-locale', key: 'products.product.select_options'
endcapture
endunless
assign sold_number = product.metafields.foxkit.sold_number
assign selected_variant = product.selected_or_first_available_variant
if product.available
assign variant_id = product.first_available_variant.id
else
assign variant_id = product.selected_or_first_available_variant.id
endif
assign selected_variant_id = ''
if section.settings.change_product_variant_on_fitlering
assign variant_id = product.selected_or_first_available_variant.id
assign selected_variant_id = product.selected_variant.id
endif
if pcard_alignment == null
assign pcard_alignment = settings.pcard_alignment
endif
assign pcard_default_image = settings.pcard_default_image
if image_ratio == null or image_ratio == blank
assign image_ratio = settings.pcard_image_ratio | default: '1/1'
endif
if show_cart_button == null
assign show_cart_button = settings.show_cart_button
endif
if show_quickview_button == null
assign show_quickview_button = settings.show_quickview_button
endif
if show_wishlist_button == null
assign show_wishlist_button = settings.show_wishlist_button
endif
if show_compare_button == null
assign show_compare_button = settings.show_compare_button
endif
assign preview_image = product.media[0].preview_image
if section.settings.change_product_variant_on_fitlering == true and product.selected_variant.image != null
assign preview_image = product.selected_variant.image
endif
if image_ratio == 'original'
assign image_ratio = product.media[0].aspect_ratio | default: '1/1'
endif
assign second_image = ''
if settings.show_second_img and product.images.size > 1 and product.images[1] != blank
assign second_image = product.images[1]
endif
assign product_card_classes = 'm-product-card m-product-card--style-1'
if sold_out
assign product_card_classes = product_card_classes | append: ' m-product-card--soldout'
endif
if on_sale
assign product_card_classes = product_card_classes | append: ' m-product-card--onsale'
endif
if settings.show_second_img and second_image != blank
assign product_card_classes = product_card_classes | append: ' m-product-card--show-second-img'
endif
assign product_url = product.url
if remove_params
assign product_url = product.url | split: '?' | first
endif
assign firstMediaType = product.media.first.media_type
assign show_video = false
if settings.pcard_show_video and firstMediaType == 'video'
assign show_video = true
endif
%}
{%- if column_wrapper -%}{%- endif -%}
{% if preview_image != blank or firstMediaType == 'video' %}
{% unless show_video %}
{%- liquid
assign asp_rat = image_ratio | default: preview_image.aspect_ratio
if asp_rat == 'original'
assign asp_rat = preview_image.aspect_ratio
endif
assign alt = alt | default: preview_image.alt | escape
-%}
{%- capture sizes -%}(min-width: {{ settings.container_width }}px) {{ settings.container_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2){%- endcapture -%}
{%- if second_image != blank -%}
{%- liquid
assign asp_rat = image_ratio | default: second_image.aspect_ratio
if asp_rat == 'original'
assign asp_rat = second_image.aspect_ratio
endif
assign alt = alt | default: second_image.alt | escape
-%}
{%- capture sizes -%}(min-width: {{ settings.container_width }}px) {{ settings.container_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2){%- endcapture -%}
{%- endif -%}
{% else %}
{% endunless %}
{% else %}
{% if pcard_default_image != blank %}
{%- liquid
assign asp_rat = image_ratio | default: pcard_default_image.aspect_ratio
if asp_rat == 'original'
assign asp_rat = pcard_default_image.aspect_ratio
endif
assign alt = alt | default: pcard_default_image.alt | escape
-%}
{%- capture sizes -%}(min-width: {{ settings.container_width }}px) {{ settings.container_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2){%- endcapture -%}
{% else %}
{{ 'product-1' | placeholder_svg_tag: 'm-placeholder-svg' }}
{% endif %}
{% endif %}
{% if settings.show_badge_sale %}
{% for tag in product.tags %}
{% if tag contains 'tag__' %}
{%- liquid
assign tag_content = tag | split: '__' | last
assign type = tag_content | split: '_' | first
assign tag_name = tag_content | split: '_' | last
assign color_scheme_class = 'm-gradient m-color-'
case type
when 'sale':
assign color_scheme_class = color_scheme_class | append: settings.sale_badge_color_scheme
when 'new':
assign color_scheme_class = color_scheme_class | append: settings.new_badge_color_scheme
when 'hot':
assign color_scheme_class = color_scheme_class | append: settings.hot_badge_color_scheme
endcase
-%}
{{- tag_name -}}
{% endif %}
{% endfor %}
{% endif %}
{% assign custom_badge_class = 'm-product-card__tag-name m-product-tag m-product-tag--preorder m-gradient m-color-'
| append: settings.preorder_badge_color_scheme
%}
{% capture foxkit_preorder_badge %}{% render 'foxkit-preorder-badge', product: product, static: true, custom_class: custom_badge_class %}{% endcapture %}
{% unless foxkit_preorder_badge contains 'Liquid error' %}
{{ foxkit_preorder_badge }}
{% endunless %}
{% if show_on_sale_badge %}
{%- if settings.on_sale_badge == 'show_text' -%}
{{ 'products.product.on_sale' | t }}
{%- elsif settings.on_sale_badge == 'show_percentage' -%}
{{ discount | append: '%' | prepend: '-' }}
{%- endif -%}
{% endif %}
{%- if settings.show_badge_soldout -%}
{{- 'products.product.sold_out' | t -}}
{%- endif -%}
{%- if show_quickview_button or show_wishlist_button or show_compare_button or show_cart_button -%}
{% liquid
assign tooltips = 'compare,quickview'
assign tooltip_items = tooltips | split: ','
if show_cart_button
render 'tooltip', type: 'add-to-cart', section: section, product: product, class_name: 'm-tooltip--top m-product-card__atc-button'
endif
%}
{%- if show_wishlist_button -%}
{% assign wishlist_app = settings.wishlist_app %}
{% if wishlist_app == 'growave' %}
{% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %}
{% unless the_snippet_fave_icon contains 'Liquid error' %}
{{ the_snippet_fave_icon }}
{% else %}
{% render 'mm-ssw-widget-faveicon' with product.id %}
{% endunless %}
{{ 'products.product.add_to_wishlist' | t }}
{% else %}
{% liquid
render 'tooltip', type: 'wishlist', product: product, class_name: 'm-tooltip--left'
%}
{% endif %}
{%- endif -%}
{%- for tooltip in tooltip_items -%}
{%- assign settings_key = 'show_' | append: tooltip | append: '_button' | replace: 'add-to-cart', 'cart' -%}
{%- if [settings_key] -%}
{% render 'tooltip', type: tooltip, section: section, product: product, class_name: 'm-tooltip--left' %}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{% liquid
assign metafields_time = product.metafields.global.minimog_countdown
if settings.show_countdown and metafields_time != blank
render 'countdown-timer', time: metafields_time, separator: false, short_label: true, extra_classes: 'm-product-card__countdown m:hidden'
endif
%}
{%- if sold_out == false -%}
{% render 'product-card-quick-add-btn',
product: product,
quick_add_text: quick_add_text,
section: section,
button_style: 'white'
%}
{% endif %}
{%- if show_vendor -%}
{{ product.vendor }}
{%- endif -%}
{% if show_title == true %}
###
{{ product.title }}
{% endif %}
{% if settings.show_review_badge %}
{% render 'product-reviews-app__badge', product: product %}
{% endif %}
{% render 'product-prices', product: product, is_product_card: true %}
{% if product.has_only_default_variant == false and show_variant_options %}
{% render 'product-card-option',
product: product,
show_variant_options: show_variant_options,
pcard_alignment: pcard_alignment
%}
{% endif %}
{%- if show_inventory and selected_variant.inventory_management != blank -%}
{%- liquid
assign inventory_threshold = settings.low_inventory_threshold
assign show_inventory_count = settings.show_inventory_count
assign inventory_visibility = settings.inventory_visibility
assign inventory_hide_backordered = settings.inventory_hide_backordered
assign total = 0
assign inventory_policy = ''
for variant in product.variants
if variant.inventory_quantity > 0
assign total = total | plus: variant.inventory_quantity
endif
if variant.inventory_policy == 'continue'
assign inventory_policy = 'continue'
endif
endfor
if total <= 0
if inventory_policy == 'continue'
assign status = 'backordered'
elsif product.available
assign status = 'instock'
else
assign status = 'outofstock'
endif
elsif total <= inventory_threshold
assign status = 'low'
else
assign status = 'normal'
endif
assign show = false
if inventory_visibility == 'always'
assign show = true
if status == 'backordered' and inventory_hide_backordered
assign show = false
endif
else
if status == 'low'
assign show = true
endif
endif
if status == 'outofstock'
assign show = false
endif
assign show_inventory_number = true
if show_inventory_count == 'never' or total <= 0 or show_inventory_count == 'low_inventory' and status != 'low'
assign show_inventory_number = false
endif
-%}
{%- if show == true -%}
{% liquid
case status
when 'backordered'
render 'new-locale', key: 'products.product.backordered'
when 'low'
if show_inventory_number
render 'new-locale', key: 'products.product.inventory_low_quantity_html', param: '{{ quantity }}', value: total
else
render 'new-locale', key: 'products.product.low_stock'
endif
else
if show_inventory_number
render 'new-locale', key: 'products.product.inventory_quantity_html', param: '{{ quantity }}', value: total
else
echo 'products.product.in_stock' | t
endif
endcase
%}
{%- endif -%}
{%- endif -%}
{%- if show_desc -%}
{{ product.description | strip_html | truncatewords: 15, '...' }}
{%- endif -%}
{%- if show_quickview_button or show_wishlist_button or show_compare_button or show_cart_button -%}
{% render 'product-card-quick-add-btn', product: product, quick_add_text: quick_add_text, section: section %}
{% liquid
assign tooltips = 'compare,quickview,'
assign tooltip_items = tooltips | split: ','
if show_cart_button
render 'tooltip', type: 'add-to-cart', section: section, product: product, class_name: 'm-tooltip--top m-product-card__atc-button'
endif
%}
{%- if show_wishlist_button -%}
{% assign wishlist_app = settings.wishlist_app %}
{% if wishlist_app == 'growave' %}
{% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %}
{% unless the_snippet_fave_icon contains 'Liquid error' %}
{{ the_snippet_fave_icon }}
{% else %}
{% render 'mm-ssw-widget-faveicon' with product.id %}
{% endunless %}
{{ 'products.product.add_to_wishlist' | t }}
{% else %}
{% liquid
render 'tooltip', type: 'wishlist', product: product, class_name: 'm-tooltip--top'
%}
{% endif %}
{%- endif -%}
{%- for tooltip in tooltip_items -%}
{%- assign settings_key = 'show_'
| append: tooltip
| append: '_button'
| replace: 'add-to-cart', 'cart'
-%}
{%- if [settings_key] -%}
{% render 'tooltip', type: tooltip, section: section, product: product, class_name: 'm-tooltip--top' %}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- if column_wrapper -%}
{%- endif -%}