Hi everyone,
I would like to add a “new” label to newly added products just like the “out of stock” label in the picture below.
I ideally would like the label to automatically appear for 10 days after the product was added to the store.
I use Sense theme and the store is: https://shop.bikeflip.nl/
Anyone has advice on how the code should look like and where to implement it?
Hi @PaulinaGdaniec ,
Please go to card-product.liquid file and add code here:
Code:
{% assign date_created_at = card_product.created_at | date: '%s' %}
{% assign now_time = 'now' | date: '%s' %}
{% assign check_new = now_time | minus: date_created_at | divided_by: 86400 %}
{%- if check_new <= 10 -%}
new
{%- endif -%}
Hope it helps!
I’ve implemented the code in thecard-product.liquid file in the place you indicated but sadly there’s no changes on the shop 
Hi @PaulinaGdaniec ,
Can you send me the full code of card-product.liquid file, I will check it.
{% comment %}
Renders a product card
Accepts:
- card_product: {Object} Product Liquid object (optional)
- media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_rating: {Boolean} Show the product rating. Default: false
- extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
- lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
- show_quick_add: {Boolean} Show the quick add button.
- section_id: {String} The ID of the section that contains this card.
Usage:
{% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}
{{ 'component-rating.css' | asset_url | stylesheet_tag }}
{%- style -%}
.card__heading.h5{
font-size: calc(var(--font-heading-scale) * 1.5rem);
font-weight: bold;
}
{%- endstyle -%}
{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == 'portrait'
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == 'adapt'
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == nil
assign ratio = 1
endif
-%}
{%- if card_product.featured_media -%}
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}
{%- if card_product.media[1] != nil and show_secondary_image -%}
{%- endif -%}
{%- endif -%}
###
{%- if card_product.metafields.custom.name != nil and card_product.metafields.custom.name != '' -%}
{{ card_product.metafields.custom.name | escape }}
{%- else -%}
{{ card_product.title | escape }}
{%- endif -%}
{%- if card_product.available == false -%}
{{ 'products.product.sold_out' | t }}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{{ 'products.product.on_sale' | t }}
{%- endif -%}
{% assign date_created_at = card_product.created_at | date: '%s' %}
{% assign now_time = 'now' | date: '%s' %}
{% assign check_new = now_time | minus: date_created_at | divided_by: 86400 %}
{%- if check_new <= 10 -%}
new
{%- endif -%}
###
{%- if card_product.metafields.custom.name != nil and card_product.metafields.custom.name != '' -%}
{{ card_product.metafields.custom.name | escape }}
{%- else -%}
{{ card_product.title | escape }}
{%- endif -%}
{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}
{{ card_product.vendor }}
{%- endif -%}
{{ block.settings.description | escape }}
{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}
{{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}
({{ card_product.metafields.reviews.rating_count }})
{{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}
{%- endif -%}
{% comment %}Start automatically added Judge.me widget{% endcomment %}
{% render 'judgeme_widgets', widget_type: 'judgeme_preview_badge', concierge_install: true, product: card_product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}
{% render 'price', product: card_product, price_class: '' %}
{%- if show_quick_add -%}
{%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%}
{%- if card_product.variants.size == 1 -%}
{%- else -%}
{%- endif -%}
{%- endif -%}
{%- if card_product.available == false -%}
{{ 'products.product.sold_out' | t }}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{{ 'products.product.on_sale' | t }}
{%- endif -%}
{%- else -%}
###
{{ 'onboarding.product_title' | t }}
###
{{ 'onboarding.product_title' | t }}
{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}
{{ 'products.product.vendor' | t }}
{%- endif -%}
{% render 'price' %}
{%- endif -%}
@Litos Thank you for helping out!
Hi @PaulinaGdaniec ,
Please change all code:
{% comment %}
Renders a product card
Accepts:
- card_product: {Object} Product Liquid object (optional)
- media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_rating: {Boolean} Show the product rating. Default: false
- extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
- lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
- show_quick_add: {Boolean} Show the quick add button.
- section_id: {String} The ID of the section that contains this card.
Usage:
{% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}
{{ 'component-rating.css' | asset_url | stylesheet_tag }}
{%- style -%}
.card__heading.h5{
font-size: calc(var(--font-heading-scale) * 1.5rem);
font-weight: bold;
}
{%- endstyle -%}
{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == 'portrait'
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == 'adapt'
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == nil
assign ratio = 1
endif
-%}
{%- if card_product.featured_media -%}
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}
{%- if card_product.media[1] != nil and show_secondary_image -%}
{%- endif -%}
{%- endif -%}
###
{%- if card_product.metafields.custom.name != nil and card_product.metafields.custom.name != '' -%}
{{ card_product.metafields.custom.name | escape }}
{%- else -%}
{{ card_product.title | escape }}
{%- endif -%}
{%- if card_product.available == false -%}
{{ 'products.product.sold_out' | t }}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{{ 'products.product.on_sale' | t }}
{%- endif -%}
{% assign date_created_at = card_product.created_at | date: '%s' %}
{% assign now_time = 'now' | date: '%s' %}
{% assign check_new = now_time | minus: date_created_at | divided_by: 86400 %}
{%- if check_new <= 10 -%}
new
{%- endif -%}
###
{%- if card_product.metafields.custom.name != nil and card_product.metafields.custom.name != '' -%}
{{ card_product.metafields.custom.name | escape }}
{%- else -%}
{{ card_product.title | escape }}
{%- endif -%}
{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}
{{ card_product.vendor }}
{%- endif -%}
{{ block.settings.description | escape }}
{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}
{{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}
({{ card_product.metafields.reviews.rating_count }})
{{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}
{%- endif -%}
{% comment %}Start automatically added Judge.me widget{% endcomment %}
{% render 'judgeme_widgets', widget_type: 'judgeme_preview_badge', concierge_install: true, product: card_product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}
{% render 'price', product: card_product, price_class: '' %}
{%- if show_quick_add -%}
{%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%}
{%- if card_product.variants.size == 1 -%}
{%- else -%}
{%- endif -%}
{%- endif -%}
{%- if card_product.available == false -%}
{{ 'products.product.sold_out' | t }}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{{ 'products.product.on_sale' | t }}
{%- endif -%}
{% assign date_created_at = card_product.created_at | date: '%s' %}
{% assign now_time = 'now' | date: '%s' %}
{% assign check_new = now_time | minus: date_created_at | divided_by: 86400 %}
{%- if check_new <= 10 -%}
new
{%- endif -%}
{%- else -%}
###
{{ 'onboarding.product_title' | t }}
###
{{ 'onboarding.product_title' | t }}
{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}
{{ 'products.product.vendor' | t }}
{%- endif -%}
{% render 'price' %}
{%- endif -%}
Here is a very quick and clean solution to add the new label. Please watch https://youtu.be/xGVtvlJT8Y4?si=bphndAZeAoiJTU7a