Setting up your homepage with Grid

Fixed sections

Dynamic homepage sections


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. 

Grid's sections in theme editor sidebar

Fixed sections

Fixed sections are components that are fixed to the top and bottom of your site and cannot be repositioned. In Grid, there are three fixed homepage sections: the Announcement BarHeader and the Footer. 

Announcement bar

Announcement bar in Grid bright demo

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.

Settings

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. 

Content

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 from or match the branding of your store. 

Header in Grid Bright demo

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.

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 using a 200px JPG or PNG image file. Larger images will be automatically resized to fit this constraint. If your logo's dimensions are not displaying as you'd like, contact support for some alternative approaches.

HEADER

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 indigo Add menu button. Below is an example of how the main menu is set up in our Grid Bright demo:

Navigation settings setup for Grid Bright demo

Back in the theme editor, under  Header > Navigation, 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-navigation menu, create a dropdown menu that has at least one 3rd tier item for every 2nd tier item, then use Add mega-nav found in the Content portion of the Header settings. Here you can select the dropdown menu you'd like to convert to a mega-nav. For instance, in the below screenshot, 'Shop' has been selected:

Mega-nav in Grid Bright demo

You can also display an image in your mega menu. To do this, add a Featured image (we recommend 480px by 1000px JPG or PNG image). This will display to the left of the menu links in your mega-nav.

Grid Bright demo's Mega-nav with optional featured image

    

Grid Bright demo's 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 or privacy policies–but there are many more features to explore with Grid' footer.

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 Content (see below) and Show payment icons (you can enable and manage which icons are displayed in Settings > Payments 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 textSocial linksMenu, 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 Theme 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? Feel free to delete it by clicking on it, then selecting Delete section at the bottom. 

Want to include another section that isn't already there? Click  Add section and find it on the list.

Slideshow

Slideshow section in Grid Bright demo

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

Configurations in theme editor for Slideshow section

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 their images in their original dimensions, 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 pauses the rotation of your slides when a user hovers their cursor 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 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  HeadingSubheadingButton, 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

Masonry section with two blocks and hover effect for one

Grid’s Masonry section can present up to six images with overlaying text in a grid on your homepage. 

SETTINGS

Grid's masonry section comes with two  Layout options: Full width and Content width. Checking Full width will make your tiles full-bleed (i.e. they will extend right to the edges of your screen). Checking Content width will make your tiles display their images in their original dimensions, padding the sides of your Masonry section with whitespace if they are narrower than the width of the browser.

You can also customize the appearance of the masonry feature by toggling the options to  Enable gutters (empty space borders 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...

Grid's Masonry section with maximum 6 blocks

The optimal image dimensions to use in the masonry section is 2000px by 2000px, 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.

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.

Featured product with image, title and other product info

The  Featured product section is designed to draw attention to a particular product on your homepage.

Settings

To get started, 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.

There are a few other settings to consider that 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)
  • Show dynamic checkout button

Collection list

Collection list with two collections displayed

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

SETTINGS

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.

CONTENT

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.

Featured collection with 4 products showcased

The Featured collection section is designed to draw attention to specific collections on your homepage.

SETTINGS

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.

PRODUCT ITEM

Check  Show vendor if you want it to display above the product name in your Featured collection 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) or None. 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.

Blog posts

The  Blog posts section allows you to display images and text from your four most recent posts. To specify the text that appears, use Shopify’s excerpt function. You can find this in the post editor under Online store > Blog posts.

Blog posts section with 3 articles previewed

SETTINGS

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.

Promotion

Promotion with image of woman and lemons

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.

SETTINGS

Grid's Promotion section comes with three Layout options: Full widthContent 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 2880px by 1280px image.

Rich text

Rich text section with discount code displayed

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. 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.

Testimonials

Testimonials with 3 blocks with quotes and names

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.

SETTINGS

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.

CONTENT

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

Instagram feed displaying 6 posts

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

To start, give the section an optional Heading.

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 (no need to include the '@' symbol).

For Twitter, simply enter your  Username in the corresponding field and check the Show retweets and/or Show images option if you would like to include those in your feed.Twitter feed displaying recent tweet

Map

Map section with Pixel Union office address

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

SETTINGS

Start by setting the Section height from the top dropdown. Then, add the Heading and Hours & Location.

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 displaying static image, play button and 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. 

SETTINGS

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). 

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. We recommend using an image that is 1400px by 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 the preset colors you've selected under Theme 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.



Back to top ↑

Next article:

Grid's products and collections