Shopify Homepage: How to Show Off Your Products to Excite Shoppers
September 9, 2021
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.
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.
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.
#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.
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.
#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.
This goes to show that you can do a lot with a little.
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.
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.
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.
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.
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
Feature 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. Unlike landing pages, you will be showing off many different products at once.
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.
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.
Step 1: Navigate to Collections on your dashboard
Once in your Shopify dashboard, click on Products along the left side of your screen. And then click on Collections.
Step 2: Click "Create collection"
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.
Step 3: Choose your collection type
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.
Step 4: Navigate to Themes and click "Customize" on current theme
Now, go to Online Store > Themes along the left side of your screen. Then click the green “Customize” button on your Current theme.
Step 5: In theme editor, select Featured collection and click "Change"
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.
Step 6: Choose your collection and customize grid
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.
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.
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.
Step 1: In Collections, create enough collections for all products
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.
Step 2: Go to Themes and click "Customize" on current theme
Now go to Online store > Themes and click on the green “Customize” button in the Current theme section.
Step 3: In theme editor, add as many Featured collections as needed
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.
Step 4: Click on each Featured collection and select desired product collections
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.).
Step 5: Change or remove section headings
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.
When you’re done, save your changes to finish displaying all your products on your homepage.
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.
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.