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

June 28, 2023

Shopify Homepage How to Show Off Your Products to Excite Shoppers shopify homepage

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’ll 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 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.

#cta-paragraph-pb#Learn more about how your landing pages and your homepage differ and why each is so important.

The visitors to your homepage represent your overall target audience and the choices they make—the doors they choose to walk through, if you will—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 must 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 use 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-visual-pb#<cta-title>Design a homepage that shines<cta-title>Showcase your business with a homepage that’ll capture your visitors’ attention and drive them to purchase. Start building for free

 

Examples of Shopify homepages 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.

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.

pangaia homepage shopify homepage

#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.

#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.

mvmt homepage shopify homepage

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.

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 shopify homepage

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.

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.

mahabis homepage shopify homepage

#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 used to start out with the Debut theme, which limits the number of products that can be in a Featured collection to 25. The Dawn theme is the new standard theme, but it has the same product limit.

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 Dawn 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.

1. Navigate to Products > Collections

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

shopify products shopify homepage
shopify product collections shopify homepage

2. Create a new product 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.

shopify create collection shopify homepage

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 collection automated shopify homepage
shopify collection price greater than zero shopify homepage

3. Navigate to the theme editor

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

shopify themes customize shopify homepage

In the theme 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.

shopify theme editor featured collection change shopify homepage
shopify choose collection select shopify homepage

What you are able to customize depends on your theme. For the Dawn theme, you can do many things, including:

  • Heading text and size
  • Description for the collection and description style
  • Maximum products to show and number of columns
  • Enabling “View all” for collections over limit
  • Carousel on desktop to enable slider view
  • Product card details
  • Mobile layout

As long as you have fewer than 25 products, this one Featured collection will work for you, and you can make it look just the way you like.

shopify featured collection settings shopify homepage
shopify featured collection extra settings shopify homepage

‍6. Publish your changes

Once you are satisfied with how it looks, you can click Save in the upper right corner to publish your homepage.

View it on your live site and adjust as needed.

shopify store featured collection shopify homepage
My imperfect Featured collection

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 products per row shopify homepage

Adding multiple product collections to your homepage

If you have more products than the limit allows for (like the 25 for Debut and Dawn), then the above process wouldn’t really work to show all your lovely products.

If it was the matter of a few extra products, you could switch to another theme that allows for more products per featured collection. But you likely chose your theme for a reason, so let’s make it work.

Especially 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 Dawn theme, you could use three collections to feature up to 75 products.

Let’s see how.

1. Create multiple collections from all products

Go to Products > Collections and click the “Create collection” button to start on your first product collection.

shopify collections create new shopify homepage

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., Dawn’s 25 product limit).

Create and save your collections.

product collection split in three shopify homepage
Imagine they each equal 25, for the purpose of this tutorial

2. Go to your theme editor

Now go to Online store > Themes and click on the green “Customize” button on your current theme.

shopify themes customize shopify homepage

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.

You can drag and drop them wherever you want on the page, either altogether (as I did) or distributed throughout the page.

add featured collection shopify editor shopify homepage
move featured collection up down shopify homepage

4. Add your collections and customize

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

Customize the settings to match your needs.

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.

first collection with names shopify homepage

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.

shopify collection heading remove shopify homepage

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

You’ll want your other settings to be consistent across collections. The image ratio will be important for showcasing all your products in the same format. Also, whether you show vendor, product ratings, or quick add button will need to be the same for all.

shopify collection settings update shopify homepage

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

Using the Dawn theme, you can easily turn your Featured collections into sliders from the settings. Other themes may not allow for this customization.

All you need to do is check the box that says “Enable carousel on desktop” to turn it into a slider for desktop users. To include this functionality on mobile as well, check the “Enable swipe on mobile” box.

shopify carousel setting shopify 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.

product collection slider shopify homepage

#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.

Get rid of writer’s block with AI Text

Writing on a blank page can be stressful, even if you know everything about your brand and product.

The sudden onset of AI technology has eased this blank page syndrome, allowing merchants to quickly draft content from even minimal prompts on ChatGPT and the like.

With Shogun Page Builder, you needn’t switch windows to come up with quick and pithy AI copy. You can do it right in the editor!

dog vest ai text shopify homepage

Just click the little magic dust icon in a text or heading element to engage your robot writing companion. You can cycle through the suggested prompt starters or just start typing up your prompt from scratch.

Tell it how long you’d like the text to be, and hit Generate. In seconds, you’ll have something you can start editing to match your brand and product.

If it isn’t quite right, just try it again!

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.

fashion video shogun shopify homepage

#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.

form element shogun shopify homepage

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.

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.

https://youtu.be/xbu2Djhqh4Q

Shopify homepage FAQs

Got more questions? Let’s see if we can answer them here.

What is the importance of a well-designed homepage for a Shopify store?

The homepage is often the first impression customers get of your online store. A well-designed homepage can compel visitors to explore more and‌ make a purchase.

It should ideally showcase your products, value propositions, and brand personality effectively.

What are the best practices for designing a Shopify homepage?

Best practices include employing stunning designs, clear navigation, high-quality images, compelling CTAs, and showcasing your bestselling products or collections.

It’s also important to make sure your site is mobile-friendly, so shoppers can visit while on the go.

How can I optimize my Shopify homepage for SEO?

You can optimize your Shopify homepage for SEO by using relevant keywords in your title and meta descriptions, optimizing your images with alt text, and ensuring your site has fast loading times.

Also, make sure your site is easy to navigate and user-friendly as these factors can also impact visitor dwell times (and thus SEO).

How can I incorporate videos into my Shopify homepage?

You can add videos to your Shopify homepage by using the video section in the theme editor.

An even easier way to include videos on your homepage and elsewhere is to use the drag-and-drop video element in Shogun Page Builder.

What is the ideal image size for a Shopify homepage?

The ideal image size can vary depending on your theme, but a common recommendation is to keep your images under 200KB to guarantee your site loads quickly. For dimensions, a width of 2048 pixels is often recommended.

How can I customize my Shopify homepage design?

You can customize your Shopify homepage design by going to Online Store > Themes in your Shopify admin and clicking Customize on your current theme.

In the theme editor, you can customize your theme and make changes to your homepage. You can also use Shogun Page Builder to easily customize any page on Shopify.

How can I show all products on homepage in Shopify?

Shopify allows you to create product collections and feature them on your homepage. However, the number of products you can display depends on your theme.

For example, the Dawn theme allows up to 25 products; the Simple theme allows up to 30; and the Brooklyn theme allows up to 50.

If you have more products, you can create multiple featured collections, as detailed above.

How can I add a product slider to my Shopify homepage?

With tools like Shogun Page Builder, you can easily add a product slider to your homepage. This allows visitors to interact with your product collections without taking up too much space on the page.

New Shopify themes like Dawn allow you to display your featured collections as carousels, as well.

What other elements should I include on my Shopify homepage?

Besides featuring your products, your homepage should also include videos for emotional engagement and forms for lead capture. Other elements like social proof, compelling copy, and clear CTAs can also enhance your homepage.

How can I create a Shopify homepage using Shogun Page Builder?

Shogun Page Builder offers a drag-and-drop interface that makes it easy to build your Shopify homepage. You can add various elements like product collections, videos, forms, and more to create a unique and effective homepage.

Once you’ve built the perfect page in Page Builder, you just need to click Set as homepage to make it go live on your site.

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.

After all, your products should take center stage in your store. Show them to the packed house of your homepage.

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.

The latest ecomm tips sent to your inbox

share this post

You might also like