.svg)
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
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 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
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.
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
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.
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.
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.
Once in your Shopify dashboard, click on Products along the left side of your screen. And then click on Collections.
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.
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.
Now, go to Online Store > Themes along the left side of your screen. Then click the green “Customize” button on your Current theme.
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.
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.
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.
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.
Now go to Online store > Themes and click on the green “Customize” button in the Current theme section.
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.
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.).
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.
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.
#cta-mini-pb#Show off your products with our slider element. Start building your store for free.
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.
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.
#cta-mini-pb#Start adding video to your store today. Nab your free trial to get started.
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.
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.
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.
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 is one of Shogun's tireless content marketers. When he isn't creating exciting ecommerce content, he's probably biking or at the park.
