CODE

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

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.

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.

Code samples include hidden formatting characters that can interfere with operation. Paste into a text editor and reveal invisibles before pasting into Shopify theme. Replace non-breaking spaces (&nbsp;) with regular space. Remove HTML line breaks (<br />). You may also need to replace HTML less-than (&lt;) and greater-than (&gt;) with actual characters. Are you interested in more tips like this? Please indicate so within the comment field.

Add Your Comment