Liquid, JavaScript, themes, sales channels
Hello,
I would like to automatically have "NEW" added to products that have been added to the website within a 30 day range then turn off again after 30days.
How can this be done in the Supply theme?
Cheers
Rachel
Solved! Go to the solution
This is an accepted solution.
Like that
<div class="grid-item {{ grid_item_width }}{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}{% if NEW %} NEW{% endif %}"> {% assign date_created = product.created_at | date:'%s' %} {% assign date_now = 'now' | date:'%s' %} {% assign difference = date_now | minus: date_created %} {% if difference < 2592000 %} <span class="badge-new">NEW!</span> {% endif %} <a href="{{ product.url | within: current_collection }}" class="product-grid-item">
Hey there, Rachel!
Bo here from Shopify Support.
That is a really great idea. How better to get your customers excited about new products than letting them know they're new. Adding labels like this is easiest achieved with the use of an app. Product Labels by Secomap would be the best-rated app with this functionality in our app store. While this app allows you to add labels such as "New" on to products, I am not sure if it would do so on a timer. I would recommend reaching out to the developer here support@secomapp.com to check!
While displaying what products are new on your website is a great idea, emailing customers to let them know you have new products is even better as it brings people to your store. I would highly recommend taking a look at our guide to email marketing here.
Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!
All the Best,
Bo
To learn more visit the Shopify Help Center or the Community Blog.
Ok Im really hoping for some sort of script that I can add so it will do it automatically.
I did find the script below
{% assign date_created = product.created_at | date:'%s' %} {% assign date_now = 'now' | date:'%s' %} {% assign difference = date_now | minus: date_created %} {% if difference < 2592000 %} <span class="badge-fresh">FRESH</span> {% endif %}
I added it to product-grid-item.liquid as per below
{% unless grid_item_width %} {% assign grid_item_width = 'large--one-quarter medium-down--one-half' %} {% endunless %} {% unless image_size %} {%- assign image_size = '600x600' -%} {% endunless %} {% unless current_collection %} {% assign current_collection = collection %} {% 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 date_created = product.created_at | date:'%s' %} {% assign date_now = 'now' | date:'%s' %} {% assign difference = date_now | minus: date_created %} {% if difference < 2592000 %} <span class="badge-new">NEW!</span> {% endif %} <div class="grid-item {{ grid_item_width }}{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}{% if NEW %} NEW{% endif %}"> <a href="{{ product.url | within: current_collection }}" class="product-grid-item"> <div class="product-grid-image"> <div class="product-grid-image--centered"> {% if sold_out %} <div class="badge badge--sold-out"><span class="badge-label">{{ 'products.product.sold_out' | t }}</span></div> {% endif %} {% if product.featured_image %} {%- assign image = product.featured_image -%} {%- assign max_width = width | plus: 0 -%} {%- assign max_height = height | plus: 0 -%} {%- include 'image-logic' with width: max_width, height: max_height -%} {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} <div class="lazyload__image-wrapper no-js" style="max-width: {{ max_width }}px"> <div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;"> <img class="lazyload no-js" data-src="{{ img_url }}" data-widths="[125, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ image.aspect_ratio }}" data-sizes="auto" alt="{{ image.alt | escape }}" {% comment %}style="max-height: {{ height }}px;">{% endcomment %}> </div> </div> <noscript> <img src="{{ image | img_url: '580x' }}" srcset="{{ image | img_url: '580x' }} 1x, {{ image | img_url: '580x', scale: 2 }} 2x" alt="{{ image.alt }}" style="opacity:1;"> </noscript> {% else %} {% capture current %}{% cycle 1, 2, 3, 4 %}{% endcapture %} <div> {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }} </div> {% endif %} </div> </div> <p>{{ product.title }}</p> <div class="product-item--price"> <span class="h1 medium--left"> {% if on_sale %} <span class="visually-hidden">{{ "products.general.sale_price" | t }}</span> {% else %} <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span> {% endif %} {% include 'price' with product.price %} {% if on_sale and section.settings.product_show_compare_at_price %} <small> <s> <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span> {% include 'price' with product.compare_at_price %} </s> </small> {% endif %} </span> {% if on_sale and section.settings.product_show_saved_amount %} <span class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}"> {% assign compare_price = product.compare_at_price %} {% assign product_price = product.price %} {% include 'price-sale' %} </span> {% endif %} </div> {% if section.settings.product_reviews_enable %} <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span> {% endif %} </a> </div>
It produces what you can see in Pic 2 in the attached doc.
How can I get it to appear on all new products?
Brilliant job on finding that code. This level of coding would fall outside of our Design Policy. If a member of our community is unable to offer some guidance I would recommend checking out to HeyCarson.
All the Best,
Bo
To learn more visit the Shopify Help Center or the Community Blog.
@Pip_Berry_Store wrote:Ok Im really hoping for some sort of script that I can add so it will do it automatically.
I did find the script below
{% assign date_created = product.created_at | date:'%s' %} {% assign date_now = 'now' | date:'%s' %} {% assign difference = date_now | minus: date_created %} {% if difference < 2592000 %} <span class="badge-fresh">FRESH</span> {% endif %}I added it to product-grid-item.liquid as per below
{% unless grid_item_width %} {% assign grid_item_width = 'large--one-quarter medium-down--one-half' %} {% endunless %} {% unless image_size %} {%- assign image_size = '600x600' -%} {% endunless %} {% unless current_collection %} {% assign current_collection = collection %} {% 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 date_created = product.created_at | date:'%s' %} {% assign date_now = 'now' | date:'%s' %} {% assign difference = date_now | minus: date_created %} {% if difference < 2592000 %} <span class="badge-new">NEW!</span> {% endif %} <div class="grid-item {{ grid_item_width }}{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}{% if NEW %} NEW{% endif %}"> <a href="{{ product.url | within: current_collection }}" class="product-grid-item"> <div class="product-grid-image"> <div class="product-grid-image--centered"> {% if sold_out %} <div class="badge badge--sold-out"><span class="badge-label">{{ 'products.product.sold_out' | t }}</span></div> {% endif %} {% if product.featured_image %} {%- assign image = product.featured_image -%} {%- assign max_width = width | plus: 0 -%} {%- assign max_height = height | plus: 0 -%} {%- include 'image-logic' with width: max_width, height: max_height -%} {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} <div class="lazyload__image-wrapper no-js" style="max-width: {{ max_width }}px"> <div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;"> <img class="lazyload no-js" data-src="{{ img_url }}" data-widths="[125, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ image.aspect_ratio }}" data-sizes="auto" alt="{{ image.alt | escape }}" {% comment %}style="max-height: {{ height }}px;">{% endcomment %}> </div> </div> <noscript> <img src="{{ image | img_url: '580x' }}" srcset="{{ image | img_url: '580x' }} 1x, {{ image | img_url: '580x', scale: 2 }} 2x" alt="{{ image.alt }}" style="opacity:1;"> </noscript> {% else %} {% capture current %}{% cycle 1, 2, 3, 4 %}{% endcapture %} <div> {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }} </div> {% endif %} </div> </div> <p>{{ product.title }}</p> <div class="product-item--price"> <span class="h1 medium--left"> {% if on_sale %} <span class="visually-hidden">{{ "products.general.sale_price" | t }}</span> {% else %} <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span> {% endif %} {% include 'price' with product.price %} {% if on_sale and section.settings.product_show_compare_at_price %} <small> <s> <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span> {% include 'price' with product.compare_at_price %} </s> </small> {% endif %} </span> {% if on_sale and section.settings.product_show_saved_amount %} <span class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}"> {% assign compare_price = product.compare_at_price %} {% assign product_price = product.price %} {% include 'price-sale' %} </span> {% endif %} </div> {% if section.settings.product_reviews_enable %} <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span> {% endif %} </a> </div>It produces what you can see in Pic 2 in the attached doc.
How can I get it to appear on all new products?
How can I get it to appear on all new products?
>>> if you added it to product-grid-item.liquid, it appears to all products news, why doesn't work ?
>>> For me it's work !
>>> Can you added somes products to test ? And send screenshots if the "New" don't show !
Add the code after(inside the block not after the block just after the open <div> on below)
<div class="grid-item..">
This is an accepted solution.
Like that
<div class="grid-item {{ grid_item_width }}{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}{% if NEW %} NEW{% endif %}"> {% assign date_created = product.created_at | date:'%s' %} {% assign date_now = 'now' | date:'%s' %} {% assign difference = date_now | minus: date_created %} {% if difference < 2592000 %} <span class="badge-new">NEW!</span> {% endif %} <a href="{{ product.url | within: current_collection }}" class="product-grid-item">
Yes that has worked putting it a bit further down!! Awesome thanks for your help.
Next Question any ideas on making it red and bold?
@Pip_Berry_Store wrote:Yes that has worked putting it a bit further down!! Awesome thanks for your help.
Next Question any ideas on making it red and bold?
Do you have an example?
I used this
<span class="badge-new custom-badge-new-label">NEW</span>
.custom-badge-new-label {
background-color: #f74945;
padding: 10px;
color: white;
border-radius: 5px;
font-weight: 700;
font-size: 15px;
}
I added the CSS above to the theme.scss.liquid file in Debut Theme
This is brilliant as I was looking for exactly this so thank you!
Is there a way of using this same code on the product pages as well?
Cheers
It worked. Thanks.
Hi, how can I apply this code to my theme to show new automatic labels in mu products
HI, How I can move the word new in the middle of the picture?
Hi,
Most themes support this option. Its how it has been defined in the coding.
in shopify theme admin tag your products: label_new this will put new label on picture. label_sale = Sale label label_Sold out = sold out
Some themes have predefined new automated with adjustable times when you add product it puts new label and removes after the set time from admin, Gecko theme is great for this..
I have added these tags but does not work, can you elaborate on how you did this?
It worked! Thank you so much.
However in my case, I had to add an underscore before tag_new, which was _tag_new
I created a tutorial video demonstrating exactly how to achieve this in 2024. You can watch it here: https://youtu.be/xGVtvlJT8Y4?si=bO2RXU9Qlxuo8bje. Let me know if it helps!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024