FROM CACHE - en_header

New Arrival in Title

Solved
kennams
Tourist
11 0 1

Hello,

I am wondering if there is a way to add a New Arrival notation above the product title like in this image? I know how to create a collection, but I'd like to have it shown on each of the products as well. I currently have the Debut theme, so I am not sure if it's theme specific to be able to do this or an app, etc. Thank you!

Newarrival.jpg

Accepted Solutions (2)

Accepted Solutions
JoesIdeas
Shopify Expert
1769 154 462

This is an accepted solution.

You can do this with some Liquid code.

 

First find the file that displays the product thumbnails. It's usually a snippet like product-thumbnail.liquid, product-card.liquid, etc.

 

Then read the code to see where the product title is being displayed. It might be something like <h2>{{ product.title }}</h2>

 

Then you can put your custom code above that.

 

This should do it:

 

{% assign created = product.published_at | date:'%Y%m%d' %}
{% assign today = 'now' | date:'%Y%m%d' %}
{% assign diff = today | minus: created %}
{% if diff < 30 %}<p class="new-arrival-badge">NEW ARRIVAL</p>{% endif %}

 

 

You can change the number 30 to whatever cutoff you want for the number of days it's considered "new".

 

You can style the text using a .new-arrival-badge CSS class.

 

You can swap NEW ARRIVAL text for an image if you want.

• Creator of Order Automator (app to save time + automate tasks, monitor orders, tag, fulfill, FBA)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people

View solution in original post

JoesIdeas
Shopify Expert
1769 154 462

This is an accepted solution.

UPDATE (I wasn't able to edit my previous answer):

 

That solution I used doesn't account for carrying over to the next month.

 

The better solution is to do the math difference by seconds first, then convert to days.

 

Here is the new logic snippet:

{% assign created = product.published_at | date: '%s' %}
{% assign now = 'now' | date: '%s' %}
{% assign diff = now | minus: created | divided_by: 3600 | divided_by: 24 %}
    
{% if diff < 39 %}<!-- Do stuff -->{% endif %}
    
• Creator of Order Automator (app to save time + automate tasks, monitor orders, tag, fulfill, FBA)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people

View solution in original post

Replies 6 (6)
JoesIdeas
Shopify Expert
1769 154 462

This is an accepted solution.

You can do this with some Liquid code.

 

First find the file that displays the product thumbnails. It's usually a snippet like product-thumbnail.liquid, product-card.liquid, etc.

 

Then read the code to see where the product title is being displayed. It might be something like <h2>{{ product.title }}</h2>

 

Then you can put your custom code above that.

 

This should do it:

 

{% assign created = product.published_at | date:'%Y%m%d' %}
{% assign today = 'now' | date:'%Y%m%d' %}
{% assign diff = today | minus: created %}
{% if diff < 30 %}<p class="new-arrival-badge">NEW ARRIVAL</p>{% endif %}

 

 

You can change the number 30 to whatever cutoff you want for the number of days it's considered "new".

 

You can style the text using a .new-arrival-badge CSS class.

 

You can swap NEW ARRIVAL text for an image if you want.

• Creator of Order Automator (app to save time + automate tasks, monitor orders, tag, fulfill, FBA)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
kennams
Tourist
11 0 1

Thank you so much, that worked!! I really appreciate it!

JoesIdeas
Shopify Expert
1769 154 462

This is an accepted solution.

UPDATE (I wasn't able to edit my previous answer):

 

That solution I used doesn't account for carrying over to the next month.

 

The better solution is to do the math difference by seconds first, then convert to days.

 

Here is the new logic snippet:

{% assign created = product.published_at | date: '%s' %}
{% assign now = 'now' | date: '%s' %}
{% assign diff = now | minus: created | divided_by: 3600 | divided_by: 24 %}
    
{% if diff < 39 %}<!-- Do stuff -->{% endif %}
    
• Creator of Order Automator (app to save time + automate tasks, monitor orders, tag, fulfill, FBA)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
kennams
Tourist
11 0 1
Thank you so much for the update! I will add that code!
BugShallNotPass
Shopify Partner
32 1 5

In case you want to create a standalone collection with all the new arrival products you might want to use a tag-based solution. You can tag your products with new-arrivals (or similar) and then create an automatic collection with a condition like Product tag is equal to new-arrivals as per below:

2021-03-05_21-52-58.png

Try using the New Arrivals Shopify app if you want your products to be automatically tagged with any tag defining a "new arrival". It can automatically tag and untag products based on creation or publishing date. You can set up a concrete period of time the products should be considered to be "new". Although you would still need to make a front-end theme adjustment to show the badge, the app will help you avoid manually keeping track of those products i.e. it will automatically remove the tag after a specified period of time.

I hope the above might be helpful to you anyone looking for a similar solution.

Xmas Shopify app - beautiful falling snow animation
New Arrivals Shopify app - automatically tag/untag products based on creation/publishing date
Motion - scrolling text announcements
Stash Shopify app - hide products from search results and search engines
superfinds888
Tourist
11 0 0

hi there, I added the code to two areas I see the words  "product title" (See pics below) but it didn't work.  Please help.  Thanks, Di

 

I added the Screenshot 2021-08-11 at 11.20.50 AM.pngScreenshot 2021-08-11 at 11.21.04 AM.png