Unlike other types of pages (i.e. collection pages, product pages, blog pages, policy/info/help pages, etc.) where you only use the Theme Editor to create the page template (but the actual content for the pages is dynamically "pulled in" from Shopify), you will use Shopify Theme Editor to create ALL of the content for your store's home page. The only home-page-related settings within the main Shopify admin panel are setting your home page's title tag and meta description (for SEO purposes).
This tutorial will walk you step-by-step through the process of creating your home page. It is organized into the following parts:
- Overview of creating, editing and reordering sections
- Viewing home page sections
- Creating a new home page section
- Editing a home page section
- Hiding & unhiding a home page section
- Deleting a home page section
- Reordering home page sections
- Setting your home page title and meta description
Overview of Creating, Editing and Reordering Sections
"Section" is the term Shopify uses to describe a piece (or component) of a page. Your home page is nothing more than a bunch of sections you've created and configured, one after another after another, shown in the order you've designated.
When you first install a Shopify theme, several of the most common/popular sections will most likely be preinstalled and preconfigured to save you time and demonstrate what is possible on the home page. You can of course edit these sections, hide them, or delete them if you'd like to. You can also create additional sections and re-order all of the sections to appear in the order you want them to be displayed. This tutorial will explain how to do all of these things.
Viewing Home Page Sections
To see (and manage) the sections comprising your home page, do the following:
- Within your Shopify admin panel, navigate to Online Store > Themes.
- Click the green 'Customize' button shown at the top of the page (in the 'Current theme' section).
- This launches the Shopify Theme Editor (i.e. Customizer), which is the interface Shopify provides to customize your store's theme. (If you're not familiar with the Theme Editor, take a few minutes to review this helpful tutorial.) When Theme Editor first launches, you will be looking at a preview of the home page by default. The left panel shows all of the sections that make up the home page, including header sections (at the top), then home page body sections (in the middle), and then footer sections (at the bottom). The header and footer sections are universal for the entire site, so we won't discuss them here (learn more about customizing your header or customizing your footer). This tutorial will focus on customizing the home page body (below the header and above the footer), which is made up of the sections in the middle of the left panel (between the two horizontal grey lines).
Creating a New Home Page Section
To create a new section (i.e. piece of content) for the home page, simply click on the 'Add section' link at the bottom of the list of home page sections in the left panel. When you click this link, a sub-menu will appear that allows you to select which type of section you want to create. When you select one of the section types, one or both of the following things will happen (depending on the type of section you've selected):
- The right panel of Theme Editor will update and show fields, options and settings for configuring the section; and/or
- In the left panel, the section will expand and enable you to create one or more "blocks" within that section by clicking on an 'Add block' link.
You should think of a "block" as a component (portion) of a section. Some sections don't have any blocks within them (the section itself comprises 100% of the content) while other sections are made up of several blocks.
Editing a Home Page Section
To edit an existing section, simply click on the section's title in the left panel. Just as explained above, one or both of the following things will happen (depending on the type of section):
- The right panel will then update to show all of the fields, options and settings for that section, which you can edit as desired; and/or
- In the left panel, the section will expand and show all of the "blocks" within that section. You can click on any of the block titles to edit them and/or click the 'Add block' link at the bottom of the list of blocks to create a new block.
Hiding & Unhiding a Home Page Section
If you want to temporarily hide a section (but not delete it), hover over the section title in the left menu. A couple of icons will appear to the right of the section title: an eye icon and a move icon. Click on the eye icon to hide the section. (You'll see that the eye icon now has a diagonal slash through it, indicating that it is not visible.)
If you later decide you want to reactivate the hidden section, hover over the section title and click the stricken-through eye icon.
Note: You can hide/unhide blocks within sections the exact same way.
Deleting a Home Page Section
To permanently delete a section (meaning you will have to recreate it from scratch later on if you decide you want it again), click the section title in the left panel. Then click the 'Remove section' link at the bottom of the right panel.
Note: You can delete unwanted blocks within sections the exact same way.
Reordering Home Page Sections
Assuming your theme is a Shopify Online Store 2.0 theme, you can drag & drop the section titles (and the blocks within sections) to put them in the exact order you want them to appear on the page. Here are instructions for re-ordering your home page sections:
- Hover over the section you want to move. You'll see that 2 icons appear to the right of the section title: an eye icon and a move icon.
- Click on the move icon and continue to hold the mouse button down.
- Move the mouse up/down while continuing to hold the mouse button down.
- When the grey horizontal line is in the position where you want to section to be, release the mouse button.
Setting Your Home Page Title and Meta Description
Specifying your home page's title tag and meta description (for SEO purposes) are the only things related to the home page that you will not do within the Shopify Theme Editor. These 2 things are done in the main Shopify admin panel.
Navigate to the Online Store > Preferences page within your main Shopify admin panel. You will see these 2 fields at the very top of the page:
- Homepage title - This is the title tag for your home page. Best practice is to have the page title be 50-60 characters long (with an absolute max of 70 characters). This text will not be displayed anywhere on the page itself, but it will be displayed in the tab of the customer's web browser.
- Homepage meta description - Enter your desired meta description into this field (limited to 320 characters). This text will not be displayed anywhere on the page; it is only used for SEO purposes.