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.
OK, let’s start with some great homepage examples.
#cta-visual-pb#<cta-title>Edit your homepage with Shogun<cta-title>Start building a homepage for free with Shogun Page Builder for Shopify.Start building free
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.
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.
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.
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.
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.
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.
Subtle yet powerful social proof
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.
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.
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.
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.
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
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.
There are a number of conditions you can add to create the right 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.
Collage style grid
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.
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.
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.
Three collections, each limited to the theme's homepage collection limit
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.
Do this for as many collections as you want to feature
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.).
Featured collections can be dragged into place to fit your vision
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.
Update the heading or remove it entirely
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.
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.
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.
Capture customer info to continue marketing to them
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.
How to create a Shopify homepage on Shogun Page Builder
Building your homepage on Page Builder is super easy. It's a great way to create a totally unique and on-brand customer experience on your biggest traffic page. Let's see how.
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.