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 Twitter and Instagram. 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.
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:
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.
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 tall .jpg image file. Larger images will be automatically resized to fit this constraint.
Under Logo layout, you'll select the positioning of your header contents. As you can see, the Default layout centers your store's name/logo and navigation and stacks them one above the other. The Compact center option centers your store's name/logo and left aligns your navigation. The Compact left option flips things, left-aligning your store's name/logo and centering your navigation.
You can also Enable full width header, which 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!).
Below that, you can 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 Show logo image in sticky header as well. This is a smaller version of your logo that will appear to the left of your navigation in your sticky header and provide a link back to the homepage.
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:
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:
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:
Next, you'll create up to three menus that you want to expand from this trigger. In the example above, “Housewares" and "Accessories" are those menus. Again, you will set up and populate these menus in the Online Store>Navigation in the Shopify admin. Like so:
Next, back in the theme editor, you can set a Featured image, which will appear to the left of the menus in your mega navigation (if a menu item with image isn't already selected). We recommend using a 480 x 1000px image. It will look like this:
Finally, you'll connect your menus to your mega navigation in the Menu dropdowns at the bottom of the page.
The menus you add here will pull images from the collections/products you've added to your admin. 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, the image you've added under Featured image will display by default in the same area.
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.
Under Settings, you can customize the look and contents of your footer. Check Show footer headings to show the headings of your optional footer Content (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.)
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.
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.
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.
The next box allows you to customize the color of the Slideshow controls (that's the arrows that let users click through your slides).
Checking the Auto-rotate slides box means that your slides will rotate based on the Rotation interval (2-20 seconds) 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.
This is where you’ll upload the images you want to use and customize the text overlays. Begin by clicking on a Slide to expand the settings for your first slide.
You'll start by uploading your Image. We recommend a 2880 x 1280px .jpg file, but the most important thing is to be consistent with the size of your images.
Next, 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.
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!
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 "masonry features" in the theme, and will do so here as well.
Grid's masonry section comes with two Layout options: Full width and Content width. Checking Full width will make your section full-bleed (i.e. your images and/or video will extend right to the edges of your screen). Checking Content width will make them display only as big as the images themselves are, padding the sides of your slideshow with whitespace.
You can also customize the appearance of the masonry feature by toggling the options to Enable gutters (white space between features), Enable text hover, and Enable hover animation on and off.
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.
The optimal image dimensions to use in the masonry section is 1440 x 640, however it's important to note that regardless of the size of your images, you could see some cropping on certain screen sizes, so we recommend avoiding images with text or logos.
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 sections are designed to help you showcase new or seasonal collections on your homepage.
Give your collection a heading in the Heading field, then choose how many columns you want your collections to display in (one to three) from the Columns slider.
Here, you'll select the collection you want to display from the Collection dropdown. 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.
The Featured collection section is designed to—you guessed it—draw attention to specific products on your homepage.
Start by assigning a heading to your section in the Heading field, then choose your Collection and how many Columns and Rows you want to display from the respective sliders.
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 the stock level warning using the Show warning when stock is below slider 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.
The 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.
Start by assigning a heading to your section the Heading field, 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 sliders.
Grid's Promotion sections are designed to help you merchandise your products, promotions and even content using bold typography, a background image, and a call-to-action. You can use them in place of a Slideshow or Masonry section at the top of your store, or intersperse them throughout the page to highlight multiple content pieces and create a one-of-a-kind layout.
Grid's Promotion section comes with three Layout options: Full width, Content width, and Full screen. Checking Full width will make your section full-bleed (i.e. your images and/or video will extend right to the edges of your screen). Checking Content width will make them display only as big as the images themselves are, padding the sides of your slideshow with whitespace. Checking Full screen will make your section expand or contract to occupy the entire width and height of a user's screen.
You can Align text center, left or right, and select a Text color from the color picker. You can also add a Heading, Subheading, Button Text, and Button link in the following fields.
Finally, if you want to add a Background image to your Promotion section, you can do so by uploading it at the bottom. We recommend a 2880 x 1280px image.
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.
Check Show border if you would like to display a fine border around your text, then add a Heading.
Click on Rich text to add your content to the Text box. You can use the bold, italics, and link icons at the top to format your text.
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.
When it comes to making purchasing decisions online, customer reviews and testimonials can make or break a sale. Grid allows you to build social proof and increase conversions with a uniquely-styled testimonial section built into your homepage.
Start by adding a Heading to your section if you wish. Then, set the Testimonials per row and the Testimonials style using the menus below.
Click on a Testimonial block to begin. Add the testimonial you want to feature in the Quote field, then put the Name and Role (both are optional) in the bottom two fields.
You can add up to eight testimonials to this section.
Twitter and Instagram
Want to display your latest Instagram and Twitter activity on your homepage? No problem!
To start, give the section an optional 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 feed or Twitter feed.
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 (sans '@' symbol).
For Twitter, simply enter your Username (again, sand '@' symbol) in the corresponding field and check the Show retweets and/or Show images option if you would like to include those in your feed.
Video with text overlay
Video with text overlay sections are a great way to build your brand, highlight special promotions and products with an immersive, site-spanning video.
Grid's Video with text overlay section comes with two Layout options: Full width and Content width. Checking Full width will make your section full-bleed (i.e. your images and/or video will extend right to the edges of your screen). Checking Content width will make them display only as big as the images themselves are, padding the sides of your slideshow with whitespace.
Next, copy and paste the link to your video into the YouTube or Vimeo link box, and set a Placeholder image (this us the image that displays when the video is not playing. You can set it to something that doesn't show your team's awkward expressions or double chins!). We recommend using an image that is 1400 x 700px here.
You can customize the Overlay style using the dropdown box below. The choices are Light, Dark, and Accent. These colors are pulled from your preset/the colors you've selected under General settings>Color.
Below that, you can Align text center, left or right. And finally, you can add a Heading and Subheading overlay to your video by completing the bottom two fields.