Add As seen on TV tag to collection image

tilletts
Tourist
19 0 2

Sale Tag image.pngHi,

 

I want to add a little tag in the corner of my collection images which say 'As seen on TV' in black text with white background.

 

I have attached a image showing our clearance section which has a similar tag. Can you please advise how to set up?

 

Thanks

Replies 6 (6)

Lucid_Polygon
Shopify Partner
349 63 91

@tilletts 

  • You can achieve it by some custom coding.
  • Tag all the  products which need such a tag with a tag such as "TV"
  • Then we edit the product page code to show the tag. We check if the product has a tag, if yes, we will show the tag. So products with no tag will not see the tag
  • Also remember, there could be confusion if a clearance product has a "TV" tag, then it will be an override. To solve that, better make the TV tag on the right side and clearance tag on the left side

 

 If you feel like my answer is helpful, please Like and mark it as a solution. Let me know if you have any further questions.

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
tilletts
Tourist
19 0 2

That's great thanks but what is the custom code? also what is the title of the page within the theme that I would be adding this code?

 

Thanks in advance

Lucid_Polygon
Shopify Partner
349 63 91

Which theme are you using? Share the code for the product grid of the theme so we could assist.

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
tilletts
Tourist
19 0 2

Where can I find this code to share? collection.liquid?

 

Theme is Impluse.

 

Thanks

Lucid_Polygon
Shopify Partner
349 63 91

It's a paid theme. I don't have a copy. It could be product.liquid or product-grid.liquid or something. You have to look through the files. Search for 'product' in the theme code editor and see what pages comes up.

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
tilletts
Tourist
19 0 2

Hi Lucid,

 

Sorry for the late response, theme code is below. We have 3 pages with product.grid and they are

 

product-grid-item-new-variants

product-grid-item-variant

product-grid-item

 

{%- liquid
unless grid_item_width
assign grid_item_width = 'medium-up--one-quarter small--one-half'
endunless

assign on_sale = false
if product.compare_at_price > product.price
assign on_sale = true
endif

assign sold_out = true
if product.available
assign sold_out = false
endif

assign product_tags = product.tags | join: ','
assign has_custom_label = false
if product_tags contains '_label_'
for tag in product.tags
if tag contains '_label_'
assign tag_starts_with = tag | slice: 0
if tag_starts_with == '_'
assign has_custom_label = true
assign custom_label = tag | replace: '_label_', ''
endif
endif
endfor
endif
-%}

{% comment %}
CHECK IF TAG IS SELECTED AND IF SO, CHANGE THE PRODUCT IMAGE TO THE VARIANT IMAGE
{% endcomment %}

{% if current_tags[1] %}

{% for tag in collection.all_tags %}
{% if current_tags[0] contains tag %}
{% assign colour_finder = tag | remove_first: 'Colour' | remove_first: '_' %}
{% endif %}
{% endfor %}

{% for image in product.images %}
{% for variant in image.variants %}
{% if variant.title contains colour_finder %}
{%- assign img_url = variant.featured_image -%}
{% endif %}
{% endfor %}
{% endfor %}

{% else %}

{% for tag in collection.all_tags %}
{% if current_tags contains tag %}
{% assign colour_finder = tag | remove_first: 'Colour' | remove_first: '_' %}
{% endif %}
{% endfor %}

{% for image in product.images %}
{% for variant in image.variants %}
{% if variant.title contains colour_finder %}
{%- assign img_url = variant.featured_image -%}
{% endif %}
{% endfor %}
{% endfor %}

{% endif %}

{% comment %}
END OF SECTION FOR CHECKING TAGS
{% endcomment %}

<div class="grid__item grid-product {{ grid_item_width }}{% if settings.quick_shop_enable and sold_out == false %} grid-product__has-quick-shop{% endif %}" data-aos="row-of-{{ per_row }}" data-product-handle="{{ product.handle }}">
<div class="grid-product__content">
{%- if has_custom_label -%}
<div class="grid-product__tag grid-product__tag--custom">
{{ custom_label }}
</div>
{%- else -%}
{%- if sold_out -%}
<div class="grid-product__tag grid-product__tag--sold-out">
Notify Me
</div>
{%- endif -%}
{%- if on_sale and sold_out == false -%}
<div class="grid-product__tag grid-product__tag--sale">
{{ 'products.general.sale' | t }}
</div>
{%- endif -%}
{%- endif -%}

{% if product.tags contains 'Sash_New' %}
<div class="grid-product__tag grid-product__tag--custom">
NEW IN!
</div>
{% endif %}


{% if product.tags contains 'Sash_Sale' %}
<div class="grid-product__tag grid-product__tag--custom">
SALE!
</div>
{% endif %}

{% if product.tags contains 'Sash_Live' %}
<div class="grid-product__tag grid-product__tag--custom">
SEEN LIVE
</div>
{% endif %}

{% if product.tags contains 'Sash_Mel' %}
<div class="grid-product__tag grid-product__tag--custom">
MEL'S PICK
</div>
{% endif %}
<!-- UK Badge -->
{% if product.tags contains 'UKmade' %}
<div class="grid-product__tag grid-product__tag--custom">
MADE IN THE UK
</div>
{% endif %}
<!-- Premium Badge -->
{% if product.tags contains 'PREMbadge' %}
<div class="grid-product__tag grid-product__tag--custom">
PREMIUM
</div>
{% endif %}
<!-- To add product sash across product - 2 for 35 -->
{% if product.tags contains '2for35' %}
<div class="grid-product__tag grid-product__tag--custom">
2 FOR £35
</div>
{% endif %}

{%- liquid
assign fixed_aspect_ratio = false
unless settings.product_grid_image_size == 'natural'
assign fixed_aspect_ratio = true
endunless

assign preview_image = product.featured_media.preview_image
assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.'
-%}

<a href="{{ product.url | within: collection }}" class="grid-product__link{% if sold_out %} grid-product__link--disabled{% endif %}">
<div class="grid-product__image-mask">
{%- if settings.quick_shop_enable and sold_out == false -%}
<div class="quick-product__btn quick-product__btn--not-ready js-modal-open-quick-modal-{{ product.id }} small--hide" data-product-id="{{ product.id }}">
<span class="quick-product__label">{{ settings.quick_shop_text }}</span>
</div>
{%- endif -%}
{%- if fixed_aspect_ratio -%}
<div
class="grid__image-ratio grid__image-ratio--{{ settings.product_grid_image_size }} lazyload"
data-bgset="{% render 'bgset', image: preview_image %}"
data-sizes="auto">
</div>
{%- else -%}
<div class="image-wrap"
style="height: 0; padding-bottom: {{ 100 | divided_by: preview_image.aspect_ratio }}%;"
>
<img class="grid-product__image lazyload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080]"
data-aspectratio="{{ preview_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ preview_image.alt | escape }}">
<noscript>
<img class="grid-product__image lazyloaded"
src="{{ preview_image | img_url: '400x' }}"
alt="{{ preview_image.alt | escape }}">
</noscript>
</div>
{%- endif -%}

{%- unless sold_out -%}
{%- if settings.product_hover_image and product.media.size > 1 -%}
{%- for media in product.media offset: 1 limit: 1 -%}
{%- assign second_image = media.preview_image -%}
{%- endfor -%}
<div
class="grid-product__secondary-image small--hide lazyload"
data-bgset="{% render 'bgset', image: second_image %}"
data-sizes="auto">
</div>
{%- endif -%}
{%- endunless -%}

{%- if settings.collection_color_swatches -%}
{%- assign swatch_trigger = 'products.general.color_swatch_trigger' | t | downcase-%}
{%- for option in product.options_with_values -%}
{%- liquid
assign option_name = option.name | downcase
assign is_color = false
if option_name contains swatch_trigger
assign is_color = true
elsif swatch_trigger == 'color' and option_name contains 'colour'
assign is_color = true
endif
-%}
{%- if is_color -%}
{%- assign option_index = forloop.index0 -%}
{%- assign values = '' -%}
{%- for variant in product.variants -%}
{%- assign value = variant.options[option_index] %}
{%- unless values contains value -%}
{%- liquid
assign values = values | join: ','
assign values = values | append: ',' | append: value
assign values = values | split: ','
-%}

{%- if variant.image -%}
<div
class="grid-product__color-image grid-product__color-image--{{ variant.id }} small--hide">
</div>
{%- endif -%}
{%- endunless -%}
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
</div>

<div class="grid-product__meta">
<div class="grid-product__title grid-product__title--{{ settings.type_product_style }}">{{ product.title }}</div>
{%- if settings.vendor_enable -%}
<div class="grid-product__vendor">{{ product.vendor }}</div>
{%- endif -%}
<div class="grid-product__price">
{%- if on_sale -%}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<span class="grid-product__price--original">{{ product.compare_at_price | money }}</span>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
{%- endif -%}
{%- if product.price_varies -%}
{%- assign price = product.price_min | money -%}
{{ 'products.general.from_text_html' | t: price: price }}
{%- else -%}
{{ product.price | money }}
{%- endif -%}
{%- if on_sale -%}
{%- if settings.product_save_amount -%}
{%- if settings.product_save_type == 'dollar' -%}
{%- capture saved_amount -%}{{ product.compare_at_price | minus: product.price | money }}{%- endcapture -%}
{%- else -%}
{%- capture saved_amount -%}{{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round }}%{%- endcapture -%}
{%- endif -%}
<span class="grid-product__price--savings">
{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
</span>
{%- endif -%}
{%- endif -%}

{%- assign product_variant = product.selected_or_first_available_variant -%}
{%- if product_variant.unit_price_measurement -%}
<div class="product__unit-price">
{%- capture unit_price_base_unit -%}
{%- if product_variant.unit_price_measurement -%}
{%- if product_variant.unit_price_measurement.reference_value != 1 -%}
{{ product_variant.unit_price_measurement.reference_value }}
{%- endif -%}
{{ product_variant.unit_price_measurement.reference_unit }}
{%- endif -%}
{%- endcapture -%}

{{ product_variant.unit_price | money }}/{{ unit_price_base_unit }}
</div>
{%- endif -%}
</div>
{%- if settings.enable_product_reviews -%}
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{%- endif -%}
</div>
</a>
</div>
{%- if settings.collection_color_swatches -%}
{%- liquid
assign swatch_trigger = 'products.general.color_swatch_trigger' | t | downcase
assign swatch_file_extension = 'png'
assign color_count = 0
-%}

{%- for option in product.options_with_values -%}
{%- liquid
assign option_name = option.name | downcase
assign is_color = false
if option_name contains swatch_trigger
assign is_color = true
elsif swatch_trigger == 'color' and option_name contains 'colour'
assign is_color = true
endif
-%}
{%- if is_color -%}
{%- assign option_index = forloop.index0 -%}
{%- assign values = '' -%}
<div class="grid-product__colors grid-product__colors--{{ product.id }}">
{%- for variant in product.variants -%}
{%- assign value = variant.options[option_index] %}
{%- unless values contains value -%}
{%- liquid
assign values = values | join: ','
assign values = values | append: ',' | append: value
assign values = values | split: ','

assign color_image = value | handle | append: '.' | append: swatch_file_extension | asset_img_url: '50x' | prepend: 'https:' | split: '?' | first
assign color_swatch_fallback = value | split: ' ' | last | handle
assign color_count = color_count | plus: 1
-%}

<a
href="{{ variant.url | within: collection }}"
class="color-swatch color-swatch--small color-swatch--{{ value | handle }}{% if variant.image %} color-swatch--with-image{% endif %}"
{% if variant.image %}
data-variant-id="{{ variant.id }}"
data-variant-image="{{ variant.image | img_url: '400x' }}"
{% endif %}
style="background-image: url({{ color_image }}); background-color: {{ color_swatch_fallback }};">
<span class="visually-hidden">{{ value }}</span>
</a>
{%- endunless -%}
{%- endfor -%}
</div>
{%- if color_count < 2 -%}
{%- style -%}
.grid-product__colors--{{ product.id }} {
display: none;
}
{%- endstyle -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
</div>