How to Automatically Add NEW Labels to Shopify Products
Published on Jun 20, 2024
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?