Setting up your homepage with Grid

When you first install Grid, you'll notice that several default homepage sections are already visible: the  Header and Footer as well as Slideshow, Masonry, Collection list, Featured collection, and Instagram and Twitter. Notice how each of these sections associates to "empty state" placeholder content in the preview. This will give you an idea of the formatting of each section.

Clicking on any of these three boxes will bring up a set of unique configuration settings for that section, or you can click  Add section, which will reveal an array of other optional sections that you can add to your homepage. We'll cover each of them in detail—more or less in the order they appear—below.

grid-sections

Fixed homepage sections

Fixed sections are exactly what you'd guess they are—components that are fixed to the top and bottom of your site and cannot be moved. In Grid, there are two fixed homepage sections: the  Header and the Footer. Here's what they do and how to set them up in your store:

Header

grid-header

The header is the rectangular area that runs across the top of your store containing your logo, navigation, and more. It appears on every page and is intended to promote your brand and root your customers, no matter where they are in your store. The header is a static section that cannot be repositioned.

LOGO

Your store's logo provides branding for your site and a clickable link to return to the homepage. By default, Grid will display your store name as your logo. To replace it, click the  Upload image button and select the file you'd like to use. We recommend at least a 200px high .jpgimage file. Larger images will be automatically resized to fit this constraint.

HEADER

Under Layout, you'll select the width of your top bar. Selecting Content width will set the header to the width of the content container. Selecting Full width allows the header to span the full width of the browser window (you might not be able to see a difference if you're working on a laptop-sized screen or smaller, but trust us, there is a difference!).

You can also select  Show header border, which will create a thin border between your header and the rest of your site content on all pages except the homepage (you will have to navigate away from your homepage in preview in order to see it).

If you check  Enable sticky header, the header will remain visible as visitors scroll down the page instead of instead of remaining fixed at the top of it.If you enable this option, we strongly encourage you to also upload a Sticky header logo as well. This is a smaller version of your logo (120 x 120px) that will appear to the left of your navigation in your sticky header.

NAVIGATION

To customize the links that appear in your header navigation, you must leave the theme editor by clicking the back button, and then the  Back to Shopify link in the top left corner. Go to Online store > Navigation. Here, you’ll find two pre-populated menus: Main menu and Footer menu. You can edit the links in these menus by clicking Edit menu or create additional menus by clicking Add menu. Below is an example of how the menus are set up in our Grid Light demo:

grid-light-menu-setup

For more on how to configure menus, see Shopify’s instructions.

Back in the theme editor, under Header>Navigation, you can set up your store's mega navigation if you wish.

But wait—what  is mega navigation? We're glad you asked! Mega navigation is a style of navigation that groups menu options together to eliminate scrolling and make everything visible at once. In Grid's case, this means you can display up to three menus below one primary navigation item. Here's a visual:

grid-mega-nav-example

Nice, right? Here's what you need to do to get mega nav up and running in your store.

The first thing is to decide on a  Mega navigation trigger. This is the title of the main menu item from which the mega-nav will stem. In the example above, “Shop” is the mega navigation trigger. If the mega navigation trigger you want to use doesn't already exist, navigate to the Online Store > Navigation section of the Shopify admin and click the Edit menu link on the Main menu. Here's how we've set up the Main menu in Grid Light:

grid-light-main-menu-example

Next, you'll create up to three menus that you want to expand from this trigger. In the example above, “By Collection,” “Small Things,” and “Big Things” are those menus. Again, you will set up and populate these menus in the  Online Store > Navigation in the Shopify admin. Like so:

grid-sub-menu-example

Finally, back in the theme editor, you'll connect your menus to your mega navigation in the Menu dropdowns at the bottom of the page.

mega-nav-menus

In this section, you can also opt to display images from your collections and products within the mega nav. If the menu items within your mega-nav contain links to images, hovering over them will display their collection or product image within the mega-nav dropdown. If they don't, you can check Use featured image and upload an image that will display by default in the same area. (If you're lost, we're talking about the image that displays to the left of the three menus in the mega navigation screenshot above.)

Footer

grid-light-footer

Like a footer on a document or report, a website footer contains information listed at the bottom of a page. Typically, the footer is the area that visitors expect to find the “fine print”—legal information such as terms and conditions and privacy policies, but also FAQs, size guides, and contact information. Grid provides the space to display all of these and more.

SETTINGS

Under  Settings, you can customize the look and contents of your footer. Check Show footer headings to show the headings of your optional Footer menus (see below) and Show payment icons to... show payment icons! (You can enable and manage those from the Settings>Payments section of your Shopify admin.)

CONTENT

To add an optional message to the footer of your site, click  Add content and select the type of content you would like to add. Your choices are: Rich text, Social links, Menu, and Newsletter.

Some of these options (Rich text and Newsletter) involve some degree of customization (obviously, you'll need to add a  Heading and Text to your Rich text and of course, you'll need to specify which Menu you want to display) but the others should display as soon as you've added them. You'll connect your social accounts under General settings>Social media, and you'll be able to manage any subscribers who utilize your newsletter form from the Customers section of your Shopify admin.

Dynamic homepage sections

Most of Grid's homepage sections are dynamic, meaning you can add as many of them as you want and rearrange them to create a completely unique layout.

Out of the box, your theme has several dynamic sections enabled already. These are merely  suggestions for how you might structure your homepage. Don't want to include a section? Delete it! (By clicking on it and clicking Delete section at the bottom.) Want to include something that isn't already there? Click Add section and find it on the list.

We'll walk you through the settings for each section type below, beginning with one of the most popular sections: the Slideshow.

Slideshow

grid-slideshow

The top section of your home page is your store’s most valuable real estate. To make the most of it, merchants often use a slideshow to showcase their most recent deals and top-selling products. Grid comes with a sophisticated responsive slideshow that can hold up to six slides. Each slide allows for a unique image, heading, subheading, and call-to-action link.

SETTINGS

slideshow-options

Grid's slideshow comes with two Layout options: Full width and Content width. Checking Full width will make your slides full-bleed (i.e. they will extend right to the edges of your screen). Checking Content width will make your slides display only as big as the images themselves are, padding the sides of your slideshow with whitespace if they are narrower than the width of the browser.

Checking the  Auto-rotate slides box means that your slides will rotate based on the Rotation interval you set below. If you leave this box unchecked, users will still be able to scroll through slides manually using the arrows at the edge of the slideshow.

The  Pause auto-rotate on hover checkbox does exactly what you'd guess it does—pauses the rotation of your slides when a user hovers their mouse over your slideshow.

CONTENT

This is where you’ll upload the images you want to use and customize the text overlays. Begin by clicking on  Slideto expand the settings for your first slide.

Off the top, you'll select the text alignment under  Align text. Grid allows you choose the placement of your text content (left, center, right) on a slide-per-slide basis. This way, the content of each slide can complement the composition of each image you choose. You can also choose the color of the text using the Overlay text color picker.

Next, you’ll upload an image. We recommend a 2880 x 1280px .jpg file, but the most important thing is to be consistent with the size of your images.

In the boxes below, you can input and format the slide’s Heading, Subheading, Button, and Link (look at the live preview to see the formatting for each). You don’t need to fill every field if you don’t want to—you may not want to include any text at all!

Masonry

grid-masonry-feature

Grid’s masonry features allow you to present up to six images with overlaying text in a grid (hence the name!) on your homepage. We refer to these image/text blocks as "features" in the theme, and will do so here as well.

SETTINGS

You can customize the appearance of the masonry feature by toggling the options to  Enable gutters, Enablehover text, and Enable hover animation on and off. You can also control the overall Layout of the masonry block by setting it to Content width or Full width.

These features will scale depending on how many are added. For instance, if only one feature is added, it will scale to 100% of the height and width of the masonry feature container. If two are added, they will each take up 50%. And so on...

Here's a diagram that shows how large a feature will appear, and in what order, from two to six features.

Artboard_1

The table below shows the optimal image sizes for masonry features, depending on the number of features you’d like to display.

grid_chart

CONTENT

This is where you'll add each of your features. You can add a Heading, Subheading, and Link here if you wish (note that you do not have to use all or even any of these fields). You'll set the Text color (black or white) using the dropdown menu.

To optimize the mobile experience, features can be individually set to display only on the desktop layout, or on both the desktop and mobile layouts. The reason for this is that masonry features get stacked on mobile. Having six features enabled can mean quite a lot of scrolling for users, so you may want to limit the number to two or three. You can set which ones  Show on mobile by checking the corresponding box.

Collection list

featured-collections-section

Collection list sections are designed to help you showcase new or seasonal collections on your homepage.

SETTINGS

Give your collection a heading in the  Headingfield, then choose how many columns you want your collections to display in (one to three) from the Columns dropdown menu.

CONTENT

Here, you'll select the collection you want to display from the Collectiondropdown. You can set up collections in the Products>Collection>Add collection section of your Shopify admin. For instructions on how to set up collections see our article, Getting Started: Shopify Basics.

Next, you'll select the  Overlay text color from the dropdown menu, and enter a Subheading and Caption if you wish.

Featured collection

featured-products-section

The featured products section is designed to—you guessed it—draw attention to specific products on your homepage.

SETTINGS

Start by assigning a heading to your section the Headingfield, then choose your Collection and how many columns you want to display your products in (two to four) from the Columns dropdown.

PRODUCT ITEM

Check  Show vendor if you want it to display above the product name in your featured product grid.

From the  Hover interaction dropdown menu, you can select what happens when a user hovers over a featured product. The options are: Quickshop (which will open a modal with the product details and an add-to-cart button), Show secondary image (which will flip the image to an alternate view of the product), Stock level indicator (which will show a warning when stock is below a certain level) and None (which is self-explanatory). You can set this level from the dropdown below.

You can also choose to  Show 'on sale'/'sold out' badges on your featured products by checking that option. These are text badges, however, you can also Use icons for product item badges by checking that option.

Blog posts

featured-blog-postsThe Blog posts section allows you to display images and text from your four most recent posts. To specify the text that appears, we suggest using Shopify’s excerpt function, which you'll find in the post editor under Online store>Blog posts.

SETTINGS

Start by assigning a heading to your section the  Headingfield, then select the blog you want to feature from the Blog dropdown. You can choose how many Posts to display and the number of Columns to display them in using the corresponding dropdown menus.

Rich text

grid-rich-text

Got something you want customers to know that doesn't fit nicely into another section type? Use a Rich text section to display a heading and content on your home page.

SETTINGS

Check  Show border if you would like to display a fine border around your text, then add a Heading.

CONTENT

Click on  Rich text to add your content to the Text box. Note that each section supports only one block of text. If you would like to add multiple, you will have to add multiple Rich text sections to your homepage.

Instagram and Twitter

grid-instagram-feed

Want to display your latest Instagram and Twitter activity on your homepage? No problem!

To start, give the section a  Heading(it could be something as simple as "Our Instagram" if you're creating an Instagram feed or "Our Latest Tweets" if you're adding Twitter).

Next, click  Add content. This will prompt you to choose either Instagram or Twitter.

For Instagram, you will need to locate and input your Instagram Access Token. Follow the help link (or click here) to learn how to generate a token. Copy and paste your token into the Access token field in the theme editor along with your Username.

For Twitter, simply enter your  Username (excluding the '@' symbol) in the corresponding field and check the Show retweets option if you would like to include those in your feed.