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 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 three fixed homepage sections: the Announcement Bar, Header and the Footer. Here's what they do and how to set them up in your store:
The Announcement Bar is a great place fill your customers in on new promotions, offers and changes to your store. This bar will appear above the Header section making in the first thing customers will see at the top of the page when they visit your store.
First up, you easily turn the Announcement bar off and on, using the Show announcement setting. You can also limit the bar to only display on your homepage by turning on the Show on homepage only setting.
You'll notice that the Announcement bar has two text fields. The first is a standard Text field that you'll use to input the copy for your Announcement bar. The second field, called the Text (mobile), is optional and allows you to enter alternate copy that will only appear to customers visiting your store on mobile devices. We recommend using this field to craft shorter copy, more suitable to the smaller screens of mobile devices.
Lastly, you can add a Link and customize both the Background and Text colors of the Announcement bar to standout or match the branding of 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 add links to your menus, you must leave the theme editor by clicking the back button in the top left hand corner (you actually need to click twice — once out of the Header settings and again on the Themes link to get back to the admin). 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 on the titles to edit them, or create additional menus by clicking the purple Add menu button. Below is an example of how the menus are set up in our Grid Bright demo:
Back in the theme editor, under Header>Navigation, you'll "connect" your menu to your header. By default, it will display the Main menu, but you can connect any menu you create from the Menu dropdown.
If you want to convert a dropdown menu to a mega menu (again, here's the instructions for creating dropdown menus in the Shopify admin) you can do that under Content. Each block allows you to convert a menu item to a mega menu. Simply select one, and enter the menu item you want to apply a mega menu dropdown to.
In this example from our Grid Bright demo, we've inputted the menu item "Shop" here to create a mega menu that looks like this:
You can also display images in your mega menu if you wish. To do this, you will need to add a Featured image (we recommend 480 x 1000px). This will display to the left of the menu links in your mega menu.
Also, when you hover over links that include collection/product images, those will appear in this same space. Note that no images will appear if you do not upload an image to this section.
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.
The Featured product is designed to - you guessed it - draw attention to a single product on your homepage!
Super duper easy - just click Select product and choose which product you'd like to feature. The product images, options, description and an Add to Cart button are automatically pulled in, allowing customers to view and purchase the product right from the homepage!
You've also got a few other settings to play with to customize the display of the Featured product on your homepage:
- Show vendor name
- Show social media icons
- Layout (change the layout of your product's images - Slideshow, List or Masonry)
- Enable zoom (only works on the Slideshow layout)
- Enable cart redirection (this automatically sends customers to the cart page after clicking the add-to-cart button)
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.
Grid comes with an eye-catching Map section that businesses with brick-and-mortar locations can use to display contact information and give directions to their store
Start by setting the Section height from the top dropdown. Then, add a Heading (something like "Come say hi" or "Our workshop" should work) and Hours & Location (or anything else you think is relevant).
We've also included Text alignment, as well as, Desktop and Mobile layout settings to get the display of your map's text information just right.
The Map address is the point Google will use to drop its pin. It's the red marker in the image above.
To pull a map into your homepage, you'll need to generate Google maps API key and paste it into the Google Maps API key field . If you need help, just follow this link to open Shopify's step by step instructions for getting your key setup.
In the end, what you're looking for is this long string of characters to paste into the API field:
You can also customize the display colors of the map using the Map foreground color and Map background color pickers.
Note: that these do not control particular components of the map (streets, water, etc.) but rather the swatches are linked to, and will affect, the entire map
Next, you can upload an Image that will be used in the event that the map can not be loaded. This can be a screenshot of a map, or anything else you want to display if you map isn't working for some reason. Use the Image position settings to adjust the focal point for the image.
If you've chosen any of the Overlay positions for your text, you can use the Overlay settings to choose a Color to overlay the map (or image if the map is not displaying). Set the Opacity setting to 0 to disable the overlay.
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.