How to Display the Latest Product on Shopify?

In tio, we offer a range of solutions based on the requirements and scope of the project. We do not believe it makes sense to be insistent if there is already a solution out there. Shopify is one of the tools we use occasionally. Even though the default features and themes can be a bit limited, you can always build your own theme by adding custom components. 

In our previous articles about Shopify, we clarified how to add custom fonts, how to enable multiple currencies and  how to customize both main and footer menus.

In this article, we will show how to customize Shopify themes to showcase the latest product added in a Shopify store. 

After making one or two adjustments to customize a Shopify store, you can understand how the system works and making new ones becomes easy. This article is a tutorial-like answer to the question: How can we get the latest added product in Shopify? To customize your Shopify store to suit better your needs, you’ll need to edit some code. This will be a step by step Shopify Tutorial with screenshots to showcase the latest product on your Shopify store. 

Firstly, for demonstration purposes, we started a new Shopify store to support the article with real screenshots.

As you can see, we created a simple cosmetic store by customizing the Dawn theme and creating products in the collection.

On Shopify, collections are a kind of product category where you can group products together. Collections can be determined while creating stores. They can be organized by product type, target audience’s gender, product’s material, color, size, season, sale status, or anything you would like.

You can group your products by creating collections. Thus, you can make it easier for customers to find them by category. Here are a few examples of collections that you might create: Magazines grouped by issues, clothes for men, women, or children, cosmetic products for eyes, lips, hair or body areas, etc. 

Well, could we get any of these products on any page or section? For example, every new product is added, can we get the last product added to the footer section?

When customizing a Shopify store, there are certain requirements that need to be met. Edit code is the way to go in Shopify if you want to take care of these requirements. There are specially defined codes for this in Shopify. Shopify has a range of preset code options that can be found on shopify.dev. 

We must first determine which collection the product will come from. The first thing we need to focus on is this. 

There are 8 products in the Home collection we created, as you can see in screenshots.

In the footer section, we want to display the most recent product we added to this collection.

How to display the latest product on shopify?

Let’s open the Edit Code page on our default theme (The example store is with the Dawn Theme but it doesn’t make a huge difference if your theme is different.). You can find the edit code button in the online store section. We will add our codes in the theme.liquid file.

💡 You need to create a new empty css file in the Assets folder to write your custom css codes.

First, we need to reach our collections. The code we will use for this is as follows:

{% assign collection = collections.collectionhandle %}

Furthermore, we need to be able to use products as well.

{% assign products = collections.colectionhandle.products %}

If  you have more than one collection,  you’ll need to write an extra function that will loop through all the collections and fetch the products in a specific collection by checking collection names.

Here is how: To choose a specific collection, we need to write a function that includes an if loop inside the for loop.

{% for collection in collections %}

         {%- if collection.title == “HOME” -%}

 {%- endif -%}

{% endfor %}

💡 Shopify recognizes variables we write, such as collection or collection.title. You can get not only product-related data such as collection or product name, but also a lot of other data that you can see when you try, like created time, url link etc. 

As the example case requires, we need to reach the latest added product in the Home collection. Therefore we need to write the following code:

{%- assign last_product = collection.products | last -%}     

If we wanted to reach the first product, we would have to write as follows.

{%- assign first_product = collection.products | first -%} 

Alright, we have finally reached the specific product. So, how can we show its image, title and other metadata?

We will write our codes with the same logic as we got the name of the collection.

The code needed to get the product name:

{{ last_product.title }}

The code needed to get the product image (you can change the image size as you want

): 

{{ last_product | image_url: width: 400 | image_tag: width: 300 | link_to: last_product.url }}

As a result, you can examine the whole code we wrote for the footer section was as follows:

As you can see, this is how we get the latest product.

💡 The Shopify Edit Code tool guides you through the codes that get the information you can use according to your product needs. We find this feature very useful. Keep in mind. 🙂

As a result,

To successfully create the designed store, we had to answer the question of how to use collections and products in different places and with different functions. The first step to answer this question was to create a new product in a collection so we could see how collections and products might be customized. 

See you at next articles about the Shopify store and other customization solutions that may be useful to you. ✌️