Move sale badge to somewhere that doesn’t cut off image

Clearskinhouse · ‎08-15-2024

I want to move the sale badge to somewhere that doesn’t cut off the image. Theme is focal.

see website https://clearskinhouse.com.au/collections/aspect

namphan · ‎08-15-2024

Hi @Clearskinhouse,

What option do you want it to display in:

- Option 1:

- Option 2:

- Option 3:

☕ 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

Clearskinhouse · ‎08-15-2024

Option 3 please

namphan · ‎08-15-2024

Hi @Clearskinhouse,

Please send me the code of product-item.liquid file or product-card.liquid file. I will check it

☕ 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

Clearskinhouse · ‎08-15-2024

I don’t have either of those files?

namphan · ‎08-15-2024

Hi @Clearskinhouse,

Can you try with card-product.liquid file? or I can send you collaborator invite and change 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

Clearskinhouse · ‎08-15-2024

See code below

Clearskinhouse · ‎08-15-2024

{%- assign color_label_list = 'general.label.color' | t | replace: ', ', ',' | downcase | split: ',' -%}
{%- assign color_white_label = 'general.label.white' | t | downcase -%}
{%- assign quick_buy_icon_name = 'quick-buy-' | append: settings.cart_icon | replace: '_', '-' -%}

{%- if product.url contains '?' -%}
{%- assign product_url_contains_query = true -%}
{%- else -%}
{%- assign product_url_contains_query = false -%}
{%- endif -%}

<product-item class="product-item {% unless product.available %}product-item--sold-out{% endunless %}" {% if reveal %}reveal{% endif %}>
{%- capture product_labels -%}
{%- for tag in product.tags -%}
{%- if tag contains '__label' -%}
<span class="label label--custom{% if tag contains '__label2' %}2{% endif %}">{{ tag | split: ':' | last }}</span>
{%- endif -%}
{%- endfor -%}

{%- unless product.available -%}
<span class="label label--subdued">{{ 'collection.product.sold_out' | t }}</span>
{%- endunless -%}

{%- assign cheapest_variant = product.variants | sort: 'price' | first -%}

{%- if settings.show_discount and product.available and product.price < product.compare_at_price and cheapest_variant.compare_at_price != blank -%}
{%- if settings.discount_mode == 'percentage' -%}
{%- assign savings = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round | append: '%' -%}
{%- else -%}
{%- capture savings -%}{{ product.compare_at_price | minus: product.price | money }}{%- endcapture -%}
{%- endif -%}

<span class="label label--highlight">{{ 'collection.product.discount_html' | t: savings: savings }}</span>
{%- endif -%}
{%- endcapture -%}

<div class="product-item__image-wrapper {% if settings.show_secondary_image and product.media.size > 1 and hide_secondary_image != true %}product-item__image-wrapper--multiple{% endif %}">
{%- if product_labels != blank and reduced_content != true -%}
<div class="product-item__label-list label-list">
{{- product_labels -}}
</div>
{%- endif -%}

{%- if settings.product_color_display == 'swatch' -%}
{%- assign featured_media = product.variants | map: 'featured_media' -%}

{%- for media in featured_media -%}
{%- unless media == product.featured_media -%}
<img class="product-item__primary-image" hidden data-media-id="{{ media.id | escape }}" loading="lazy" sizes="{{ sizes_attribute }}" {% render 'image-attributes', image: media, sizes: '200,300,400,500,600,700,800,900,1000,1100,1200' %}>
{%- endunless -%}
{%- endfor -%}
{%- endif -%}

{%- if settings.show_secondary_image and product.media.size > 1 and hide_secondary_image != true -%}
{%- assign next_media = product.media[product.featured_media.position] | default: product.media[1] -%}
<img class="product-item__secondary-image" loading="lazy" sizes="{{ sizes_attribute }}" {% render 'image-attributes', image: next_media, sizes: '200,300,400,500,600,700,800,900,1000,1100,1200' %}>
{%- endif -%}
</a>

{%- if request.page_type != 'password' and settings.product_add_to_cart and product.available and reduced_content != true and show_cta != true -%}
{%- if product.variants.size == 1 -%}
{%- capture form_id -%}product_form_{{ section.id }}_{{ block.id }}_{{ product.id }}_{% increment product_form_index %}{%- endcapture -%}
{%- form 'product', product, data-productid: product.id, is: 'product-form', id: form_id, class: 'product-item__quick-form' -%}
<input type="hidden" name="quantity" value="1">
<input type="hidden" name="id" data-productid="{{ product.id }}" value="{{ product.first_available_variant.id }}">
<button is="loader-button" type="submit" class="button button--outline button--text button--full {% if section.settings.desktop_products_per_row >= 5 %}button--small{% endif %} hidden-touch">{{ 'collection.product.add_to_cart_short' | t }}</button>
<button type="submit" class="product-item__quick-buy-button hidden-no-touch">
<span class="visually-hidden">{{ 'collection.product.add_to_cart_short' | t }}</span>
{%- render 'icon' with quick_buy_icon_name -%}
</button>
{%- endform -%}
{%- else -%}
{%- comment -%}
IMPLEMENTATION NOTE: Depending on the device we show a different icon or open a different mode (either popover or drawer)
{%- endcomment -%}

<div class="product-item__quick-form">
<button is="toggle-button" loader aria-controls="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-drawer" aria-expanded="false" class="button button--outline button--text button--full {% if section.settings.desktop_products_per_row >= 5 %}button--small{% endif %} hidden-touch hidden-phone">{{ 'collection.product.quick_view' | t }}</button>
<button is="toggle-button" aria-controls="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-drawer" aria-expanded="false" class="product-item__quick-buy-button hidden-no-touch hidden-phone">
<span class="visually-hidden">{{ 'collection.product.quick_view' | t }}</span>
{%- render 'icon' with quick_buy_icon_name -%}
</button>

<button is="toggle-button" aria-controls="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-popover" aria-expanded="false" class="product-item__quick-buy-button hidden-tablet-and-up">
<span class="visually-hidden">{{ 'collection.product.quick_view' | t }}</span>
{%- render 'icon' with quick_buy_icon_name -%}
</button>
</div>

<quick-buy-popover id="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-popover" href="{{ product.url }}{% if product_url_contains_query %}&{% else %}?{% endif %}view=quick-buy-popover" class="popover popover--quick-buy hidden-tablet-and-up"></quick-buy-popover>
<quick-buy-drawer id="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-drawer" href="{{ product.url }}{% if product_url_contains_query %}&{% else %}?{% endif %}view=quick-buy-drawer" class="drawer drawer--large drawer--quick-buy hidden-phone"></quick-buy-drawer>
{%- endif -%}
{%- endif -%}
</div>

<div class="product-item__info {% if show_cta %}product-item__info--with-button{% endif %} {% if reduced_font_size %}text--small{% endif %}">
<div class="product-item-meta">
{%- if settings.show_vendor -%}
{%- assign vendor_handle = product.vendor | handle -%}
{%- assign collection_for_vendor = collections[vendor_handle] -%}

{%- unless collection_for_vendor.empty? -%}
<a class="product-item-meta__vendor heading heading--xsmall" href="{{ collection_for_vendor.url }}">{{ product.vendor }}</a>
{%- else -%}
<a class="product-item-meta__vendor heading heading--xsmall" href="{{ product.vendor | url_for_vendor }}">{{ product.vendor }}</a>
{%- endunless -%}
{%- endif -%}

<a href="{{ product.url }}" class="product-item-meta__title">{{ product.title }}</a>

<div class="product-item-meta__price-list-container">
<div class="price-list price-list--centered">
{%- if product.price_varies and product.compare_at_price -%}
{%- assign cheapest_variant = product.variants | sort: 'price' | first -%}

{%- capture price_min -%}
{%- if settings.currency_code_enabled -%}
{{- cheapest_variant.price | money_with_currency -}}
{%- else -%}
{{- cheapest_variant.price | money -}}
{%- endif -%}
{%- endcapture -%}

{%- if cheapest_variant.price < cheapest_variant.compare_at_price -%}
<span class="price price--highlight">
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
{{- 'collection.product.from_price_html' | t: price_min: price_min -}}
</span>

<span class="price price--compare">
<span class="visually-hidden">{{ 'product.general.regular_price' | t }}</span>

{%- if settings.currency_code_enabled -%}
{{- cheapest_variant.compare_at_price | money_with_currency -}}
{%- else -%}
{{- cheapest_variant.compare_at_price | money -}}
{%- endif -%}
</span>
{%- else -%}
<span class="price">
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
{{- 'collection.product.from_price_html' | t: price_min: price_min -}}
</span>
{%- endif -%}
{%- elsif product.price < product.compare_at_price -%}
<span class="price price--highlight">
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>

{%- if settings.currency_code_enabled -%}
{{- product.price | money_with_currency -}}
{%- else -%}
{{- product.price | money -}}
{%- endif -%}
</span>

<span class="price price--compare">
<span class="visually-hidden">{{ 'product.general.regular_price' | t }}</span>
{%- if settings.currency_code_enabled -%}
{{- product.compare_at_price | money_with_currency -}}
{%- else -%}
{{- product.compare_at_price | money -}}
{%- endif -%}
</span>
{%- elsif product.price_varies -%}
{%- capture price_min -%}
{%- if settings.currency_code_enabled -%}
{{ product.price_min | money_with_currency }}
{%- else -%}
{{ product.price_min | money }}
{%- endif -%}
{%- endcapture -%}

{%- capture price_max -%}
{%- if settings.currency_code_enabled -%}
{{- product.price_max | money_with_currency -}}
{%- else -%}
{{- product.price_max | money -}}
{%- endif -%}
{%- endcapture -%}

<span class="price">
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
{{- 'collection.product.from_price_html' | t: price_min: price_min, price_max: price_max -}}
</span>
{%- else -%}
<span class="price">
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>

{%- if settings.currency_code_enabled -%}
{{- product.price | money_with_currency -}}
{%- else -%}
{{- product.price | money -}}
{%- endif -%}
</span>
{%- endif -%}

{%- if product.selected_or_first_available_variant.unit_price_measurement -%}
<div class="price price--block text--xsmall text--subdued">
<div class="unit-price-measurement">
<span class="unit-price-measurement__price">{{ product.selected_or_first_available_variant.unit_price | money }}</span>
<span class="unit-price-measurement__separator">/</span>

{%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
<span class="unit-price-measurement__reference-value">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_value }}</span>
{%- endif -%}

<span class="unit-price-measurement__reference-unit">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}</span>
</div>
</div>
{%- endif -%}
</div>
</div>

{%- if settings.show_product_rating and reduced_content != true -%}
<a class="product-item-meta__reviews-badge text--small" href="{{ product.url }}">
{%- render 'product-rating', product: product -%}
</a>
{%- endif -%}

{%- if settings.product_color_display != 'hide' and reduced_content != true -%}
{%- for color_label in color_label_list -%}
{%- if product.options_by_name[color_label] != blank -%}
{%- assign product_option = product.options_by_name[color_label] -%}

{%- case settings.product_color_display -%}
{%- when 'count' -%}
<p class="product-item-meta__color-count text--small text--subdued">{{- 'collection.product.available_colors_count' | t: count: product_option.values.size -}}</p>

{%- when 'swatch' -%}
<div class="product-item-meta__swatch-list color-swatch-list color-swatch-list--mini">
{%- assign variant_option = 'option' | append: product_option.position -%}
{%- assign color_swatch_config = settings.color_swatch_config | newline_to_br | split: '<br />' -%}

{%- capture color_name -%}{{ section.id }}-{{ block.id }}-{{ product.id }}{%- endcapture -%}

{%- for value in product_option.values -%}
{%- capture color_id -%}{{ color_name }}-{{ forloop.index }}{%- endcapture -%}
{%- assign color_value_downcase = value | downcase -%}
{%- assign variant_for_value = product.variants | where: variant_option, value | first -%}

<div class="color-swatch {% if color_white_label == color_value_downcase %}color-swatch--white{% endif %}">
<input class="color-swatch__radio visually-hidden" type="radio" name="{{ color_name }}" id="{{ color_id }}" value="{{ value | escape }}" {% if product_option.selected_value == value %}checked="checked"{% endif %} data-variant-id="{{ variant_for_value.id }}" {% if variant_for_value.featured_media %}data-variant-featured-media="{{ variant_for_value.featured_media.id }}"{% endif %}>
<label class="color-swatch__item" for="{{ color_id }}" style="{% render 'color-swatch-style', color_swatch_config: color_swatch_config, value: value %}">
<span class="visually-hidden">{{ value }}</span>
</label>
</div>
{%- endfor -%}
</div>
{%- endcase -%}

{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
</div>

{% comment %}
{%- if product.available and reduced_content or show_cta -%}
<div class="product-item__cta-wrapper">
{%- if product.variants.size == 1 -%}
{%- capture form_id -%}product_form_{{ section.id }}_{{ block.id }}_{{ product.id }}_{% increment product_form_index %}{%- endcapture -%}
{%- form 'product', product, data-productid: product.id, is: 'product-form', id: form_id -%}
<input type="hidden" name="quantity" value="1">
<input type="hidden" name="id" data-productid="{{ product.id }}" value="{{ product.first_available_variant.id }}">
<button type="submit" {% if show_cta %}is="loader-button"{% endif %} class="{% if reduced_content %}product-item__link link text--subdued{% else %}product-item__cta button button--primary{% endif %}">{{ 'collection.product.add_to_cart_short' | t }}</button>
{%- endform -%}
{%- else -%}
<button type="button" {% if show_cta %}loader{% endif %} is="toggle-button" aria-controls="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-drawer" aria-expanded="false" class="{% if reduced_content %}product-item__link link text--subdued{% else %}product-item__cta button button--primary{% endif %} hidden-phone">{{ 'collection.product.quick_view' | t }}</button>
<button type="button" {% if show_cta %}loader{% endif %} is="toggle-button" aria-controls="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-popover" aria-expanded="false" class="{% if reduced_content %}product-item__link link text--subdued{% else %}product-item__cta button button--primary{% endif %} hidden-tablet-and-up">{{ 'collection.product.quick_view' | t }}</button>
<quick-buy-popover id="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-popover" href="{{ product.url }}{% if product_url_contains_query %}&{% else %}?{% endif %}view=quick-buy-popover" class="popover popover--quick-buy hidden-tablet-and-up"></quick-buy-popover>
<quick-buy-drawer id="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-drawer" href="{{ product.url }}{% if product_url_contains_query %}&{% else %}?{% endif %}view=quick-buy-drawer" class="drawer drawer--large drawer--quick-buy hidden-phone"></quick-buy-drawer>
{%- endif -%}
</div>
{%- elsif reduced_content -%}
<div class="product-item__cta-wrapper">
<span class="product-item__link text--subdued">{{ 'collection.product.sold_out' | t }}</span>
</div>
{%- endif -%}
{% endcomment %}

<div class="product-item__cta-wrapper">
{%- if product.variants.size == 1 -%}
{%- capture form_id -%}product_form_{{ section.id }}_{{ block.id }}_{{ product.id }}_{% increment product_form_index %}{%- endcapture -%}
{% if collection.handle contains 'Cosmedix-elite' or product.handle contains 'mesoestetic-cosmelan-maintenance-cream-2-30g' or product.handle contains 'mesoestetic-cosmelan-home-maintenance-pack-30g-50ml-50ml' %} %}
{% if product.available %}
<a href="{{ product.url }}"><button type="submit" class="button button--primary product-item__cta">QUICK VIEW</button></a>
{% else %}
<a href="{{ product.url }}"><button type="submit" class="button button--primary product-item__cta">SOLD OUT</button></a>
{% endif %}

{% else %}

{%- if product.available %}
{%- form 'product', product, data-productid: product.id, is: 'product-form', id: form_id -%}
<input type="hidden" name="quantity" value="1">
<input type="hidden" name="id" data-productid="{{ product.id }}" value="{{ product.first_available_variant.id }}">
<button type="submit" {% if show_cta %}is="loader-button"{% endif %} class="{% if reduced_content %}product-item__link link text--subdued{% else %}product-item__cta button button--primary{% endif %}">{{ 'collection.product.add_to_cart_short' | t }}</button>
{%- endform -%}
{% else %}

<span class="product-item__link text--subdued button button--primary product-item__cta" style="border-radius: 20px;font-weight: 300;font-size: 10px;">{{ 'collection.product.sold_out' | t }}</span>

{%- endif -%}

{% endif %}

{%- else -%}
<button type="button" {% if show_cta %}loader{% endif %} is="toggle-button" aria-controls="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-drawer" aria-expanded="false" class="{% if reduced_content %}product-item__link link text--subdued{% else %}product-item__cta button button--primary{% endif %} hidden-phone">{{ 'collection.product.quick_view' | t }}</button>
<button type="button" {% if show_cta %}loader{% endif %} is="toggle-button" aria-controls="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-popover" aria-expanded="false" class="{% if reduced_content %}product-item__link link text--subdued{% else %}product-item__cta button button--primary{% endif %} hidden-tablet-and-up">{{ 'collection.product.quick_view' | t }}</button>

<quick-buy-popover id="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-popover" href="{{ product.url }}{% if product_url_contains_query %}&{% else %}?{% endif %}view=quick-buy-popover" class="popover popover--quick-buy hidden-tablet-and-up"></quick-buy-popover>
<quick-buy-drawer id="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-drawer" href="{{ product.url }}{% if product_url_contains_query %}&{% else %}?{% endif %}view=quick-buy-drawer" class="drawer drawer--large drawer--quick-buy hidden-phone"></quick-buy-drawer>
{%- endif -%}
</div>

</div>
</product-item>

namphan · ‎08-15-2024

Hi @Clearskinhouse,

Please change all code:

{%- assign color_label_list = 'general.label.color' | t | replace: ', ', ',' | downcase | split: ',' -%}
{%- assign color_white_label = 'general.label.white' | t | downcase -%}
{%- assign quick_buy_icon_name = 'quick-buy-' | append: settings.cart_icon | replace: '_', '-' -%}

{%- if product.url contains '?' -%}
{%- assign product_url_contains_query = true -%}
{%- else -%}
{%- assign product_url_contains_query = false -%}
{%- endif -%}

<product-item class="product-item {% unless product.available %}product-item--sold-out{% endunless %}" {% if reveal %}reveal{% endif %}>
{%- capture product_labels -%}
{%- for tag in product.tags -%}
{%- if tag contains '__label' -%}
<span class="label label--custom{% if tag contains '__label2' %}2{% endif %}">{{ tag | split: ':' | last }}</span>
{%- endif -%}
{%- endfor -%}

{%- unless product.available -%}
<span class="label label--subdued">{{ 'collection.product.sold_out' | t }}</span>
{%- endunless -%}

{%- assign cheapest_variant = product.variants | sort: 'price' | first -%}

{%- if settings.show_discount and product.available and product.price < product.compare_at_price and cheapest_variant.compare_at_price != blank -%}
{%- if settings.discount_mode == 'percentage' -%}
{%- assign savings = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round | append: '%' -%}
{%- else -%}
{%- capture savings -%}{{ product.compare_at_price | minus: product.price | money }}{%- endcapture -%}
{%- endif -%}

<span class="label label--highlight">{{ 'collection.product.discount_html' | t: savings: savings }}</span>
{%- endif -%}
{%- endcapture -%}

<div class="product-item__image-wrapper {% if settings.show_secondary_image and product.media.size > 1 and hide_secondary_image != true %}product-item__image-wrapper--multiple{% endif %}">
<a href="{{ product.url }}" class="product-item__aspect-ratio aspect-ratio {% if settings.product_image_size != 'natural' %}aspect-ratio--{{ settings.product_image_size }}{% endif %}" style="padding-bottom: {{ 100.0 | divided_by: product.featured_media.preview_image.aspect_ratio }}%; --aspect-ratio: {{ product.featured_media.preview_image.aspect_ratio }}">
<img class="product-item__primary-image" loading="lazy" data-media-id="{{ product.featured_media.id | escape }}" sizes="{{ sizes_attribute }}" {% render 'image-attributes', image: product.featured_media, sizes: '200,300,400,500,600,700,800,900,1000,1100,1200' %}>

{%- if settings.product_color_display == 'swatch' -%}
{%- assign featured_media = product.variants | map: 'featured_media' -%}

{%- for media in featured_media -%}
{%- unless media == product.featured_media -%}
<img class="product-item__primary-image" hidden data-media-id="{{ media.id | escape }}" loading="lazy" sizes="{{ sizes_attribute }}" {% render 'image-attributes', image: media, sizes: '200,300,400,500,600,700,800,900,1000,1100,1200' %}>
{%- endunless -%}
{%- endfor -%}
{%- endif -%}

{%- if settings.show_secondary_image and product.media.size > 1 and hide_secondary_image != true -%}
{%- assign next_media = product.media[product.featured_media.position] | default: product.media[1] -%}
<img class="product-item__secondary-image" loading="lazy" sizes="{{ sizes_attribute }}" {% render 'image-attributes', image: next_media, sizes: '200,300,400,500,600,700,800,900,1000,1100,1200' %}>
{%- endif -%}
</a>

{%- if request.page_type != 'password' and settings.product_add_to_cart and product.available and reduced_content != true and show_cta != true -%}
{%- if product.variants.size == 1 -%}
{%- capture form_id -%}product_form_{{ section.id }}_{{ block.id }}_{{ product.id }}_{% increment product_form_index %}{%- endcapture -%}
{%- form 'product', product, data-productid: product.id, is: 'product-form', id: form_id, class: 'product-item__quick-form' -%}
<input type="hidden" name="quantity" value="1">
<input type="hidden" name="id" data-productid="{{ product.id }}" value="{{ product.first_available_variant.id }}">
<button is="loader-button" type="submit" class="button button--outline button--text button--full {% if section.settings.desktop_products_per_row >= 5 %}button--small{% endif %} hidden-touch">{{ 'collection.product.add_to_cart_short' | t }}</button>
<button type="submit" class="product-item__quick-buy-button hidden-no-touch">
<span class="visually-hidden">{{ 'collection.product.add_to_cart_short' | t }}</span>
{%- render 'icon' with quick_buy_icon_name -%}
</button>
{%- endform -%}
{%- else -%}
{%- comment -%}
IMPLEMENTATION NOTE: Depending on the device we show a different icon or open a different mode (either popover or drawer)
{%- endcomment -%}

<div class="product-item__quick-form">
<button is="toggle-button" loader aria-controls="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-drawer" aria-expanded="false" class="button button--outline button--text button--full {% if section.settings.desktop_products_per_row >= 5 %}button--small{% endif %} hidden-touch hidden-phone">{{ 'collection.product.quick_view' | t }}</button>
<button is="toggle-button" aria-controls="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-drawer" aria-expanded="false" class="product-item__quick-buy-button hidden-no-touch hidden-phone">
<span class="visually-hidden">{{ 'collection.product.quick_view' | t }}</span>
{%- render 'icon' with quick_buy_icon_name -%}
</button>

<button is="toggle-button" aria-controls="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-popover" aria-expanded="false" class="product-item__quick-buy-button hidden-tablet-and-up">
<span class="visually-hidden">{{ 'collection.product.quick_view' | t }}</span>
{%- render 'icon' with quick_buy_icon_name -%}
</button>
</div>

<quick-buy-popover id="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-popover" href="{{ product.url }}{% if product_url_contains_query %}&{% else %}?{% endif %}view=quick-buy-popover" class="popover popover--quick-buy hidden-tablet-and-up"></quick-buy-popover>
<quick-buy-drawer id="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-drawer" href="{{ product.url }}{% if product_url_contains_query %}&{% else %}?{% endif %}view=quick-buy-drawer" class="drawer drawer--large drawer--quick-buy hidden-phone"></quick-buy-drawer>
{%- endif -%}
{%- endif -%}
</div>

<div class="product-item__info {% if show_cta %}product-item__info--with-button{% endif %} {% if reduced_font_size %}text--small{% endif %}">
<div class="product-item-meta">
{%- if settings.show_vendor -%}
{%- assign vendor_handle = product.vendor | handle -%}
{%- assign collection_for_vendor = collections[vendor_handle] -%}

{%- unless collection_for_vendor.empty? -%}
<a class="product-item-meta__vendor heading heading--xsmall" href="{{ collection_for_vendor.url }}">{{ product.vendor }}</a>
{%- else -%}
<a class="product-item-meta__vendor heading heading--xsmall" href="{{ product.vendor | url_for_vendor }}">{{ product.vendor }}</a>
{%- endunless -%}
{%- endif -%}

<a href="{{ product.url }}" class="product-item-meta__title">{{ product.title }}</a>

<div class="product-item-meta__price-list-container">
<div class="price-list price-list--centered">
{%- if product.price_varies and product.compare_at_price -%}
{%- assign cheapest_variant = product.variants | sort: 'price' | first -%}

{%- capture price_min -%}
{%- if settings.currency_code_enabled -%}
{{- cheapest_variant.price | money_with_currency -}}
{%- else -%}
{{- cheapest_variant.price | money -}}
{%- endif -%}
{%- endcapture -%}

{%- if cheapest_variant.price < cheapest_variant.compare_at_price -%}
<span class="price price--highlight">
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
{{- 'collection.product.from_price_html' | t: price_min: price_min -}}
</span>

<span class="price price--compare">
<span class="visually-hidden">{{ 'product.general.regular_price' | t }}</span>

{%- if settings.currency_code_enabled -%}
{{- cheapest_variant.compare_at_price | money_with_currency -}}
{%- else -%}
{{- cheapest_variant.compare_at_price | money -}}
{%- endif -%}
</span>
{%- else -%}
<span class="price">
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
{{- 'collection.product.from_price_html' | t: price_min: price_min -}}
</span>
{%- endif -%}
{%- elsif product.price < product.compare_at_price -%}
<span class="price price--highlight">
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>

{%- if settings.currency_code_enabled -%}
{{- product.price | money_with_currency -}}
{%- else -%}
{{- product.price | money -}}
{%- endif -%}
</span>

<span class="price price--compare">
<span class="visually-hidden">{{ 'product.general.regular_price' | t }}</span>
{%- if settings.currency_code_enabled -%}
{{- product.compare_at_price | money_with_currency -}}
{%- else -%}
{{- product.compare_at_price | money -}}
{%- endif -%}
</span>
{%- elsif product.price_varies -%}
{%- capture price_min -%}
{%- if settings.currency_code_enabled -%}
{{ product.price_min | money_with_currency }}
{%- else -%}
{{ product.price_min | money }}
{%- endif -%}
{%- endcapture -%}

{%- capture price_max -%}
{%- if settings.currency_code_enabled -%}
{{- product.price_max | money_with_currency -}}
{%- else -%}
{{- product.price_max | money -}}
{%- endif -%}
{%- endcapture -%}

<span class="price">
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
{{- 'collection.product.from_price_html' | t: price_min: price_min, price_max: price_max -}}
</span>
{%- else -%}
<span class="price">
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>

{%- if settings.currency_code_enabled -%}
{{- product.price | money_with_currency -}}
{%- else -%}
{{- product.price | money -}}
{%- endif -%}
</span>
{%- endif -%}

{%- if product.selected_or_first_available_variant.unit_price_measurement -%}
<div class="price price--block text--xsmall text--subdued">
<div class="unit-price-measurement">
<span class="unit-price-measurement__price">{{ product.selected_or_first_available_variant.unit_price | money }}</span>
<span class="unit-price-measurement__separator">/</span>

{%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
<span class="unit-price-measurement__reference-value">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_value }}</span>
{%- endif -%}

<span class="unit-price-measurement__reference-unit">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}</span>
</div>
</div>
{%- endif -%}
</div>
</div>

{%- if product_labels != blank and reduced_content != true -%}
<div class="product-item__label-list label-list" style="position: relative;left: 0;">
{{- product_labels -}}
</div>
{%- endif -%}

{%- if settings.show_product_rating and reduced_content != true -%}
<a class="product-item-meta__reviews-badge text--small" href="{{ product.url }}">
{%- render 'product-rating', product: product -%}
</a>
{%- endif -%}

{%- if settings.product_color_display != 'hide' and reduced_content != true -%}
{%- for color_label in color_label_list -%}
{%- if product.options_by_name[color_label] != blank -%}
{%- assign product_option = product.options_by_name[color_label] -%}

{%- case settings.product_color_display -%}
{%- when 'count' -%}
<p class="product-item-meta__color-count text--small text--subdued">{{- 'collection.product.available_colors_count' | t: count: product_option.values.size -}}</p>

{%- when 'swatch' -%}
<div class="product-item-meta__swatch-list color-swatch-list color-swatch-list--mini">
{%- assign variant_option = 'option' | append: product_option.position -%}
{%- assign color_swatch_config = settings.color_swatch_config | newline_to_br | split: '<br />' -%}

{%- capture color_name -%}{{ section.id }}-{{ block.id }}-{{ product.id }}{%- endcapture -%}

{%- for value in product_option.values -%}
{%- capture color_id -%}{{ color_name }}-{{ forloop.index }}{%- endcapture -%}
{%- assign color_value_downcase = value | downcase -%}
{%- assign variant_for_value = product.variants | where: variant_option, value | first -%}

<div class="color-swatch {% if color_white_label == color_value_downcase %}color-swatch--white{% endif %}">
<input class="color-swatch__radio visually-hidden" type="radio" name="{{ color_name }}" id="{{ color_id }}" value="{{ value | escape }}" {% if product_option.selected_value == value %}checked="checked"{% endif %} data-variant-id="{{ variant_for_value.id }}" {% if variant_for_value.featured_media %}data-variant-featured-media="{{ variant_for_value.featured_media.id }}"{% endif %}>
<label class="color-swatch__item" for="{{ color_id }}" style="{% render 'color-swatch-style', color_swatch_config: color_swatch_config, value: value %}">
<span class="visually-hidden">{{ value }}</span>
</label>
</div>
{%- endfor -%}
</div>
{%- endcase -%}

{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
</div>

{% comment %}
{%- if product.available and reduced_content or show_cta -%}
<div class="product-item__cta-wrapper">
{%- if product.variants.size == 1 -%}
{%- capture form_id -%}product_form_{{ section.id }}_{{ block.id }}_{{ product.id }}_{% increment product_form_index %}{%- endcapture -%}
{%- form 'product', product, data-productid: product.id, is: 'product-form', id: form_id -%}
<input type="hidden" name="quantity" value="1">
<input type="hidden" name="id" data-productid="{{ product.id }}" value="{{ product.first_available_variant.id }}">
<button type="submit" {% if show_cta %}is="loader-button"{% endif %} class="{% if reduced_content %}product-item__link link text--subdued{% else %}product-item__cta button button--primary{% endif %}">{{ 'collection.product.add_to_cart_short' | t }}</button>
{%- endform -%}
{%- else -%}
<button type="button" {% if show_cta %}loader{% endif %} is="toggle-button" aria-controls="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-drawer" aria-expanded="false" class="{% if reduced_content %}product-item__link link text--subdued{% else %}product-item__cta button button--primary{% endif %} hidden-phone">{{ 'collection.product.quick_view' | t }}</button>
<button type="button" {% if show_cta %}loader{% endif %} is="toggle-button" aria-controls="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-popover" aria-expanded="false" class="{% if reduced_content %}product-item__link link text--subdued{% else %}product-item__cta button button--primary{% endif %} hidden-tablet-and-up">{{ 'collection.product.quick_view' | t }}</button>
<quick-buy-popover id="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-popover" href="{{ product.url }}{% if product_url_contains_query %}&{% else %}?{% endif %}view=quick-buy-popover" class="popover popover--quick-buy hidden-tablet-and-up"></quick-buy-popover>
<quick-buy-drawer id="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-drawer" href="{{ product.url }}{% if product_url_contains_query %}&{% else %}?{% endif %}view=quick-buy-drawer" class="drawer drawer--large drawer--quick-buy hidden-phone"></quick-buy-drawer>
{%- endif -%}
</div>
{%- elsif reduced_content -%}
<div class="product-item__cta-wrapper">
<span class="product-item__link text--subdued">{{ 'collection.product.sold_out' | t }}</span>
</div>
{%- endif -%}
{% endcomment %}

<div class="product-item__cta-wrapper">
{%- if product.variants.size == 1 -%}
{%- capture form_id -%}product_form_{{ section.id }}_{{ block.id }}_{{ product.id }}_{% increment product_form_index %}{%- endcapture -%}
{% if collection.handle contains 'Cosmedix-elite' or product.handle contains 'mesoestetic-cosmelan-maintenance-cream-2-30g' or product.handle contains 'mesoestetic-cosmelan-home-maintenance-pack-30g-50ml-50ml' %} %}
{% if product.available %}
<a href="{{ product.url }}"><button type="submit" class="button button--primary product-item__cta">QUICK VIEW</button></a>
{% else %}
<a href="{{ product.url }}"><button type="submit" class="button button--primary product-item__cta">SOLD OUT</button></a>
{% endif %}

{% else %}

{%- if product.available %}
{%- form 'product', product, data-productid: product.id, is: 'product-form', id: form_id -%}
<input type="hidden" name="quantity" value="1">
<input type="hidden" name="id" data-productid="{{ product.id }}" value="{{ product.first_available_variant.id }}">
<button type="submit" {% if show_cta %}is="loader-button"{% endif %} class="{% if reduced_content %}product-item__link link text--subdued{% else %}product-item__cta button button--primary{% endif %}">{{ 'collection.product.add_to_cart_short' | t }}</button>
{%- endform -%}
{% else %}

<span class="product-item__link text--subdued button button--primary product-item__cta" style="border-radius: 20px;font-weight: 300;font-size: 10px;">{{ 'collection.product.sold_out' | t }}</span>

{%- endif -%}


{% endif %}




{%- else -%}
<button type="button" {% if show_cta %}loader{% endif %} is="toggle-button" aria-controls="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-drawer" aria-expanded="false" class="{% if reduced_content %}product-item__link link text--subdued{% else %}product-item__cta button button--primary{% endif %} hidden-phone">{{ 'collection.product.quick_view' | t }}</button>
<button type="button" {% if show_cta %}loader{% endif %} is="toggle-button" aria-controls="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-popover" aria-expanded="false" class="{% if reduced_content %}product-item__link link text--subdued{% else %}product-item__cta button button--primary{% endif %} hidden-tablet-and-up">{{ 'collection.product.quick_view' | t }}</button>

<quick-buy-popover id="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-popover" href="{{ product.url }}{% if product_url_contains_query %}&{% else %}?{% endif %}view=quick-buy-popover" class="popover popover--quick-buy hidden-tablet-and-up"></quick-buy-popover>
<quick-buy-drawer id="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-drawer" href="{{ product.url }}{% if product_url_contains_query %}&{% else %}?{% endif %}view=quick-buy-drawer" class="drawer drawer--large drawer--quick-buy hidden-phone"></quick-buy-drawer>
{%- endif -%}
</div>



</div>
</product-item>

☕ 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

Clearskinhouse · ‎08-15-2024

That worked. Is there a way to make each product evenly spaced so everything g is aligned when there are side by side? I don’t like how sometimes the add to cart button is lower than the one next to it and vice versa

namphan · ‎08-15-2024

Hi @Clearskinhouse,

I checked and the 'add to cart' buttons are aligned, can you explain more about it?

☕ 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

BSS-TekLabs · ‎08-15-2024

- Here is the solution for you @Clearskinhouse
- Please follow these steps:

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

[dir=ltr] .product-item__label-list {
    bottom: 0 !important;
    top: auto !important;
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)

Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page

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

Move sale badge to somewhere that doesn’t cut off image

Move sale badge to somewhere that doesn’t cut off image

Community Blog Articles