Hi @KetanKumar , @LitCommerce , @WoodyDev ,
I am using Prestige Theme and I would like to add the “1day dispatch” (attached) picture either on my website for my products but I couldn’t find any topic about it.
It is super important to me.
Could you please help it?
www.artronauts.co.uk
Kind Regards
Hi!
That shouldn’t be an issue, could you post your STORE.myshopify.com URL so I can request access to make this change, and provide the ‘1 Day Dispatch’ image or URL to the image 
Hi @artronauts ,
I checked and it shows by image so if you want to customize for some products you need to create Metafields image for the product. Refer https://help.shopify.com/en/manual/metafields/metafield-definitions/creating-custom-metafield-definitions
After you create it, please send me the name of the Metafields and the product-item.liquid file, I will show you how to add it
Hi @WoodyDev ,
Thank you for help.
The link of website: https://artronauts.myshopify.com/
The link of 1day dispatch : https://imgyukle.com/i/VeBFQv
I would like to put this image on any item I want because not every item will be dispatched in one day. Could you please help about either?
Many thanks.
Hi @artronauts ,
The best way for it is to create Metafields, have you tried following my instructions? I will help you edit the code so that it works well for the products you want to display.
Hi @LitCommerce ,
I am sorry for the delayed reply and couldn’t see your text.
I’ve attached the metafield name, is that right?
The codes of product.liquid :
{% section 'product-template' %}
{% section 'product-recommendations' %}
{% section 'recently-viewed-products' %}
I can use it on any product or any collection I want, can’t I?
Thank you for all of your support
Hi @artronauts ,
It’s not correct, you can follow these steps:
I will check it.
Hi @LitCommerce ,
The metafield attached (product metafield definition).
The codes of 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 -%}
{%- 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.' -%}
{%- 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 -%}
{%- if show_product_info -%}
{%- if show_vendor -%}
{{ product.vendor }}
{%- endif -%}
##
{{ product.title }}
{%- 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 -%}
{{ product.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 -%}
{{ product.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 -%}
Hi @artronauts ,
Please change all code:
{%- 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 -%}
{%- 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.' -%}
{%- 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 -%}
{%- if show_product_info -%}
{%- if show_vendor -%}
{{ product.vendor }}
{%- endif -%}
##
{{ product.title }}
{%- 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 -%}
{{ product.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 -%}
{{ product.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 -%}
{%- if product.metafields.custom.onedaydispatch != blank -%}
{%- endif -%}
{%- endif -%}
{%- if use_horizontal -%}
{{ 'collection.product.view_product' | t }}
{%- endif -%}
then you just need to go to each product and upload the image, it will display fine
Hi @LitCommerce ,
thank you so much for your help!
I need to use that icon on over 200+ products, is there any easy way to apply on all of them?
If I create a collection and add the all 1day dispatch items on it, can it work?
Best Regards
Hi @artronauts ,
Are your products in only one collection? Or will it include multiple collections?
If with one collection you can do it, but with multiple collections you can only upload Metafields, it’s the only way in my opinion.
Hope it is clear to you.
Hi @LitCommerce ,
For Example: Product A will be in Best Sellers collection and New Arrivals.
And we can use the both collection in our website.
Can we create a custom metafield for our selected collection? In the collection we mentioned, we want this metafield work.
Many Thanks
Hi @artronauts ,
Yes, if you want to display by collection, it will be possible.
Do you want it to show only on the collection page? or wherever the product item is displayed?
Hi @artronauts ,
If so, Metafields is the best option. Also, can you add tags to the products? I can also help you to display it by product tag. you can choose between adding Metafields or tags.
Hope it is clear to you.
Hi @LitCommerce ,
I will add the “onedaydispatch” tag on any product I want.
Could you do the adjustments for this tag?
I am waiting for your reply.
Also could you help about the one day dispatch image size? It looks really big for any product.
Thanks
Hi @artronauts ,
Please upload the image to Settings > Files and send me the link, I’ll help you change it
Hi @artronauts ,
Please change all code:
{%- 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 -%}
{%- 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.' -%}
{%- 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 -%}
{%- if show_product_info -%}
{%- if show_vendor -%}
{{ product.vendor }}
{%- endif -%}
##
{{ product.title }}
{%- 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 -%}
{{ product.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 -%}
{{ product.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 -%}
{% if product.tags contains "onedaydispatch" %}
{%- endif -%}
{%- endif -%}
{%- if use_horizontal -%}
{{ 'collection.product.view_product' | t }}
{%- endif -%}
Then you just need to go to product and add ‘onedaydispatch’ tag, it will show fine