How to flag Shopify products as "new" by date
Here’s a quick way to mark a product as being new by the date it was added to your Shopify store.
Oct 22, 2015
The trick here is to use a product’s created_at attribute to check to see how long ago it was created. If it was created before a specified amount of time, then add a flag to the product. You could apply this to both the collection.liquid page or product.liquid. If you want the sticker to be below the product title you could add this liquid markup similar to:
<h1>{{ product.title }}</h1>
{% assign product_created_at = product.created_at | date: '%s' %}
{% assign time_ago = 'now' | date: '%s' | minus: product_created_at | divided_by: 86400 %}
{% if time_ago &lt; 30 %}
<span class="new-sticker">New</span>
{% endif %}
Here we’re grabbing how many seconds the product has existed for and converting that number into days. When then compare that with however amount of days we want a product to remain “new”. In our case we chose 30, but you can change that number to whatever you like.
If you want to style it a bit, find your CSS file and add some styles. Most themes name their main CSS similar to styles.css.liquid, style.css.liquid, styles.scss.liquid, theme.css.liquid, or theme.scss.liquid. At the bottom of the file you could add something like this:
.new-sticker {
display: inline-block;
padding: 6px 8px;
background: #5bbf3c;
color: white;
}
There you have it. Now you can have products in your Shopify store automatically show a “new” tag on your products that you’ve recently added to your store.
Find this helpful? You might also like our apps:
- Customer Fields allows you to build custom registration forms and retrieve valuable data from customers at just the right time.
- Meteor Mega Menu offers a variety of beautiful dropdown menu templates which you can attach to your exisiting Shopify navigation, meaning your store could have a menu makeover in minutes.
Questions?
Feel free to comment below and we’ll respond.