Liquid Has Something New

Here is an easy way to auto­ma­tical­ly label a product created on a new product page within the current year as new.

Use Liquid Code to Add New Product Alert

You could flag products as new items with product tags. Then use those tags to trigger visible labels on the product grid within collections. But then you must remember to remove them later. There is a quick and easy way to automatically flag products created within the current year as new.

Roll Up Your Sleeves

Shopify is an e-commerce platform on which sellers build custom websites based on themes. Each theme adheres to similar underlying structure based on programming code called Liquid.

Before making modifications to your Shopify theme, it is good to duplicate it. Within Admin, under the lefthand navigation, choose Online Store: Themes. Click the menu for the active theme, Actions: Duplicate. Work on the duplicate and preview before activating when done.

Caution: Modifying Liquid code may invalidate your theme for future updates by the developer. Anything you add will require manual migration to a different theme, with possible incompatibility.

Now you access the Liquid programming code with Actions: Edit code. The style should be added to the bottom of the CSS file so it is accessible throughout the site. Choose colors and sizes to match your site theme.

.mortice {
 display: block;
  font-size: 9px;
  color: #ff0000;
  margin: 4px 0;
  padding: 2px 6px;
  background: #333;
}

Shopify themes created within the past few years use Sections and Templates. If you see Sections, then edit the file under this area called product.template.liquid. If not, edit the file under Templates called product.liquid. Displaying on collection pages likely requires adding code to a Snippet named something like product-item. In the area where you would like it to appear, insert the code shown below:

{%- assign product_year = product.created_at | split: '-' | first | abs -%}
{%- assign current_year = 'now' | date: '%Y' | abs -%}
{%- if product_year == current_year -%}
 <span class="mortice">New Item</span>
{%- endif -%}

There is a simple comparison to see if the year within the product page creation date equals the current year. If yes, “New Item” (or whatever message you want) is displayed. This feature is in use within ClinicalPosters website collections.

The downside is that nothing is new when a new year begins. If you want to flag items new for a specified number of days across calendar years, use the code below that is discussed here:

<!-- To subtract two dates, convert both to Unix timestamps, subtract the timestamps, and divide the value by 86400 to turn it into a number of days -->
{% assign start_date = product.created_at | date: '%s' %}
{% assign end_date = 'now' | date: '%s' %}
{% assign days_elapsed = end_date | minus: start_date | divided_by: 86400 %}
{% assign days_formatted = days_elapsed | round %}
{% if days_formatted < 365 %}
 <span class="mortice">New Item</span>
{% endif %}