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

Store Design
,
1

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

1 Like
2

Hi @Clearskinhouse ,

What option do you want it to display in:

  • Option 1:

1.png
1.png309×384 15.9 KB

  • Option 2:

2.png
2.png358×392 16.3 KB

  • Option 3:

3.png
3.png350×393 16.3 KB

3

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • 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:

BSSTekLabs_0-1723733739757.png
BSSTekLabs_0-1723733739757.png1552×720 86.6 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
4

Option 3 please

5

Hi @Clearskinhouse ,

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

6

I don’t have either of those files?

7

Hi @Clearskinhouse ,

Can you try with card-product.liquid file? or I can send you collaborator invite and change it for you

8

{%- 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’ -%}
{{ tag | split: ‘:’ | last }}
{%- endif -%}
{%- endfor -%}

{%- unless product.available -%}
{{ ‘collection.product.sold_out’ | t }}
{%- 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 -%}

{{ ‘collection.product.discount_html’ | t: savings: savings }}
{%- endif -%}
{%- endcapture -%}

{%- if product_labels != blank and reduced_content != true -%}
{{- product_labels -}}
{%- 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 -%}

{%- 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’ -%}


{{ ‘collection.product.add_to_cart_short’ | t }}

{{ ‘collection.product.add_to_cart_short’ | t }}
{%- render ‘icon’ with quick_buy_icon_name -%}

{%- endform -%}
{%- else -%}
{%- comment -%}
IMPLEMENTATION NOTE: Depending on the device we show a different icon or open a different mode (either popover or drawer)
{%- endcomment -%}

{{ 'collection.product.quick_view' | t }} {{ 'collection.product.quick_view' | t }} {%- render 'icon' with quick_buy_icon_name -%} {{ 'collection.product.quick_view' | t }} {%- render 'icon' with quick_buy_icon_name -%}



{%- endif -%}
{%- endif -%}

{%- if settings.show_vendor -%} {%- assign vendor_handle = product.vendor | handle -%} {%- assign collection_for_vendor = collections[vendor_handle] -%}

{%- unless collection_for_vendor.empty? -%}
{{ product.vendor }}
{%- else -%}
{{ product.vendor }}
{%- endunless -%}
{%- endif -%}

{{ product.title }}

{%- 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 -%}

{{ ‘product.general.sale_price’ | t }}
{{- ‘collection.product.from_price_html’ | t: price_min: price_min -}}

{{ 'product.general.regular_price' | t }}

{%- if settings.currency_code_enabled -%}
{{- cheapest_variant.compare_at_price | money_with_currency -}}
{%- else -%}
{{- cheapest_variant.compare_at_price | money -}}
{%- endif -%}

{%- else -%}

{{ ‘product.general.sale_price’ | t }}
{{- ‘collection.product.from_price_html’ | t: price_min: price_min -}}

{%- endif -%}
{%- elsif product.price < product.compare_at_price -%}

{{ ‘product.general.sale_price’ | t }}

{%- if settings.currency_code_enabled -%}
{{- product.price | money_with_currency -}}
{%- else -%}
{{- product.price | money -}}
{%- endif -%}

{{ 'product.general.regular_price' | t }} {%- if settings.currency_code_enabled -%} {{- product.compare_at_price | money_with_currency -}} {%- else -%} {{- product.compare_at_price | money -}} {%- endif -%} {%- 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 -%}

{{ 'product.general.sale_price' | t }} {{- 'collection.product.from_price_html' | t: price_min: price_min, price_max: price_max -}} {%- else -%} {{ 'product.general.sale_price' | t }}

{%- if settings.currency_code_enabled -%}
{{- product.price | money_with_currency -}}
{%- else -%}
{{- product.price | money -}}
{%- endif -%}

{%- endif -%}

{%- if product.selected_or_first_available_variant.unit_price_measurement -%}

{{ product.selected_or_first_available_variant.unit_price | money }} /

{%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
{{ product.selected_or_first_available_variant.unit_price_measurement.reference_value }}
{%- endif -%}

{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}

{%- endif -%}

{%- if settings.show_product_rating and reduced_content != true -%}

{%- render ‘product-rating’, product: product -%}

{%- 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’ -%}

{{- 'collection.product.available_colors_count' | t: count: product_option.values.size -}}

{%- when ‘swatch’ -%}

{%- assign variant_option = 'option' | append: product_option.position -%} {%- assign color_swatch_config = settings.color_swatch_config | newline_to_br | split: '
' -%}

{%- 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 -%}

{{ value }}
{%- endfor -%}
{%- endcase -%}

{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}

{% comment %}
{%- if product.available and reduced_content or show_cta -%}

{%- 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 -%} {{ 'collection.product.add_to_cart_short' | t }} {%- endform -%} {%- else -%} {{ 'collection.product.quick_view' | t }} {{ 'collection.product.quick_view' | t }} {%- endif -%}
{%- elsif reduced_content -%}
{{ 'collection.product.sold_out' | t }}
{%- endif -%} {% endcomment %}
{%- 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 %} QUICK VIEW {% else %} SOLD OUT {% endif %}

{% else %}

{%- if product.available %}
{%- form ‘product’, product, data-productid: product.id, is: ‘product-form’, id: form_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 }}
{%- endform -%}
{% else %}

{{ ‘collection.product.sold_out’ | t }}

{%- 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 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 }}



{%- endif -%}

9

See code below

10

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 -%}
11

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

12

Hi @Clearskinhouse ,

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