How to Edit Your Shopify Homepage For Better Conversions (+ Examples)

January 11, 2022
by
Sean Flannigan

How to Edit Your Shopify Homepage For Better Conversions (+ Examples)

January 11, 2022
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:

In the brick-and-mortar world, stores announce their presence through big fancy signs and beautifully designed window displays. And the shoppers notice it and file in through their doors to peruse and purchase that perfect thing.

It may look a bit different online, but the signs and windows exist just the same. The signs and windows for your online store are all rolled up in your homepage.

The most successful Shopify stores have many things in common, but, without fail, they all have incredible homepages.

Your homepage is the most visited page on your store. 

On it, you show off your products and branding in a way that helps drive shoppers through the store and to what they really want.

Just as store windows for brick and mortar stores change to reflect the seasons and updated product offerings, so do ecommerce homepages. 

The key to keeping your Shopify homepage fresh is the flexibility to customize whenever you like.

In this post, we’ll cover:

Before we get into how you can make your homepage a conversion machine for your store, it’s best that we cover the basics of great homepages and their design.

#cta-visual-pb#<cta-title>Build a better Shopify store<cta-title>Make your store look and feel as unique as your brand by customizing with the best Shopify page builder.Start building for free


What is the purpose of a homepage?

Your homepage has a lot of similarities to a great landing page and can be built in much the same way. 

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. The little differences between landing pages and homepages make all the difference.

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 product pages, 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 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 various 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 must 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. Excellent copy and powerful images that center your products will drive your target audience to click through and learn more about your brand.

What does that look like on a Shopify store? Let’s look at some excellent examples of Shopify homepages that hit these crucial points while keeping their content fresh and exciting.

5 of the best Shopify homepage examples we could find

We see a ton of incredible Shopify brands in our work (and we end up buying from a lot of them). 

So, we know when stores are phoning it in and when they are doing the work to make their homepages unforgettable.

Here I’ve compiled a few of the very best homepages I’ve come across. 

To better understand what it means to keep your homepage fresh, I’m including more than just one version of each brand’s homepage.

East Fork

Ceramics brand East Fork excels at gorgeous product photography, using evocative props, luscious colors, and striking lighting to elevate their dinnerware.

east fork above fold homepage dinnerware in with the new
Image: East Fork

Their homepage utilizes these stunning still-life photos—often filling up the whole screen—to draw visitors to view their various product collections or learn more about their brand.

While the images do much of the talking, they use words effectively (if sparingly) to persuade and inform. 

Each vibrant image is paired with a straightforward CTA, making the options super clear.

east fork above fold homepage set the table
Image: East Fork

They regularly update their homepage to highlight different products, new collections, or current sales. The page layout stays much the same, but the imagery gives the page a whole new life.

east fork homepage variations side by side
Image: East Fork

#cta-visual-pb#<cta-title>Your homepage could look this good<cta-title>Try Shogun for free and start building out a totally unique homepage that drives conversions.Start building for free


Sheet Society

Aptly named bedding brand Sheet Society uses their homepage to evoke a feeling of complete coziness in their visitors.

As you scroll, you get immediate access to collections of interest—from the broadest categories like bedsheets and pillowcases to the more narrow like waffle and flannelette.

Then, a full-page video of a woman being extra comfortable in her bed. Finally, they regale visitors with the unique details of their products that make them so great.

Being an international brand, they have homepages to fit the regions they serve. For example, their Australian homepage features a Summer collection in the header, while their US homepage goes for a more wintry vibe.

sheet society homepage sundrenched above fold
sheet society hompage shades of mood above fold
Image: Sheet Society

Aside from the imagery above the fold and the looping video, the two homepages are the same. This is true of their regular homepage updates within regions as well, making changes to highlight sales or new collections.

Their homepage for their Boxing Day sale (below) was quite similar to the above versions, with the addition of a sale banner between sections.

sheet society full homepage boxing day sale
Image: Sheet Society

PANGAIA

If you read this blog often, you won’t be surprised to see athleisure brand PANGAIA here. 

We love to feature them. In fact, they are also featured in our examples of product-focused homepages. Luckily, they make regular changes to their homepage as well.

pangaia homepage flower girl made for everyone above fold
Image: PANGAIA

They use lush imagery throughout their homepages, with a focus on nature and models in monochrome. 

Scrolling down, you are met with several unique product collections—from tracksuits and pajamas to their “fungi capsule” and FLWRDWN™ jackets—all accompanied by simple yet persuasive copy.

pangaia homepage collections section
Image: PANGAIA

From the visuals alone, you get the sense that this is a sustainable brand. 

And, the curious will find this to be true by clicking through one of the numerous CTAs that explains more about the science and mission behind the brand.

They use a beautifully produced video toward the bottom of the homepage to quickly illustrate the ingenious environmental science behind their products—in one version, they describe their wildflower-based insulation, and in the other, they show off their plant-based leather. 

Image: PANGAIA

The Ridge

Everyday carry accessories brand The Ridge uses a muted palette to match their mostly darker colored product line. 

Their photos clearly center the product and they give many of them extra visual interest by changing or zooming in upon hovering your cursor.

the ridge homepage above the fold product images
Image: The Ridge

Like other brands in this post, a major feature of their homepage is product collections. 

Depending on what product imagery clicks with the shopper, they can click the relevant CTA and be transported to the right selection of products. 

Without even using the links in the header or footer, shoppers can easily navigate the store from the homepage.

the ridge homepage section collections hover effect
Image: The Ridge

While they update their homepage for sales and new products, you can see that the change is limited to what shoppers see above the fold. 

In one version, they use a slider element to show off three different products. In the other, they use the page’s full width to announce their holiday sale and gift guide.

the ridge full homepage side by side variations
Image: The Ridge

#cta-paragraph-pb#Read about how The Ridge increased conversions by 15% and had a 20X increase in clickthrough rate after switching to Shogun Page Builder.

NxTSTOP Apparel

Travel-centric apparel brand NxTSTOP uses their homepage to great effect, successfully communicating the excitement of exploring beyond the four walls of your home.

nxtstop homepage mountains hiking pack less do more
Image: NxTSTOP

They lead with lifestyle photography—people out in the world donning stylish clothing—and link to product collections for you to explore in more detail. 

With the pandemic still a major concern, they quickly added a section to the page that leans into their selection of face masks, narrowing them by type of use.

nxtstop homepage section face mask collection by type of use
Image: NxTSTOP

Scrolling further, they use a Z-pattern layout to spotlight three products that span various types of customers, allowing shoppers to click right into the product page.

They finish up with two social proof sections in the form of user-generated Instagram posts and quotes from happy customers. 

As they make changes to their homepage, the basic layout remains much the same, swapping out imagery and featured products and collections to fit their needs.

nxtstop homepage side by side variations
Image: NxTSTOP

Hopefully, these homepage examples have given you some inspiration to update, or totally rebuild, your store’s homepage. 

To customize your homepage on Shopify, you can use the native theme editor, or use a third-party app. Let’s look at how customization works within Shopify.

How to customize your homepage in Shopify

Now that you’ve seen some stellar examples of custom Shopify homepages, you are likely ready to customize your own.

One way to make custom changes to your homepage in Shopify is to use the theme editor. 

Shopify’s theme editor allows you to customize your homepage with moveable sections and blocks no matter what theme you choose. 

Each theme will have its own features for customization.

Shopify theme editor

The theme editor is Shopify’s native tool for editing themes. To get there from your Shopify dashboard, first go to Online Store > Themes

In the Current theme section, you’ll find the theme you are using. Below that, you can also see other themes you’ve downloaded in the Theme library section. 

You can edit any of these themes by clicking the “Customize” button.

shopify dashboard online store themes customize current

That will take you to your Shopify theme editor. The default page template you’ll see is your “Home page.” 

Along the left side, you’ve got your Header, your Footer, and a few sections in between. That’s where the magic happens.

shopify theme editor

In the top right corner, next to the “Save” button, you’ll find a monitor icon, which will let you see your template on Mobile, Desktop, or Fullscreen to get a better idea of how your visitors will experience the page.

Now that you are somewhat familiar with the theme editor, let’s get into how to edit your homepage sections.

Edit homepage sections

Your default homepage layout is a bit boring, no matter what theme you choose. It’s begging for you to customize it to your liking.

To edit the sections on your homepage, first click on the section you want to customize. Here, we’ll make changes to the Image banner section.

shopify theme editor edit section

A menu will appear on the right side with all the customization options for that section. 

For this, I can add a banner image—which I chose from Shopify’s free image gallery—and the position and color of the text element.

The blocks within each section are also customizable, just click on them and make your changes.

image banner customization options
buttons block customization theme editor

For our Image banner section, the Heading and Buttons blocks allow for minor changes to those elements of the banner, like copy, button style, and links. 

A few slight changes here have resulted in a slick new banner, all in the matter of a few minutes.

shopify demo dog homepage
Who’s a good boy?

In my Dawn theme, this was the extent of my non-code customization options for this section. 

Add new sections to your homepage

You aren’t stuck with the default sections provided by your theme. You can add sections to get exactly the content you want on your homepage.

To do that, just click on Add section in the menu on the left sidebar and choose from one of the dozen or so sections (this will vary by theme). 

shopify theme editor add section

Some options to add are a multimedia collage, a featured collection, a collection list, an email signup form, and more. 

If you have custom Liquid code you want to add, there’s even a section for that.

shopify theme editor new sections to add

By default, your new section will appear just above the Footer. We’ll cover how to move sections up and down your page below. 

But first, let’s learn how to remove sections.

Remove homepage sections

While adding sections is super important, knowing how to ax those you don’t like is also important. 

Removing sections and blocks in the theme editor is super easy.

All you need to do is click on the section or block in the menu on the left and find the “Remove section” or “Remove block” button in the bottom right corner of the editor.

shopify theme editor remove section or block

Once you click that button, your unwanted section will zap out of existence. 

If you removed a section in error, don’t worry. Just click the undo button in the upper right corner.

Move sections on your homepage

Lastly, you can move your sections anywhere between the Header and Footer sections in your homepage. It’s super simple.

When you hover over sections in the menu, you see an eye icon next to an icon of six dots. The dots icon is your handle for moving blocks and sections around your homepage. 

Just click and hold the dots icon and move it where you want it. As you do, the preview screen will show what the page will look like as you move the section.

shopify theme editor move section

When you are satisfied with the position, release the cursor, and your section will be settled in its new spot.

Theme settings

The theme editor also gives you access to theme settings, which give you some control over stylistic and functional elements for all page templates in your theme.

Just click on Theme settings in the bottom left corner of the screen, and you’ll see your options along the right side of the page.

shopify theme editor theme settings

From there, you can update colors, typography, styles, and more. The customization options available to you are dependent on the theme you are using.

We cover this more fully in our post on Shopify theme customization, so check there for a more in-depth look at your theme settings.

These changes will affect not only your homepage but all pages on your site.

How to build a custom homepage with Shogun

Another option for creating custom homepages is to use an app that is all about building high-converting landing pages. Like Shogun Page Builder.

With Page Builder, you can quickly build and edit your homepage—or develop multiple versions for regular updating—so your shoppers are consistently greeted with your best. 

Unlike the theme editor in Shopify, your customization options in Page Builder are nearly endless. 

Where I had hit a wall with what I could customize without coding in the Shopify theme editor, Page Builder allowed me to edit the smallest aspects of my new dog-focused homepage. Let’s see how.

First, start by creating your landing page just the way you want.

Build a custom landing page

Go to your Page Builder dashboard and click “Add page” to get started. 

You can choose to start from a blank page or try one of the pre-made landing page templates.

shogun page builder add page
shogun page builder choose template

Once in the editor, you have over 30 page elements that you can use to create a completely custom landing page. 

You can easily add sliders to feature your product collections, videos to educate your customers, icons to accentuate benefits, countdown timers to build urgency, and so much more.

Drag them into place and edit any aspect you like—from fonts, colors, and element functionality to margins, padding, and device visibility.

shogun page builder visual editor

In this landing page, my heading and button sit over the banner image, giving greater visibility to the adorable puppy I want to feature. 

I can update my font, change colors, and round the corners of my button in the matter of seconds.

Plus, with the click of a button, I gave the banner image a parallax effect so the other elements glide over it upon scrolling. 

As you build your page, you can use the device icons at the top to see how your page will look on various screens. You can even edit elements for specific devices based on how it looks in that view.

For my tablet view, I made the subheading text smaller so it wasn’t crowding the banner too much.

shogun page builder device chooser screen size

Once you are satisfied with your new landing page, simply save and publish it with the button in the upper right corner. 

Set as your Shopify homepage

With your new landing page published, it’s time to make it your homepage. 

On your Shogun dashboard, find the page you want to set as your new homepage and click the three dots icon on the right. 

Click “Set as homepage” and confirm your choice.

shogun page builder set as homepage in dashboard

With that, you now have a new homepage, fully customized to your specifications. 

Your homepage will always stay at the top of your pages in your Shogun dashboard, so it never gets lost. 

When you need to update your homepage, you can directly edit that page or duplicate it to work on a fresh version. You can even schedule your new homepage for publishing when you want it to go live.

It feels good to break out of the limitations of your chosen theme, right? 

Your homepage can look and feel as unique as your brand, setting you apart from all the other cookie-cutter Shopify stores.

If you are more of a visual learner, here's a step-by-step tutorial from the Page Builder team:

Drive more sales with a fantastic Shopify homepage

However you go about creating and customizing your Shopify homepage, you mustn’t phone it in. It’s your most visited page, after all.

Use powerful imagery, persuasive language, clear CTAs, great navigation, and keep it looking fresh with regular updates. 

There are plenty of outstanding examples in this post, but you can always be on the lookout for great homepages in the wild. 

It’s easy to put yourself in your shoppers' shoes because you are a shopper too. Take note of the things you like and pull them into your own store pages.

If you use what works well for others, you are bound to impact sales.


#cta-visual-pb#<cta-title>Build a better Shopify store<cta-title>Make your store look and feel as unique as your brand by customizing with the best Shopify page builder.Start building for free

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.