FROM CACHE - en_header
Shopify Design
Shopify themes, liquid, logos, and UX
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
- Shopify Community
- :
- Shopify Discussion
- :
- Shopify Design
- :
- How to show product price range for variant in collection view ???
Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
How to show product price range for variant in collection view ???
How to show product price range for variant in collection view ???
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
12-10-2024
02:40 AM
How to show product price range for variant in collection view ???|
like $5 - $10
Website - https://general-24-store.myshopify.com/
password - 123
Labels:
- Labels:
-
Collection Page
-
CSS
-
Customizations
Replies 13 (13)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
12-10-2024
02:55 AM
Hi @liteleraja,
Please send me the code of card-product.liquid file, I will check it for you
☕ Coffee tips fuels my dedication.
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
12-10-2024
03:02 AM
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
-%}
<div class="m:column{% if enable_slider %} swiper-slide{% endif %}">
<div
class="m-collection-card m-collection-card--{{ card_style }}{{ classes }}"
{% if animated %}
data-cascade
style="--animation-order: {{ index }};"
{% endif %}
>
<div class="m-collection-card__inner{% if hover and card_style == 'inside' %} {{ hover }}{% endif %}">
{% case card_style %}
{% when 'inside' %}
<a
href="{{ collection.url | default: "#" }}"
class="m-collection-card__image m:block m:w-full{% if image_rounded %} m-collection-card__image-rounded m:rounded-full{% endif %}"
aria-label="{{ collection.title | default: "collection" }}"
>
<div class="m-hover-box__wrapper">
{% if image != blank %}
{% render 'responsive-image', image: image, image_class: 'm:w-full', aspect_ratio: aspect_ratio %}
{% else %}
<div style="--aspect-ratio: 1/1;">
{{ placeholder_image | placeholder_svg_tag: 'm-placeholder-svg' }}
</div>
{% endif %}
</div>
</a>
<div class="m-collection-card__info m:text-{{ text_alignment }}">
<h3 class="m-collection-card__title">
<a
class="m-collection-card__link m:block"
href="{{ collection.url | default: "#" }}"
>
{{ title | default: collection.title }}
</a>
</h3>
{% if show_product_count == true %}
<p class="m-collection-card__product-count">
{{ 'collections.general.collection_items' | t: title: all_products_count }}
</p>
{% endif %}
<a
class="m-button m-button--white m:justify-center m:items-center"
href="{{ collection.url }}"
aria-label="{{ title | default: collection.title }}"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="13"
fill="none"
viewBox="0 0 14 13"
>
<path fill="currentColor" d="M6.78594.789062c.16406-.145833.31901-.145833.46484 0L12.9656 6.53125c.1641.14583.1641.29167 0 .4375L7.25078 12.7109c-.14583.1459-.30078.1459-.46484 0l-.54688-.5468c-.05469-.0547-.08203-.1276-.08203-.2188 0-.0911.02734-.1732.08203-.2461l4.23824-4.23826H1.15312c-.218745 0-.32812-.10938-.32812-.32813v-.76562c0-.21875.109375-.32813.32812-.32813h9.32418L6.23906 1.80078c-.14583-.16406-.14583-.31901 0-.46484l.54688-.546878z"/>
</svg>
</a>
</div>
{% when 'inside-2' %}
<a
href="{{ collection.url | default: "#" }}"
class="m-collection-card__image m:block m:w-full{% if image_rounded %} m-collection-card__image-rounded m:rounded-full{% endif %}"
aria-label="{{ collection.title | default: "collection" }}"
>
<div class="m-hover-box__wrapper">
{% if image != blank %}
{% render 'responsive-image', image: image, image_class: 'm:w-full', aspect_ratio: aspect_ratio %}
{% else %}
<div style="--aspect-ratio: 1/1;">
{{ placeholder_image | placeholder_svg_tag: 'm-placeholder-svg' }}
</div>
{% endif %}
</div>
</a>
<div class="m-collection-card__info m:text-{{ text_alignment }}">
<h3 class="m-collection-card__title m:visually-hidden">
{{ title | default: collection.title }}
</h3>
<a
class="m-button m-button--white m:justify-center m:items-center"
href="{{ collection.url }}"
>
{{ title | default: collection.title }}
</a>
</div>
{% when 'standard' %}
<a
href="{{ collection.url | default: "#" }}"
class="m-collection-card__image m:block m:w-full{% if image_rounded %} m-collection-card__image-rounded m:rounded-full{% endif %}{% if hover %} {{ hover }}{% endif %}"
aria-label="{{ collection.title | default: "collection" }}"
>
<div class="m-hover-box__wrapper">
{% if image != blank %}
{% render 'responsive-image', image: image, image_class: 'm:w-full', aspect_ratio: aspect_ratio %}
{% else %}
<div style="--aspect-ratio: 1/1;">
{{ placeholder_image | placeholder_svg_tag: 'm-placeholder-svg' }}
</div>
{% endif %}
</div>
</a>
<div class="m-collection-card__info m:text-{{ text_alignment }}">
<h3 class="m-collection-card__title">
<a
class="m-collection-card__link m:block"
href="{{ collection.url | default: "#" }}"
>
{{ title | default: collection.title }}
{% if show_product_count == true and section.settings.count_inline_title == true %}
<sup>{{ all_products_count }}</sup>
{% endif %}
</a>
</h3>
{% if show_product_count == true and section.settings.count_inline_title == false %}
<p class="m-collection-card__product-count">
{{ 'collections.general.collection_items' | t: title: all_products_count }}
</p>
{% endif %}
</div>
{% endcase %}
</div>
</div>
</div>
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
12-10-2024
03:08 AM
Hi @liteleraja,
No, it could be product-card.liquid file 😊
☕ Coffee tips fuels my dedication.
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
12-10-2024
03:11 AM
There are 5 product-card.liquid file . Which one should I send you ?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
12-10-2024
03:14 AM
Hi @liteleraja,
I'm not sure, can I send you a collaborator invitation? it will help me search and change things for the better
☕ Coffee tips fuels my dedication.
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
12-10-2024
03:17 AM
I am using product-card-1.liquid
below is the code
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
12-10-2024
03:50 AM
{% 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 -%}<div class="m:column">{%- endif -%}
<div
class="{{ product_card_classes }}{% if animated %} m-scroll-trigger animate--{{ animation_effect }}{% endif %}"
data-view="card"
{% if sold_number != blank %}
data-sold-number="{{ sold_number }}"
{% endif %}
data-product-id="{{ product.id }}"
{% if animated %}
data-cascade
style="--animation-order: {{ index }};"
{% endif %}
>
<div class="m-product-card__media">
<a
class="m-product-card__link m:block m:w-full"
href="{{ product_url }}"
aria-label="{{ product.title | default: 'product title' }}"
>
{% if preview_image != blank or firstMediaType == 'video' %}
{% unless show_video %}
<div class="m-product-card__main-image">
{%- 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 -%}
<responsive-image class="m-image" style="--aspect-ratio: {{ asp_rat }}">
{{
preview_image
| image_url: width: 1100
| image_tag:
loading: 'lazy',
class: 'm:w-full m:h-full',
alt: alt,
sizes: sizes,
widths: '165, 360, 535, 750, 940, 1100'
}}
</responsive-image>
</div>
{%- if second_image != blank -%}
<div class="m-product-card__hover-image">
{%- 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 -%}
<responsive-image class="m-image" style="--aspect-ratio: {{ asp_rat }}">
{{
second_image
| image_url: width: 1100
| image_tag:
loading: 'lazy',
class: 'm:w-full m:h-full',
alt: alt,
sizes: sizes,
widths: '165, 360, 535, 750, 940, 1100'
}}
</responsive-image>
</div>
{%- endif -%}
{% else %}
<m-video-component
class="m:block m-product-card__video"
data-type="mp4"
style="--aspect-ratio: {{ image_ratio }}"
>
{{
product.media.first
| media_tag:
image_size: '1500px',
autoplay: true,
loop: true,
controls: false,
muted: true,
playsinline: true
}}
</m-video-component>
{% 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 -%}
<responsive-image class="m-image" style="--aspect-ratio: {{ asp_rat }}">
{{
pcard_default_image
| image_url: width: 1100
| image_tag:
loading: 'lazy',
class: 'm:w-full m:h-full',
alt: alt,
sizes: sizes,
widths: '165, 360, 535, 750, 940, 1100'
}}
</responsive-image>
{% else %}
<div style="--aspect-ratio: {{ image_ratio }}">
{{ 'product-1' | placeholder_svg_tag: 'm-placeholder-svg' }}
</div>
{% endif %}
{% endif %}
</a>
<div class="m-product-card__tags">
{% 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
-%}
<span class="m-product-card__tag-name m-product-tag m-product-tag--{{ type }} {{ color_scheme_class }}">
{{- tag_name -}}
</span>
{% 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 %}
<span class="m-product-card__tag-name m-product-tag m-product-tag--sale m-gradient m-color-{{ settings.sale_badge_color_scheme }}">
{%- if settings.on_sale_badge == 'show_text' -%}
{{ 'products.product.on_sale' | t }}
{%- elsif settings.on_sale_badge == 'show_percentage' -%}
{{ discount | append: '%' | prepend: '-' }}
{%- endif -%}
</span>
{% endif %}
</div>
{%- if settings.show_badge_soldout -%}
<span
class="m-product-tag m-product-tag--soldout m-gradient m-color-{{ settings.soldout_badge_color_scheme }}"
{% unless sold_out %}
style="display: none;"
{% endunless %}
>
{{- 'products.product.sold_out' | t -}}
</span>
{%- endif -%}
{%- if show_quickview_button or show_wishlist_button or show_compare_button or show_cart_button -%}
<div class="m-product-card__action m-product-card__action--top m-product-card__addons m:display-flex">
{% 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' %}
<div class="m-tooltip m-wishlist-button m-button--icon m-tooltip--style-1 m-tooltip--left">
<span class="m-tooltip-icon m:block">
{% 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 %}
</span>
<div class="m-tooltip__content " data-revert-text="">
{{ 'products.product.add_to_wishlist' | t }}
</div>
</div>
{% 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 -%}
</div>
{%- 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 -%}
<div class="m-product-card__action m:hidden lg:m:block">
{% render 'product-card-quick-add-btn',
product: product,
quick_add_text: quick_add_text,
section: section,
button_style: 'white'
%}
</div>
{% endif %}
</div>
<div class="m-product-card__content m:text-{{ pcard_alignment }}">
<div class="m-product-card__info">
{%- if show_vendor -%}
<span class="m-product-card__vendor">{{ product.vendor }}</span>
{%- endif -%}
{% if show_title == true %}
<h3 class="m-product-card__title">
<a
href="{{ product_url }}"
class="m-product-card__name{% if settings.uppercase_prd_name %} m:uppercase{% endif %}"
>
{{ product.title }}
</a>
</h3>
{% endif %}
{% if settings.show_review_badge %}
<div class="m-product-card__reviews m:text-color-body">
{% render 'product-reviews-app__badge', product: product %}
</div>
{% endif %}
<div class="m-product-card__price">
{% render 'product-prices', product: product, is_product_card: true %}
</div>
{% 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 -%}
<div class="m-product-inventory m-product-card__inventory m:text-sm" data-status="{{ status }}">
<div class="m-product-inventory__inner">
<span class="m-product-inventory__text">
<span class="m-product-inventory__pin"></span>
<span class="m-product-inventory__status">
{% 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
%}
</span>
</span>
</div>
</div>
{%- endif -%}
{%- endif -%}
</div>
<div class="m-product-card__content-footer">
{%- if show_desc -%}
<div class="m-product-card__description">
{{ product.description | strip_html | truncatewords: 15, '...' }}
</div>
{%- endif -%}
{%- if show_quickview_button or show_wishlist_button or show_compare_button or show_cart_button -%}
<div class="m-product-card__action">
{% render 'product-card-quick-add-btn', product: product, quick_add_text: quick_add_text, section: section %}
<div class="m-product-card__action-icons">
{% 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' %}
<div class="m-tooltip m-wishlist-button m-button--icon m-tooltip--style-1 m-tooltip--top">
<span class="m-tooltip-icon m:block">
{% 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 %}
</span>
<div class="m-tooltip__content " data-revert-text="">
{{ 'products.product.add_to_wishlist' | t }}
</div>
</div>
{% 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 -%}
</div>
</div>
{%- endif -%}
</div>
</div>
<input hidden name="id" required value="{{ variant_id }}" data-selected-variant="{{ selected_variant_id }}">
</div>
{%- if column_wrapper -%}</div>{%- endif -%}- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
12-10-2024
03:14 AM
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 -%}<div class="m:column">{%- endif -%}
<div
class="{{ product_card_classes }}{% if animated %} m-scroll-trigger animate--{{ animation_effect }}{% endif %}"
data-view="card"
{% if sold_number != blank %}
data-sold-number="{{ sold_number }}"
{% endif %}
data-product-id="{{ product.id }}"
{% if animated %}
data-cascade
style="--animation-order: {{ index }};"
{% endif %}
>
<div class="m-product-card__media">
<a
class="m-product-card__link m:block m:w-full"
href="{{ product_url }}"
aria-label="{{ product.title | default: 'product title' }}"
>
{% if preview_image != blank or firstMediaType == 'video' %}
{% unless show_video %}
<div class="m-product-card__main-image">
{%- 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 -%}
<responsive-image class="m-image" style="--aspect-ratio: {{ asp_rat }}">
{{
preview_image
| image_url: width: 1100
| image_tag:
loading: 'lazy',
class: 'm:w-full m:h-full',
alt: alt,
sizes: sizes,
widths: '165, 360, 535, 750, 940, 1100'
}}
</responsive-image>
</div>
{%- if second_image != blank -%}
<div class="m-product-card__hover-image">
{%- 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 -%}
<responsive-image class="m-image" style="--aspect-ratio: {{ asp_rat }}">
{{
second_image
| image_url: width: 1100
| image_tag:
loading: 'lazy',
class: 'm:w-full m:h-full',
alt: alt,
sizes: sizes,
widths: '165, 360, 535, 750, 940, 1100'
}}
</responsive-image>
</div>
{%- endif -%}
{% else %}
<m-video-component
class="m:block m-product-card__video"
data-type="mp4"
style="--aspect-ratio: {{ image_ratio }}"
>
{{
product.media.first
| media_tag:
image_size: '1500px',
autoplay: true,
loop: true,
controls: false,
muted: true,
playsinline: true
}}
</m-video-component>
{% 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 -%}
<responsive-image class="m-image" style="--aspect-ratio: {{ asp_rat }}">
{{
pcard_default_image
| image_url: width: 1100
| image_tag:
loading: 'lazy',
class: 'm:w-full m:h-full',
alt: alt,
sizes: sizes,
widths: '165, 360, 535, 750, 940, 1100'
}}
</responsive-image>
{% else %}
<div style="--aspect-ratio: {{ image_ratio }}">
{{ 'product-1' | placeholder_svg_tag: 'm-placeholder-svg' }}
</div>
{% endif %}
{% endif %}
</a>
<div class="m-product-card__tags">
{% 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
-%}
<span class="m-product-card__tag-name m-product-tag m-product-tag--{{ type }} {{ color_scheme_class }}">
{{- tag_name -}}
</span>
{% 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 %}
<span class="m-product-card__tag-name m-product-tag m-product-tag--sale m-gradient m-color-{{ settings.sale_badge_color_scheme }}">
{%- if settings.on_sale_badge == 'show_text' -%}
{{ 'products.product.on_sale' | t }}
{%- elsif settings.on_sale_badge == 'show_percentage' -%}
{{ discount | append: '%' | prepend: '-' }}
{%- endif -%}
</span>
{% endif %}
</div>
{%- if settings.show_badge_soldout -%}
<span
class="m-product-tag m-product-tag--soldout m-gradient m-color-{{ settings.soldout_badge_color_scheme }}"
{% unless sold_out %}
style="display: none;"
{% endunless %}
>
{{- 'products.product.sold_out' | t -}}
</span>
{%- endif -%}
{%- if show_quickview_button or show_wishlist_button or show_compare_button or show_cart_button -%}
<div class="m-product-card__action m-product-card__action--top m-product-card__addons m:display-flex">
{% 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' %}
<div class="m-tooltip m-wishlist-button m-button--icon m-tooltip--style-1 m-tooltip--left">
<span class="m-tooltip-icon m:block">
{% 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 %}
</span>
<div class="m-tooltip__content " data-revert-text="">
{{ 'products.product.add_to_wishlist' | t }}
</div>
</div>
{% 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 -%}
</div>
{%- 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 -%}
<div class="m-product-card__action m:hidden lg:m:block">
{% render 'product-card-quick-add-btn',
product: product,
quick_add_text: quick_add_text,
section: section,
button_style: 'white'
%}
</div>
{% endif %}
</div>
<div class="m-product-card__content m:text-{{ pcard_alignment }}">
<div class="m-product-card__info">
{%- if show_vendor -%}
<span class="m-product-card__vendor">{{ product.vendor }}</span>
{%- endif -%}
{% if show_title == true %}
<h3 class="m-product-card__title">
<a
href="{{ product_url }}"
class="m-product-card__name{% if settings.uppercase_prd_name %} m:uppercase{% endif %}"
>
{{ product.title }}
</a>
</h3>
{% endif %}
{% if settings.show_review_badge %}
<div class="m-product-card__reviews m:text-color-body">
{% render 'product-reviews-app__badge', product: product %}
</div>
{% endif %}
<div class="m-product-card__price">
{% render 'product-prices', product: product, is_product_card: true %}
</div>
{% 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 -%}
<div class="m-product-inventory m-product-card__inventory m:text-sm" data-status="{{ status }}">
<div class="m-product-inventory__inner">
<span class="m-product-inventory__text">
<span class="m-product-inventory__pin"></span>
<span class="m-product-inventory__status">
{% 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
%}
</span>
</span>
</div>
</div>
{%- endif -%}
{%- endif -%}
</div>
<div class="m-product-card__content-footer">
{%- if show_desc -%}
<div class="m-product-card__description">
{{ product.description | strip_html | truncatewords: 15, '...' }}
</div>
{%- endif -%}
{%- if show_quickview_button or show_wishlist_button or show_compare_button or show_cart_button -%}
<div class="m-product-card__action">
{% render 'product-card-quick-add-btn', product: product, quick_add_text: quick_add_text, section: section %}
<div class="m-product-card__action-icons">
{% 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' %}
<div class="m-tooltip m-wishlist-button m-button--icon m-tooltip--style-1 m-tooltip--top">
<span class="m-tooltip-icon m:block">
{% 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 %}
</span>
<div class="m-tooltip__content " data-revert-text="">
{{ 'products.product.add_to_wishlist' | t }}
</div>
</div>
{% 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 -%}
</div>
</div>
{%- endif -%}
</div>
</div>
<input hidden name="id" required value="{{ variant_id }}" data-selected-variant="{{ selected_variant_id }}">
</div>
{%- if column_wrapper -%}</div>{%- endif -%}
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
12-10-2024
04:55 AM
Hi @liteleraja,
The code will be in the product-prices.liquid file, can you send me the code?
☕ Coffee tips fuels my dedication.
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
12-10-2024
06:10 AM
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 -%}<div class="m:column">{%- endif -%}
<div
class="{{ product_card_classes }}{% if animated %} m-scroll-trigger animate--{{ animation_effect }}{% endif %}"
data-view="card"
{% if sold_number != blank %}
data-sold-number="{{ sold_number }}"
{% endif %}
data-product-id="{{ product.id }}"
{% if animated %}
data-cascade
style="--animation-order: {{ index }};"
{% endif %}
>
<div class="m-product-card__media">
<a
class="m-product-card__link m:block m:w-full"
href="{{ product_url }}"
aria-label="{{ product.title | default: 'product title' }}"
>
{% if preview_image != blank or firstMediaType == 'video' %}
{% unless show_video %}
<div class="m-product-card__main-image">
{%- 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 -%}
<responsive-image class="m-image" style="--aspect-ratio: {{ asp_rat }}">
{{
preview_image
| image_url: width: 1100
| image_tag:
loading: 'lazy',
class: 'm:w-full m:h-full',
alt: alt,
sizes: sizes,
widths: '165, 360, 535, 750, 940, 1100'
}}
</responsive-image>
</div>
{%- if second_image != blank -%}
<div class="m-product-card__hover-image">
{%- 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 -%}
<responsive-image class="m-image" style="--aspect-ratio: {{ asp_rat }}">
{{
second_image
| image_url: width: 1100
| image_tag:
loading: 'lazy',
class: 'm:w-full m:h-full',
alt: alt,
sizes: sizes,
widths: '165, 360, 535, 750, 940, 1100'
}}
</responsive-image>
</div>
{%- endif -%}
{% else %}
<m-video-component
class="m:block m-product-card__video"
data-type="mp4"
style="--aspect-ratio: {{ image_ratio }}"
>
{{
product.media.first
| media_tag:
image_size: '1500px',
autoplay: true,
loop: true,
controls: false,
muted: true,
playsinline: true
}}
</m-video-component>
{% 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 -%}
<responsive-image class="m-image" style="--aspect-ratio: {{ asp_rat }}">
{{
pcard_default_image
| image_url: width: 1100
| image_tag:
loading: 'lazy',
class: 'm:w-full m:h-full',
alt: alt,
sizes: sizes,
widths: '165, 360, 535, 750, 940, 1100'
}}
</responsive-image>
{% else %}
<div style="--aspect-ratio: {{ image_ratio }}">
{{ 'product-1' | placeholder_svg_tag: 'm-placeholder-svg' }}
</div>
{% endif %}
{% endif %}
</a>
<div class="m-product-card__tags">
{% 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
-%}
<span class="m-product-card__tag-name m-product-tag m-product-tag--{{ type }} {{ color_scheme_class }}">
{{- tag_name -}}
</span>
{% 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 %}
<span class="m-product-card__tag-name m-product-tag m-product-tag--sale m-gradient m-color-{{ settings.sale_badge_color_scheme }}">
{%- if settings.on_sale_badge == 'show_text' -%}
{{ 'products.product.on_sale' | t }}
{%- elsif settings.on_sale_badge == 'show_percentage' -%}
{{ discount | append: '%' | prepend: '-' }}
{%- endif -%}
</span>
{% endif %}
</div>
{%- if settings.show_badge_soldout -%}
<span
class="m-product-tag m-product-tag--soldout m-gradient m-color-{{ settings.soldout_badge_color_scheme }}"
{% unless sold_out %}
style="display: none;"
{% endunless %}
>
{{- 'products.product.sold_out' | t -}}
</span>
{%- endif -%}
{%- if show_quickview_button or show_wishlist_button or show_compare_button or show_cart_button -%}
<div class="m-product-card__action m-product-card__action--top m-product-card__addons m:display-flex">
{% 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' %}
<div class="m-tooltip m-wishlist-button m-button--icon m-tooltip--style-1 m-tooltip--left">
<span class="m-tooltip-icon m:block">
{% 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 %}
</span>
<div class="m-tooltip__content " data-revert-text="">
{{ 'products.product.add_to_wishlist' | t }}
</div>
</div>
{% 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 -%}
</div>
{%- 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 -%}
<div class="m-product-card__action m:hidden lg:m:block">
{% render 'product-card-quick-add-btn',
product: product,
quick_add_text: quick_add_text,
section: section,
button_style: 'white'
%}
</div>
{% endif %}
</div>
<div class="m-product-card__content m:text-{{ pcard_alignment }}">
<div class="m-product-card__info">
{%- if show_vendor -%}
<span class="m-product-card__vendor">{{ product.vendor }}</span>
{%- endif -%}
{% if show_title == true %}
<h3 class="m-product-card__title">
<a
href="{{ product_url }}"
class="m-product-card__name{% if settings.uppercase_prd_name %} m:uppercase{% endif %}"
>
{{ product.title }}
</a>
</h3>
{% endif %}
{% if settings.show_review_badge %}
<div class="m-product-card__reviews m:text-color-body">
{% render 'product-reviews-app__badge', product: product %}
</div>
{% endif %}
<div class="m-product-card__price">
{% render 'product-prices', product: product, is_product_card: true %}
</div>
{% 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 -%}
<div class="m-product-inventory m-product-card__inventory m:text-sm" data-status="{{ status }}">
<div class="m-product-inventory__inner">
<span class="m-product-inventory__text">
<span class="m-product-inventory__pin"></span>
<span class="m-product-inventory__status">
{% 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
%}
</span>
</span>
</div>
</div>
{%- endif -%}
{%- endif -%}
</div>
<div class="m-product-card__content-footer">
{%- if show_desc -%}
<div class="m-product-card__description">
{{ product.description | strip_html | truncatewords: 15, '...' }}
</div>
{%- endif -%}
{%- if show_quickview_button or show_wishlist_button or show_compare_button or show_cart_button -%}
<div class="m-product-card__action">
{% render 'product-card-quick-add-btn', product: product, quick_add_text: quick_add_text, section: section %}
<div class="m-product-card__action-icons">
{% 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' %}
<div class="m-tooltip m-wishlist-button m-button--icon m-tooltip--style-1 m-tooltip--top">
<span class="m-tooltip-icon m:block">
{% 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 %}
</span>
<div class="m-tooltip__content " data-revert-text="">
{{ 'products.product.add_to_wishlist' | t }}
</div>
</div>
{% 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 -%}
</div>
</div>
{%- endif -%}
</div>
</div>
<input hidden name="id" required value="{{ variant_id }}" data-selected-variant="{{ selected_variant_id }}">
</div>
{%- if column_wrapper -%}</div>{%- endif -%}
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
12-10-2024
03:33 AM
Hello, @liteleraja
Can you please share screen shot and specify where u want on actual place ?
Thank you!
Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
12-10-2024
04:07 AM
on collection page products
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
12-10-2024
04:06 AM
on collection page products
Community Blog Articles
How to drive more onsite engagement with promotions, loyalty, and recommend...
Discover how to increase customer engagement on your store with articles from Shopify A...
By Jacqui Apr 23, 2025
Members of March '25
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025
The power of automation: New Shopify Flow fundamentals learning path
Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025