Shopify Homepage: How to Show Off Your Products to Excite Shoppers

September 9, 2021
by
Sean Flannigan

Shopify Homepage: How to Show Off Your Products to Excite Shoppers

September 9, 2021
by
Sean Flannigan
Get the latest straight to your inbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Share on:

First impressions mean a lot. We, the shoppers and web surfers of the world, end up looking at a lot of websites and online stores as we peruse the wonderful world of the internet. 

And, during that web surfing, we make a lot of judgments about those stores and sites that will affect how we interact with them in the future. If the store was bleh, we’re not likely to go back.

But, if the store was compelling and well-designed, we’re going to come back to it and might even spend some of our hard-earned cash there. Yay!

The page that we landed on that made us say “Wow, that’s cool” (or some variation of thereof) was most likely that store’s homepage. 

It probably had great product photos, a smart headline, thoughtful value propositions, and copy that gave us a full sense of the company and its product (maybe it made us smile too). What a cool homepage that was, right? 

Homepages get the most traffic of any one store page and therefore, they need to make a splash.

In this post, we’ll cover:

OK, let’s start with a homepage’s purpose.

What is the purpose of a homepage?

Your homepage has a lot of similarities to a great landing page. Both serve as sales funnels for converting traffic. Both use copy, visuals, and CTAs to drive those conversions. 

But, whereas landing pages are often driving toward one particular goal, a homepage provides a multitude of CTAs for the shopper to choose from. It isn’t one action but any action (outside of leaving) that the homepage is going for.

The biggest goal of your homepage is to welcome and then entice shoppers further into the site through one of the many doors it provides—your products, your About Us page, your collection pages, your blog, a subscription form. 

The visitors to this page represent your overall target audience and the choices they make—the doors they choose to walk through—further segment them and push them toward purchase.

Don’t overwhelm them but show them enough to make it easy for them to find the CTA that fits their needs.

So, the overall purpose is to get those clicks. But, how do you do that? 

With the right set of elements.

Elements of a great Shopify homepage

A homepage, being your first introduction to many visitors, consists of a variety of necessary elements.

At the most basic level, you need to say, “Hi, this is who we are, this is what we sell, this is why you want to buy from us.” But, without really saying that.

So, instead, you use great design, thoughtful UX, lovely images, and smart copywriting to say the above. The elements of a great homepage are:

  • Easy navigation. When your visitor has been convinced of the value of your product, you want to make it SO EASY to find the thing they might end up buying from you. Your navigation bar needs to contain links to your top level product categories and the most important pages.
  • Above the fold content that wows. You can’t count on visitors scrolling down your homepage, so you need to give them a reason to. Your above the fold content—headline, visuals, product tease—is your chance to wow them into proceeding. 
  • Stunning visuals. Humans are visual creatures so pretty images, illustrations, and animations go a long way toward convincing us to buy. Using great lifestyle and studio photography for your products helps the shopper make the purchasing decision. Add to that a design with a great color palette and some inspired GIFs or videos, and you’ll have some impressed new customers.
  • Compelling CTAs. Your call to action buttons better not say Click Here because nobody is biting. With only two or three words, you need to get visitors to click through. Urgency is often enough, which is why many great CTAs utilize the word “Now” or “Today”. Luckily, if your product images are exciting, the button that follows can be as simple as Shop Now.
  • All about the product. This is key. The reason visitors are there is to check out the inventory and envision your products in their lives. Great copy and powerful images that center your products will drive your target audience to click through and learn more about your brand.

#cta-mini-pb#Create a custom Shopify homepage with all the right elements. Start your free trial here.


Shopify homepage examples that center the product

Knowing the elements of a great homepage can go a long way toward building your own. But sometimes the best way to learn is to see it in action on successful Shopify stores.

Here are a few great examples of Shopify homepages that put their product front and center.

PANGAIA

The homepage of this sustainable loungewear brand leads with the simple yet powerful color palette that they use throughout their clothing line.

They feature a variety of their products on the page, both on a diverse group of models and laid out on a white background. Using a grid of product collections, a grid of individual products, a ‘best of’ product slider, and a lifestyle photo, the breadth of their products is on full display.

top half pangaia homepage loungewear brand
A variety of product images shows off PANGAIA's selection

Furthermore, the use of a slight zoom on certain product collection images as well as a montage GIF for their New Arrivals collection draws attention to these elements and encourages shoppers to click through.

bottom half pangaia homepage loungewear brand
Moving images draw attention (you can see images changing in the screenshot even)

#cta-paragraph-pb#PANGAIA not only kills it with their homepage, they also get the rest of their store right. Check them out, along with a ton of other great stores in our Top Shopify Stores roundup.

mnml

This LA-based clothing brand keeps it simple (and minimal) by using two sliders—one exploring a variety of new collections and another singling out best-selling individual products. 

mnml homepage top half apparel denim
You can slide over to see more collections on mnml's homepage

#cta-paragraph-pb#Shogun’s slider element makes it easy to add striking product images while being mindful of space.

The hero image is used to advertise their latest product collection and they wrap up their appropriately minimal homepage with some social proof in the form of a shoppable Instagram slider, a carousel of flattering quotes, and a ‘Featured in’ logo footer.

mnml homepage bottom half slider element pants
Subtle yet powerful social proof

This goes to show that you can do a lot with a little.

Allbirds

This sustainable shoe and apparel brand leads with its iconic sneaker made of natural materials. Their lifestyle photos make shoppers want to own a pair and feel the obvious comfort of the model.

Their copy leans on the selling point of luxurious comfort and follows that up with their message of sustainability. The copy is short and compelling, complimenting the strong images with clear value propositions.

allbirds homepage top half shoes leggings shorts
Great copy, strong images

They use a slider to show off their collections, splitting them up into clear categories—running, new arrivals, colorful tees, basics, best sellers, and more.

The CTAs are simple—natural suggestions to the content that precedes them—and lead visitors to products, collections, their sustainability story, how the products are made, their blog posts, and their newsletter.

allbirds homepage bottom half sustainability message
So many compelling pages to visit

Mahabis

Slipper brand Mahabis doesn’t go long with their homepage but still manages to really show off the breadth of their specialized product line.

Without using a ton of copy, they demonstrate the unique selling points of their slipper—from its breathability and simplicity to its washability and versatility. In the middle of these simple selling points, the slipper twirls in an eternal 360 degree spin, showing you every little detail.

mahabis homepage top half slippers featured products
Now that's centering the product

Above the fold, a hero carousel of cozy scenes shows you what you are missing. Little copy is needed to accompany the images. Below this, you can choose from a series of icon sized product options to deliver you straight to the right product page.

mahabis homepage bottom half cta images
Learn all about the product by clicking through an image on their homepage

Near the bottom of the page, a grid of images (and GIFs) lead visitors to a variety of pages—be it their sustainability claims, their flagship slipper product page, or their help center article about machine washability.

#cta-visual-pb#<cta-title>Your homepage could look this good<cta-title>Try Shogun for free and start building out your perfect homepage for a totally unique customer experience.Start building for free


Featuring products on your Shopify homepage

Obviously, you want your homepage to show off those products you’ve put so much work into. And, so do your shoppers.

Featuring your products your most central store page is easy with Shopify. It starts with creating product collections and featuring them in your theme’s customization tool.

You can show just a few key products or show off your whole catalog by using collections. Depending on your theme, there are certain limits to how many products can be included in each collection.

To show all your products on your homepage, keep reading to learn how to do it no matter what theme you are using.

How to show all products on your Shopify homepage

New Shopify stores start out with the Debut theme, which limits the number of products that can be in a “Featured collection” to 25.

Other themes have their own limits—30 for the Simple theme and 50 for the Brooklyn theme.

So, the theme you use can change how you go about featuring all your products on your homepage. If you have less than 25, 30, or 50 products, it’s rather simple to show all your products in a featured collection.

If you have more than that product limit, it’s a little more complicated. But, no worries. We’ll break it down step by step.

For this demonstration, we’ll be using the Brooklyn theme. Nonetheless, the process is nearly identical. Let’s get into it and you’ll see.

Adding one featured collection to your homepage

If you don’t need to worry about your theme’s product limit for collections, here’s a simple way to add all your products to your homepage.

1. Once in your Shopify dashboard, click on Products along the left side of your screen. And then click on Collections.

shopify dashboard products
shopify dashboard product collections

2. Find the big green “Create collection” button and click that thing. Note that the existing “Home page” collection is set as the “Featured collection” on your homepage by default. 

shopify dashboard create collection

3. You get the option of manually adding products to a collection or automating the process via rules. 

To capture all products with the Automated option, you can simply set “Product price is greater than $0”. Any products with pricing will automatically be included in the new collection. Save your collection.

shopify dashboard product collections automated option
shopify dashboard product collection automated conditions
There are a number of conditions you can add to create the right collection

4. Now, go to Online Store > Themes along the left side of your screen. Then click the green “Customize” button on your Current theme.

shopify dashboard online store themes
shopify dashboard customize brooklyn theme

5. In the theme customization editor, you’ll see your page sections along the left side. Select Featured collection and click “Change” in the menu that appears on the right.

shopify dashboard theme customization featured collection
shopify dashboard change featured collection theme customization

6. Choose the new collection you created and click on the green “Select” button. The grid style will depend on your theme. For Brooklyn, it defaults to “Collage” but can be switched to a traditional “Grid” alignment in the Grid style dropdown menu. 

shopify dashboard choose collection to feature
shopify dashboard edit grid pattern for featured collection
Collage style grid
shopify dashboard traditional grid pattern collection
Traditional grid

Note: For the Debut theme, you only get the option of a traditional grid but can change the number of products per row and number of rows. To accommodate the max of 25, you’d set it to five products per row and five rows.

shopify dashboard debut theme grid options featured collection
Debut's grid options

Adding multiple product collections to your homepage

If you have more products than the limit allows for (like the 25 for Debut), then the above process wouldn’t really work.

If it was the matter of a few extra products, you could switch to another theme that allows for more products per featured collection—like Brooklyn, for instance. If that theme works for you and you’ve got fewer than 50 products, just refer to the above and you are set.

If you have more than 50 products, keep reading. You won’t find a theme to accommodate that many products in one collection. Emphasis on the one collection here.

The solution is rather simple—multiple featured collections on your homepage.

So, if you were using the Debut theme, you could use three collections to feature up to 75 products.

Let’s see how.

1. Go to Products > Collections and click the green “Create collection” button to start on your first product collection. Depending on your theme and the product limit, you’ll have to strategize the number of collections you’ll need and how you’ll split them up.

If you don’t care about categorizing your collections, you can just manually split them up evenly into a few collections. If you’d rather have them categorized, use the Automated option and split them up via rules (by product types or tags, for example).

Just make sure your rules don’t add more than the featured collection product limit for your theme (e.g. Debut’s 25 product limit). Create and save your collections.

shopify dashboard product collections
shopify dashboard create three collections with all products
Three collections, each limited to the theme's homepage collection limit

2. Now go to Online store > Themes and click on the green “Customize” button in the Current theme section.

shopify dashboard customize current theme brooklyn

3. Once in the theme customization editor, click Add section along the left side of the screen. Then click Featured collection. Add as many collections to get you to the number you created in the previous step.

shopify dashboard add section to theme homepage
shopify dashboard add featured collection section
Do this for as many collections as you want to feature

4. Click into each Featured collection section on the left and in the menu (on the right) select the collections you created for each. 

You can arrange the “Featured collection” sections in whatever order you prefer (they can be together at the top of the page, together at the bottom of the page, dispersed throughout the page with different sections in between them, etc.).

shopify dashboard select collection to feature
shopify dashboard arrange multiple collections on homepage
Featured collections can be dragged into place to fit your vision

5. Each section has a default heading simply titled “Featured collection”. You can stick with this, change the heading to something else, or leave it out entirely. 

With multiple collections, removing the headings on the subsequent sections creates a seamless look if your featured collections are all arranged together. This works well if your collections aren’t sorted by categories.

If your collections do represent product categories, you can use the headings to differentiate these products.

shopify dashboard update featured collection heading to match
Update the heading or remove it entirely

When you’re done, save your changes to finish displaying all your products on your homepage.

Show off your featured products in a slider

With Shogun Page Builder, you can also easily add your products to a slider element

Shoppers can easily interact with these product collections without the products taking up as much space on the page.

Shogun Page Builder makes it easy to add your products to a slider element. Just drag and drop the slider element right where you want it on your page and then drop a product collection into the slider element.

You’ll be able to choose the number of slides in your slider element and the number of products and columns per row in your product collection. You can also set the slider to automatically move to the next slide or simply give that power to your visitors.

shogun page builder add slider
Using a slider can make good use of page space

#cta-mini-pb#Show off your products with our slider element. Start building your store for free.


Other elements to include on your Shopify homepage

While featuring your products on your homepage is super important, you need other elements to become successful.

According to Forbes, emotional appeal and a subscription option are two features that every homepage should have. 

Shogun Page Builder can help you in both of these areas. 

Insert video on your homepage

To grab the emotions of your audience, you can’t go wrong with a well-made and well-placed video.

Text and images are great, but at the end of the day, they are static and don’t have the potential to move visitors like video. Life is in motion and so should parts of your homepage.

With video, it’s possible to recreate the experience of actually interacting with a human being. 

Shogun makes it easy to add video to your Shopify homepage. All you need to do is drag and drop the video element onto your page. No coding required. 

Also, there are many options that you can adjust to customize the video according to your preferences. For example, you can choose whether or not the video will automatically play when the page loads. 

shogun page builder add video element
Shoppers love a good video

#cta-mini-pb#Start adding video to your store today. Nab your free trial to get started.


Capture leads on your homepage with forms

Sometimes visitors aren’t yet ready to commit to buying something. But, that doesn’t mean they don’t want to stay in touch! 

A subscription form gives them the option to hear more about you without having to make a purchase right away. You can collect their info and continue to market to them through newsletters and special offers.

Adding a form with Shogun is as easy as adding a video. Again, just drag and drop. 

This element can be customized as well—you can change the text color, change the background color, add or remove fields, and much more. 

shogun page builder add forms
Capture customer info to continue marketing to them

That’s only the tip of the iceberg when it comes to the elements available in Shogun

It’s like having dozens of apps in one. This mix of powerful features and an intuitive interface allows you to significantly reduce the amount of time it takes to make pages for your store. 

Show off your products to increase homepage conversions

By showing all products on your homepage, you should be able to increase your conversion rate by reducing the number of steps there are between browsing products and making a purchase. 

And with the Shogun Page Builder, you can easily add everything else you need to create a highly effective homepage. 

#cta-visual-pb#<cta-title>Create your perfect Shopify homepage today<cta-title>Start building for free with Shogun Page Builder to create a truly custom homepage that really converts.Get started now

Sean Flannigan

Sean is one of Shogun's tireless content marketers. When he isn't creating exciting ecommerce content, he's probably biking or at the park.