How to Automatically Add NEW Labels to Shopify Products

Published on Jun 20, 2024

By Aisha Patel

#Shopify#E-commerce#Web Development
Tied pile of flax cloth on wooden table

Are you looking to highlight your newest products and create a sense of excitement for your customers? Adding a “NEW” label to recently added items can be an effective way to draw attention and boost sales. In this comprehensive guide, we’ll explore how to automatically add “NEW” labels to products added within the last 30 days in Shopify, with a focus on the Supply theme.

Understanding the Importance of “NEW” Labels

Capturing Customer Attention

In the fast-paced world of e-commerce, grabbing your customers’ attention is crucial. New product labels serve as visual cues that instantly communicate fresh offerings to your audience.

Encouraging Exploration

When shoppers see a “NEW” label, they’re more likely to click on the product and explore further. This increased engagement can lead to higher conversion rates and sales.

Creating a Sense of Urgency

Limited-time labels like “NEW” can create a sense of urgency, encouraging customers to make a purchase before they miss out on the latest trends.

Implementing Automatic “NEW” Labels in Shopify

Using Liquid Code

The most effective way to add automatic “NEW” labels to your products is by using Liquid code in your Shopify theme. This method allows for customization and doesn’t require any additional apps.

Step 1: Locate the Product Grid Item File

First, you’ll need to find the product-grid-item.liquid file in your theme. This file controls how individual products are displayed in collection pages and search results.

Step 2: Add the Liquid Code

Insert the following code snippet into your product-grid-item.liquid file:

{% assign days_limit = 30 %}
{% assign seconds_since_creation = "now" | date: "%s" | minus: product.created_at | date: "%s" %}
{% assign days_since_creation = seconds_since_creation | divided_by: 86400 %}
{% if days_since_creation < days_limit %}
  <span class="badge-new custom-badge-new-label">NEW</span>
{% endif %}

This code checks if a product was created within the last 30 days and adds a “NEW” label if it meets the criteria.

Step 3: Position the Code

For optimal results, place this code snippet just after the opening “ tag within the product grid item block. This ensures the label appears in the correct position relative to the product image.

Styling Your “NEW” Label

To make your “NEW” label stand out, you’ll want to add some custom CSS. This will control the appearance of the label, including its color, size, and position.

Adding Custom CSS

Add the following CSS to your theme’s theme.scss.liquid file:

.custom-badge-new-label {
  background-color: #f74945;
  padding: 10px;
  color: white;
  border-radius: 5px;
  font-weight: 700;
  font-size: 15px;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

This CSS creates a bold, red label that stands out against your product images. Feel free to adjust the colors and positioning to match your store’s aesthetic.

Troubleshooting and Fine-Tuning

Checking for Proper Implementation

After adding the code, test it by creating a new product and verifying that the “NEW” label appears. If it doesn’t show up, double-check that you’ve placed the code in the correct location within your theme files.

Adjusting the Time Frame

If you want to change how long products are considered “new,” simply adjust the days_limit variable in the Liquid code. For example, to show the label for 60 days instead of 30, change {% assign days_limit = 30 %} to {% assign days_limit = 60 %}.

Customizing Label Appearance

Experiment with the CSS to create a label that fits your brand. You can change the background color, text color, font size, and even add animations to make it more eye-catching.

Enhancing Your “NEW” Label Strategy

Combining with Email Marketing

While visual labels on your site are effective, don’t forget about the power of email marketing. Consider sending out newsletters to your subscribers when you add new products, driving traffic directly to these fresh offerings.

Using Product Tags

Some Shopify themes support product tagging for labels. Try adding tags like label_new to your products to see if your theme has built-in support for displaying labels based on tags.

Exploring App Solutions

If you’re looking for more advanced features or don’t want to modify your theme code, there are Shopify apps available that can add “NEW” labels to your products. These apps often come with additional customization options and may be easier to implement for those less comfortable with code.

By implementing automatic “NEW” labels for your recently added products, you’re taking a significant step towards improving your store’s user experience and potentially boosting sales. Remember to regularly review and update your labeling strategy to ensure it continues to align with your business goals and customer preferences.

Take Our Quick Quiz:

Which primary product image do you think has the highest conversion rate?