Liquid Has Something New

ESTIMATE 1-MINUTE READ

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

Before making modifications to your Shopify theme, it is good to duplicate it. Within Admin, under the lefthand navigation, choose Online Store: Themes: Actions: Duplicate.

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. Are you interested in more tips like this? Please indicate so within the comment field.

Join Discussion