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

June 27, 2023

how to edit your shopify homepage

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. So, you need to know how to edit your Shopify homepage quickly and easily.

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.

#cta-paragraph-pb#See awesome examples of ecommerce homepages that get regularly updated to keep customers engaged and shopping.

5 Must-have Shopify homepage elements

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.

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 edit your Shopify homepage in the theme editor

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’ll 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 how to edit your shopify homepage

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.

#cta-paragraph-pb#Don’t forget about updating your footer! Remove ‘Powered by Shopify’ in a few simple steps and replace it with something more on-brand.

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 a 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:

https://www.youtube.com/embed/xbu2Djhqh4Q

Shopify homepage FAQs

How do I set my Shopify homepage?

In Shopify, you default homepage is set for the theme you are using. You can edit the page template to customize it within the confines of your theme.

With Shogun Page Builder, you can create a totally custom page and set it as your homepage in the dashboard.

As seasons change and you want to update your homepage, you can easily build a customized version of your existing page and set it as the new homepage with a click.

How can I optimize my Shopify homepage for better conversions?

To optimize your Shopify homepage for better conversions, consider the following tips:

1. Make the design uncluttered and easy to scan.
2. Show off your products with high-quality photography.
3. Include easy-to-follow navigation to get them to the right products fast.
4. Feature your most popular products and collections for easy shopping.
5. Use persuasive and on-brand copywriting to keep them engaged.
6. Optimize your homepage for the mobile experience.
7. Make your CTAs clear and obvious, strategically placed for conversion.
8. Take advantage of A/B testing to find the most effective strategies for conversion.

What elements should I include on my Shopify homepage?

The elements to include on your Shopify homepage may vary depending on your specific vertical and goals. However, here are some essential elements to consider:

1. Clear and visually appealing header with your logo and navigation menu.
2. Engaging hero banner or slideshow showcasing your key products or promotions.
3. Product or collection sections highlighting your best-selling or featured items.
4. Testimonials or customer reviews to build trust and credibility.
5. Link to your About Us page to tell your brand story and connect with customers.
6. Call-to-action buttons or banners for important actions like “Shop Now” or “Learn More.”
7. Contact information and social media links for easy customer communication and engagement.
8. Footer with useful links, policies, and additional information.

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.

The latest ecomm tips sent to your inbox

share this post

You might also like

Advanced Multi-store Discounts

Number of Stores
  • 1 Store
  • 2 Stores
  • 3 Stores
  • 4 Stores
  • 5 Stores
  • 6 Stores
  • 7 Stores
  • 8 Stores
  • 9 Stores
  • 10+ Stores
Annual Discount
  • 20%
  • 20%
  • 25%
  • 25%
  • 30%
  • 30%
  • 35%
  • 35%
  • 40%
  • 45%

Cookie Settings is not available. Cookie Consent is disabled or is just disabled for your country.