Helium Development

Saved

- Edit All
Here's a quick way to mark a product as being new by the date it was added to your Shopify store.

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 < 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.

Questions? Feel free to comment below and we’ll respond.

Here's a quick way to mark a product as being new by the date it was added to your Shopify store.