Hello there,
I’ve been trying to replace the ‘out of stock’ badge to the center of the product image on the collection pages but each attempt failed..
See below a picture of what I’m looking for.
I’m using Prestige theme and the website link is HERE
I would appreciate your help on this please @KetanKumar
Thank you very much!
Manoela
@KetanKumar thanks, it looks good, could you confirm it works on mobile view also?
yes i have just set manual text it can be done some change custom code can you please share code product gird item
Could I give you access to the code so you can see yourself?
Not sure which code you need that’s why..
It can be done by doing some code customization. please send me a personal message and we can discuss what you’d like
@KetanKumar @Oh so it’s too complicated? It means big customisation to be added to the theme
How much do you charge for this
Collection-template.liquid
{%- if section.settings.show_layout_switch -%}> {%- assign desktop_items_per_row = cart.attributes.collection_desktop_items_per_row | default: section.settings.grid_desktop_items_per_row | times: 1 -%}> {%- assign mobile_items_per_row = cart.attributes.collection_mobile_items_per_row | default: section.settings.grid_mobile_items_per_row | times: 1 -%}> > {%- if desktop_items_per_row >= 3 and desktop_items_per_row != section.settings.grid_desktop_items_per_row -%}> {%- assign desktop_items_per_row = section.settings.grid_desktop_items_per_row -%}> {%- endif -%}> {%- else -%}> {%- assign desktop_items_per_row = section.settings.grid_desktop_items_per_row | times: 1 -%}> {%- assign mobile_items_per_row = section.settings.grid_mobile_items_per_row | times: 1 -%}> {%- endif -%}> > {%- if desktop_items_per_row == 4 -%}> {%- assign tablet_items_per_row = 3 -%}> {%- else -%}> {%- assign tablet_items_per_row = 2 -%}> {%- endif -%}> > {%- capture collection_inner -%}> {%- comment -%}This is the common part to both template{%- endcomment -%}> > {%- if collection.products_count > 0 -%}> {%- paginate collection.products by section.settings.grid_items_per_page -%}> > >
{%- for product in collection.products -%}{% comment %}EasylockdownFilterBegin{% endcomment %}{% capture easylockdownFilter %}{% render ‘easylockdown_filter_collection’ with product, easylockdownRender: true, easylockdownItemSelectorOff: easylockdownItemSelectorOff %}{% endcapture %}{% assign easylockdownFilter = easylockdownFilter | strip %}{% if easylockdownFilter == ‘continue’ %}{% continue %}{% else %}{{ easylockdownFilter }}{% endif %}{% comment %}EasylockdownFilterEnd{% endcomment %}>
{%- render ‘product-item’, product: product, show_product_info: true, show_vendor: section.settings.show_vendor, show_color_swatch: section.settings.show_color_swatch, show_labels: true -%}>
{%- endfor -%}>{%- render ‘pagination’, paginate: paginate -%}> {%- endpaginate -%}> {%- else -%}> >
{{ ‘collection.general.no_products’ | t }}> >
{%- endif -%}> {%- endcapture -%}> > {%- if template == ‘collection.ajax’ -%}> {%- comment -%}> --------------------------------------------------------------------------------------------------------------------> CONTENT FOR AJAX ALTERNATE TEMPLATE> --------------------------------------------------------------------------------------------------------------------> {%- endcomment -%}> > {{- collection_inner -}}> > {%- else -%}> {%- comment -%}> --------------------------------------------------------------------------------------------------------------------> CONTENT FOR NORMAL TEMPLATE> --------------------------------------------------------------------------------------------------------------------> {%- endcomment -%}> > {%- assign active_tags = ‘’ -%}> > {%- for tag in current_tags -%}> {%- assign tag_as_handle = tag | replace: ‘’', ‘’ | replace: ‘"’, ‘’ | handle -%}> {%- assign active_tags = active_tags | append: tag_as_handle -%}> > {%- unless forloop.last -%}> {%- assign active_tags = active_tags | append: ‘+’ -%}> {%- endunless -%}> {%- endfor -%}> > {%- capture section_settings -%}> {> “collectionUrl”: {{ collection.url | default: ‘/collections/all’ | json }},> “currentTags”: {% if active_tags != blank %}{{ active_tags | split: ‘+’ | json }}{% else %}{% endif %},> “sortBy”: {{ collection.sort_by | default: collection.default_sort_by | json }},> “filterPosition”: {{ section.settings.filter_position | json }}> }> {%- endcapture -%}> > > {%- endif -%}> > {%- capture hack -%}> {%- comment -%}This is just an ugly hack to make those variables appear as part of the theme editor in the General Settings{%- endcomment -%}> {{ settings.product_list_horizontal_spacing }},{{ settings.product_list_vertical_spacing }}> {%- endcapture -%}> > {% schema %}> {> “name”: “Collection page”,> “class”: “shopify-section–bordered”,> “settings”: [> {> “type”: “checkbox”,> “id”: “show_collection_info”,> “label”: “Show collection info”,> “default”: true> },> {> “type”: “checkbox”,> “id”: “show_collection_image”,> “label”: “Show collection image”,> “default”: false> },> {> “type”: “checkbox”,> “id”: “apply_overlay”,> “label”: “Apply overlay on image”,> “info”: “This can improve text visibility.”,> “default”: true> },> {> “type”: “checkbox”,> “id”: “show_color_swatch”,> “label”: “Show color swatch”,> “info”: “Some colors appear white? Learn more.”,> “default”: false> },> {> “type”: “checkbox”,> “id”: “show_vendor”,> “label”: “Show vendor”,> “default”: false> },> {> “type”: “select”,> “id”: “collection_image_size”,> “label”: “Collection image size”,> “options”: [> {> “value”: “small”,> “label”: “Small”> },> {> “value”: “normal”,> “label”: “Normal”> },> {> “value”: “large”,> “label”: “Large”> }> ],> “default”: “normal”> },> {> “type”: “header”,> “content”: “Toolbar”> },> {> “type”: “checkbox”,> “id”: “show_sort_by”,> “label”: “Show sort by”,> “default”: true> },> {> “type”: “checkbox”,> “id”: “show_layout_switch”,> “label”: “Show layout switch”> },> {> “type”: “select”,> “id”: “toolbar_position”,> “label”: “Position”,> “options”: [> {> “value”: “top”,> “label”: “Top”> },> {> “value”: “bottom”,> “label”: “Bottom”> }> ],> “default”: “top”> },> {> “type”: “header”,> “content”: “Filters”> },> {> “type”: “select”,> “id”: “filter_position”,> “label”: “Desktop position”,> “options”: [> {> “value”: “sidebar”,> “label”: “Sidebar”> },> {> “value”: “drawer”,> “label”: “Drawer”> }> ],> “default”: “sidebar”> },> {> “type”: “select”,> “id”: “filter_mode”,> “label”: “Mode”,> “info”: “Filters by group requires specific tag formatting. Learn more”,> “options”: [> {> “value”: “hidden”,> “label”: “Hidden”> },> {> “value”: “tag”,> “label”: “By tag”> },> {> “value”: “group”,> “label”: “By group”> }> ],> “default”: “tag”> },> {> “type”: “checkbox”,> “id”: “show_filter_color_swatch”,> “label”: “Show filter color swatch”,> “info”: “This is only used if filters by group is enabled.”,> “default”: true> },> {> “type”: “link_list”,> “id”: “filter_menu”,> “label”: “Quick links”,> “info”: “This menu won’t show dropdown items.”> },> {> “type”: “header”,> “content”: “Grid”> },> {> “type”: “range”,> “id”: “grid_items_per_page”,> “label”: “Products per page”,> “min”: 4,> “max”: 48,> “step”: 4,> “default”: 16> },> {> “type”: “select”,> “id”: “grid_mobile_items_per_row”,> “label”: “Products per row (mobile)”,> “options”: [> {> “value”: “1”,> “label”: “1”> },> {> “value”: “2”,> “label”: “2”> }> ],> “default”: “2”> },> {> “type”: “range”,> “min”: 2,> “max”: 4,> “id”: “grid_desktop_items_per_row”,> “label”: “Products per row (desktop)”,> “default”: 4> }> ]> }> {% endschema %}
Collections-template.liquid
{%- if section.settings.show_layout_switch -%}> {%- assign desktop_items_per_row = cart.attributes.collection_desktop_items_per_row | default: section.settings.grid_desktop_items_per_row | times: 1 -%}> {%- assign mobile_items_per_row = cart.attributes.collection_mobile_items_per_row | default: section.settings.grid_mobile_items_per_row | times: 1 -%}> > {%- if desktop_items_per_row >= 3 and desktop_items_per_row != section.settings.grid_desktop_items_per_row -%}> {%- assign desktop_items_per_row = section.settings.grid_desktop_items_per_row -%}> {%- endif -%}> {%- else -%}> {%- assign desktop_items_per_row = section.settings.grid_desktop_items_per_row | times: 1 -%}> {%- assign mobile_items_per_row = section.settings.grid_mobile_items_per_row | times: 1 -%}> {%- endif -%}> > {%- if desktop_items_per_row == 4 -%}> {%- assign tablet_items_per_row = 3 -%}> {%- else -%}> {%- assign tablet_items_per_row = 2 -%}> {%- endif -%}> > {%- capture collection_inner -%}> {%- comment -%}This is the common part to both template{%- endcomment -%}> > {%- if collection.products_count > 0 -%}> {%- paginate collection.products by section.settings.grid_items_per_page -%}> > >
{%- for product in collection.products -%}{% comment %}EasylockdownFilterBegin{% endcomment %}{% capture easylockdownFilter %}{% render ‘easylockdown_filter_collection’ with product, easylockdownRender: true, easylockdownItemSelectorOff: easylockdownItemSelectorOff %}{% endcapture %}{% assign easylockdownFilter = easylockdownFilter | strip %}{% if easylockdownFilter == ‘continue’ %}{% continue %}{% else %}{{ easylockdownFilter }}{% endif %}{% comment %}EasylockdownFilterEnd{% endcomment %}>
{%- render ‘product-item’, product: product, show_product_info: true, show_vendor: section.settings.show_vendor, show_color_swatch: section.settings.show_color_swatch, show_labels: true -%}>
{%- endfor -%}>{%- render ‘pagination’, paginate: paginate -%}> {%- endpaginate -%}> {%- else -%}> >
{{ ‘collection.general.no_products’ | t }}> >
{%- endif -%}> {%- endcapture -%}> > {%- if template == ‘collection.ajax’ -%}> {%- comment -%}> --------------------------------------------------------------------------------------------------------------------> CONTENT FOR AJAX ALTERNATE TEMPLATE> --------------------------------------------------------------------------------------------------------------------> {%- endcomment -%}> > {{- collection_inner -}}> > {%- else -%}> {%- comment -%}> --------------------------------------------------------------------------------------------------------------------> CONTENT FOR NORMAL TEMPLATE> --------------------------------------------------------------------------------------------------------------------> {%- endcomment -%}> > {%- assign active_tags = ‘’ -%}> > {%- for tag in current_tags -%}> {%- assign tag_as_handle = tag | replace: ‘’', ‘’ | replace: ‘"’, ‘’ | handle -%}> {%- assign active_tags = active_tags | append: tag_as_handle -%}> > {%- unless forloop.last -%}> {%- assign active_tags = active_tags | append: ‘+’ -%}> {%- endunless -%}> {%- endfor -%}> > {%- capture section_settings -%}> {> “collectionUrl”: {{ collection.url | default: ‘/collections/all’ | json }},> “currentTags”: {% if active_tags != blank %}{{ active_tags | split: ‘+’ | json }}{% else %}{% endif %},> “sortBy”: {{ collection.sort_by | default: collection.default_sort_by | json }},> “filterPosition”: {{ section.settings.filter_position | json }}> }> {%- endcapture -%}> > > {%- endif -%}> > {%- capture hack -%}> {%- comment -%}This is just an ugly hack to make those variables appear as part of the theme editor in the General Settings{%- endcomment -%}> {{ settings.product_list_horizontal_spacing }},{{ settings.product_list_vertical_spacing }}> {%- endcapture -%}> > {% schema %}> {> “name”: “Collection page”,> “class”: “shopify-section–bordered”,> “settings”: [> {> “type”: “checkbox”,> “id”: “show_collection_info”,> “label”: “Show collection info”,> “default”: true> },> {> “type”: “checkbox”,> “id”: “show_collection_image”,> “label”: “Show collection image”,> “default”: false> },> {> “type”: “checkbox”,> “id”: “apply_overlay”,> “label”: “Apply overlay on image”,> “info”: “This can improve text visibility.”,> “default”: true> },> {> “type”: “checkbox”,> “id”: “show_color_swatch”,> “label”: “Show color swatch”,> “info”: “Some colors appear white? Learn more.”,> “default”: false> },> {> “type”: “checkbox”,> “id”: “show_vendor”,> “label”: “Show vendor”,> “default”: false> },> {> “type”: “select”,> “id”: “collection_image_size”,> “label”: “Collection image size”,> “options”: [> {> “value”: “small”,> “label”: “Small”> },> {> “value”: “normal”,> “label”: “Normal”> },> {> “value”: “large”,> “label”: “Large”> }> ],> “default”: “normal”> },> {> “type”: “header”,> “content”: “Toolbar”> },> {> “type”: “checkbox”,> “id”: “show_sort_by”,> “label”: “Show sort by”,> “default”: true> },> {> “type”: “checkbox”,> “id”: “show_layout_switch”,> “label”: “Show layout switch”> },> {> “type”: “select”,> “id”: “toolbar_position”,> “label”: “Position”,> “options”: [> {> “value”: “top”,> “label”: “Top”> },> {> “value”: “bottom”,> “label”: “Bottom”> }> ],> “default”: “top”> },> {> “type”: “header”,> “content”: “Filters”> },> {> “type”: “select”,> “id”: “filter_position”,> “label”: “Desktop position”,> “options”: [> {> “value”: “sidebar”,> “label”: “Sidebar”> },> {> “value”: “drawer”,> “label”: “Drawer”> }> ],> “default”: “sidebar”> },> {> “type”: “select”,> “id”: “filter_mode”,> “label”: “Mode”,> “info”: “Filters by group requires specific tag formatting. Learn more”,> “options”: [> {> “value”: “hidden”,> “label”: “Hidden”> },> {> “value”: “tag”,> “label”: “By tag”> },> {> “value”: “group”,> “label”: “By group”> }> ],> “default”: “tag”> },> {> “type”: “checkbox”,> “id”: “show_filter_color_swatch”,> “label”: “Show filter color swatch”,> “info”: “This is only used if filters by group is enabled.”,> “default”: true> },> {> “type”: “link_list”,> “id”: “filter_menu”,> “label”: “Quick links”,> “info”: “This menu won’t show dropdown items.”> },> {> “type”: “header”,> “content”: “Grid”> },> {> “type”: “range”,> “id”: “grid_items_per_page”,> “label”: “Products per page”,> “min”: 4,> “max”: 48,> “step”: 4,> “default”: 16> },> {> “type”: “select”,> “id”: “grid_mobile_items_per_row”,> “label”: “Products per row (mobile)”,> “options”: [> {> “value”: “1”,> “label”: “1”> },> {> “value”: “2”,> “label”: “2”> }> ],> “default”: “2”> },> {> “type”: “range”,> “min”: 2,> “max”: 4,> “id”: “grid_desktop_items_per_row”,> “label”: “Products per row (desktop)”,> “default”: 4> }> ]> }> {% endschema %}
no its minor change backend and some css if you have give theme access so i will check and update
@KetanKumar I’ve just sent a private msg
Thanks 
great thanks i have done this, please check.
also some issue anyone try this code the code of these 2 files if in the future same issue try the below code
1st update below file code
product-item.liquid
{%- comment -%}
We are using LazySizes to efficiently choose the most appropriate image in the set. However, because internally LazySizes uses srcset, we need to make
sure that the image sizes we offer is not larger than the max size uploaded by the merchants.
{%- endcomment -%}
{%- if settings.product_image_size == 'natural' or use_horizontal -%}
{%- assign use_natural_size = true -%}
{%- else -%}
{%- assign use_natural_size = false -%}
{%- endif -%}
{%- if settings.product_show_secondary_image and product.media[1] != blank and use_horizontal != true -%}
{%- assign has_alternate_image = true -%}
{%- else -%}
{%- assign has_alternate_image = false -%}
{%- endif -%}
{%- if use_horizontal -%}
{%- assign max_width = 125 -%}
{%- else -%}
{%- assign max_width = product.featured_media.preview_image.width -%}
{%- endif -%}
{%- assign media_aspect_ratio = product.featured_media.aspect_ratio | default: product.featured_media.preview_image.aspect_ratio -%}
{%- if show_labels -%}
{%- capture product_labels -%}
{%- for tag in product.tags -%}
{%- if tag contains '__label' -%}
{{ tag | split: '__label:' | last }}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- if product.available -%}
{%- if product.compare_at_price > product.price -%}
{{ 'product.labels.on_sale' | t }}
{%- endif -%}
{%- else -%}
{{ 'product.labels.sold_out' | t }}
{%- endif -%}
{%- endcapture -%}
{%- if product_labels != blank -%}
{{ product_labels }}
{%- endif -%}
{%- endif -%}
{%- comment -%}
IMPLEMENTATION NOTE: The alternate image (not visible by default) should be the first in the DOM, as the spinner (Image__Loader element) is
displayed based on the immediately previously shown image.
{%- endcomment -%}
{%- if has_alternate_image -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,300,400,600,800,900,1000,1200', image: product.media[1] -%}{%- endcapture -%}
{%- assign image_url = product.media[1] | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- endif -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,400,600,700,800,900,1000,1200', image: product.featured_media -%}{%- endcapture -%}
{%- assign image_url = product.featured_media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- comment -%}
//add grey overlay on image out of stock//
{%- endcomment -%}
{%- if show_product_info -%}
{%- if show_vendor -%}
{{ product.vendor }}
{%- endif -%}
##
{{ product.title }}
{% comment %}Start automatically added Judge.me widget{% endcomment %}
{% render 'judgeme_widgets', widget_type: 'judgeme_preview_badge', concierge_install: true, product: product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}
{%- if show_color_swatch -%}
{%- assign color_swatch_list = '' -%}
{%- capture color_swatch -%}
{%- assign color_label = 'color,colour,couleur,colore,farbe,색,色,färg,farve' | split: ',' -%}
{%- capture color_name -%}{{ section.id }}-{{ product.id }}{%- endcapture -%}
{%- for option in product.options_with_values -%}
{%- assign downcased_option = option.name | downcase -%}
{%- if color_label contains downcased_option -%}
{%- assign variant_option = 'option' | append: forloop.index -%}
{%- for value in option.values -%}
{%- assign downcased_value = value | downcase -%}
{%- capture color_id -%}{{ section.id }}-{{ product.id }}-{{ forloop.index }}{%- endcapture -%}
{%- for variant in product.variants -%}
{%- if variant[variant_option] == value -%}
{%- assign variant_for_value = variant -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- if variant_for_value.image -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,400,600,700,800,900,1000,1200', image: variant_for_value.image -%}{%- endcapture -%}
{%- assign variant_image_url = variant_for_value.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- endif -%}
{%- assign color_swatch_name = value | handle | append: '.png' -%}
{%- assign color_swatch_image = images[color_swatch_name] -%}
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
{%- endcapture -%}
{%- if color_swatch != blank -%}
{%- capture color_swatch_list -%}
{{- color_swatch -}}
{%- endcapture -%}
{%- endif -%}
{%- endif -%}
{%- if show_price_on_hover == nil -%}
{%- assign show_price_on_hover = settings.product_show_price_on_hover -%}
{%- endif -%}
{%- if show_price_on_hover and color_swatch_list != blank -%}
{{- color_swatch_list -}}
{%- endif -%}
{%- if product.template_suffix != 'coming-soon' -%}
{%- if product.compare_at_price > product.price -%}
{% if not_wholesaler %}
{% assign price = product_price | plus: 0 %}
{% else %}
{% capture price_string %}{% render 'ws-item-price', item: product %}{% endcapture %}
{% assign price = price_string | plus: 0 %}
{% endif %}
{{ price | money_without_trailing_zeros }}
{{ product.compare_at_price | money_without_trailing_zeros }}
{%- elsif product.price_varies -%}
{%- capture formatted_min_price -%}{{ product.price_min | money_without_trailing_zeros }}{%- endcapture -%}
{%- capture formatted_max_price -%}{{ product.price_max | money_without_trailing_zeros }}{%- endcapture -%}
{{ 'collection.product.from_price_html' | t: min_price: formatted_min_price, max_price: formatted_max_price }}
{%- else -%}
{% if not_wholesaler %}
{% assign price = item.price | plus: 0 %}
{% else %}
{% capture price_string %}{% render 'ws-item-price', item: product %}{% endcapture %}
{% assign price = price_string | plus: 0 %}
{% endif %}
{{ price | money_without_trailing_zeros }}
{%- endif -%}
{%- if product.selected_or_first_available_variant.unit_price_measurement -%}
{{ product.selected_or_first_available_variant.unit_price | money_without_trailing_zeros }}
/
{{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}
{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
{%- endif -%}
{%- endif -%}
{%- if show_price_on_hover == false and color_swatch_list != blank -%}
{{- color_swatch_list -}}
{%- endif -%}
{%- endif -%}
{%- if use_horizontal -%}
{{ 'collection.product.view_product' | t }}
{%- endif -%}
2nd Add below css code
/* Product Card Sold item Text Cener */
.ProductItem__LabelList {z-index: 1;}
.soldOut .ProductItem__LabelList {
position: absolute;
left: 0;
top: 0;
text-align: center;
right: 0;
margin: 0px auto;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}