Grid Theme Manual

Our documentation is for the latest version of the theme. If you need help with an older version of the theme, please send us a support request (found to the right). Below, you’ll find instructions for all theme settings and features, roughly in the same order as the sections in your theme editor panel.

atlantic-light-homepage

Table of Contents

Getting started

New to Shopify?

If you’re setting up a Shopify store for the first time, we recommend taking a gander at the Shopify help center for a full overview of the platform.

In our article Getting Started: Shopify Basics, we cover the essentials for getting your store up and running, including adding products, setting up collections, and creating a blog. Once you’ve got these things set up, you’ll be in a good position to start customizing your theme.

Upload your new theme

If you purchased your theme directly from Shopify, it will be automatically installed when you log into your Shopify admin.

If you purchased your theme from pixelunion.net, you’ll receive it as a .zip file named something like grid.v8.0.0.zip.

Once you’ve downloaded the theme file, go to your Shopify admin dashboard and navigate to Online Store > Themes. Then click Upload theme in the top-right corner. Select your theme file from your computer and click Upload.

upload-theme-screen

Your new theme will show up below your current theme. At this point, it is installed, but not published. When you’re ready to unveil your new look to the world, click Publish theme.

The theme editor

Once you’ve uploaded your theme, it’s time to make it your own. While all of your products, collections, pages, and navigation will be configured in the Shopify admin, any changes you make to the look and feel of your store will happen in the theme editor. You’ll access it by navigating to Online Store>Themes and then clicking the blue Customize theme button in the top right of your screen.

upload-theme-screen

You’ll see that the theme editor is divided into two tabs: Sections and General settings. We’ll cover each in detail below, but here’s the Coles Notes to help you get your bearings.

Sections tab

The Sections tab contains all of the sections that are available to you in Grid. Essentially, sections are the building blocks of your store, allowing you to assemble pages from customizable, re-orderable components. You can add, remove, and reorder sections, as well as access the customization features for each from the Sections tab.

General settings tab

The General settings tab lets you make global changes to the look of your store, including typography, text and background color, as well as links to your social media accounts.

grid-general-settings

Pro tips

Most of the time you spend in the theme editor will be on either the Sections or General settings pages. There are, however, a few lesser-known areas and shortcuts that can be super helpful as you’re building your store. Here’s what you need to know:

theme-dropdown

The dropdown menu attached to your theme name contains a bunch of handy links. First up, Documentation. That’s what you’re looking at now, and it’s only ever a click away if you need a little bit of guidance setting up your menus or slideshow.

Next, Support. If you can’t find a fix in the documentation, you can always email our world-class support team. They’ll get back to you by the next business day.

If you’re fluent in Liquid (Shopify’s templating language) you can kick your customizations up a notch by digging into the theme’s code under Edit code. If not, our support team will be more than happy to put you in touch with someone who is.

Finally, Edit languages lets you both change the language of your theme and checkout as well as customize the wording that is used throughout your store.

At the opposite end of the theme editor, you’ll find a little button with a screen and an arrow on it. It lets you toggle between previewing what your site will look like on desktop (Fit to screen) and on mobile (Small screen). It looks like this:

desktop-mobile-icon

Finally, if you want to collapse the theme editor controls and preview your store in full-screen, all you need to do is click the tiny left-pointing arrow in the middle of the panel. Easy!

Theme styles

Grid comes packaged with four different theme styles that curate your store’s colors, fonts, and styles for you. Check out our store demos to see the Bright, Moody, Warm, and Light styles in action.

To select the theme style you would like to use in your store, click  over to the General settings tab, then scroll all the way to the bottom to the Change theme style button. Here, you can preview the theme styles and select the one that’s right for your store.

grid-theme-styles

Note that applying and saving a new theme style will overwrite your current style settings, however you will not lose any content from your store. It’s always a good idea to make a backup copy of your theme before you start making customizations. Use the duplicate copy as your working version until you’re ready to publish it.

Sections, explained

Sections is a Shopify feature that effectively allows merchants to assemble pages from customizable components (or sections!). This means tons of flexibility, especially on the homepage, where you can add, remove and reorder sections with just a few clicks. Examples of sections include featured products, slideshows, collection listings, or videos. You’ll access the customization options for all of them from the Sections tab in the theme editor.

The content on your homepage is made up of dynamic sections, meaning you can add and arrange as many as you want. Two notable exceptions in Grid are the Header and Footer, which are fixed to the top and bottom of your site and cannot be repositioned—these are called fixed sections. (You can, however, still customize their content.)

Some other page types also make use of fixed sections. To see if the page you’re building has sections, open the theme editor and then navigate to the page you’re working on within it. (For example, if you click through to your blog in the theme editor, you’ll see that a section pops up for Blog, giving you access to settings specific to that page.)

Setting up your homepage

When you first install Grid, you’ll notice that several default homepage sections are already visible: the Header and Footer as well as SlideshowMasonryCollection listFeatured 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 .jpg image 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 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 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 Slide to 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 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

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 guttersEnable hover 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 HeadingSubheading, 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 Heading field, 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 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.

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 Heading field, 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 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 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.

Products and collections

Your product and collection pages are the lifeblood of your ecommerce store. They’re where you display your products, convey their value, and, if you’re lucky, make the sale.

You’ll upload and configure your products and collections in the Shopify admin (you can read more about that here), but when it comes to customizing how they display, you’ll do that within the theme editor. Just navigate to the page in the theme editor and you’ll see a section pop up, giving you access to settings specific to that page. We’ll give you the rundown on the settings for each page below.

Product pages

grid-product-page

The product page is where you highlight the features and benefits of your individual products. At minimum, it should contain the product title, images, a description, the price, and an add-to-cart button. With Grid, you can customize your product pages by navigating to a product page in the theme editor and clicking on Product pages under the Sections tab.

SETTINGS

Off the top, you’ll choose whether or not to Show vendor name using the corresponding checkbox.

Next, you’ll choose how you want your images to display using the Product images layout dropdown. The options are Slideshow (meaning users will be able to click through images using thumbnails) or List view (meaning users will be able to scroll vertically through full-sized images).

You can Enable image zoom by checking that option. Enabling this will mean that when a user hovers over a product image, a magnifying glass icon will appear and they will be able to click to get an up-close look at your product. Note that this feature only works when the slideshow layout is selected from the menu above. It also necessitates using large, high-res product photography.

Checking Show related products will allow customers to discover other items that are similar to the one they are currently viewing. Related products are automatically pulled from the same collection as the product in view. You can customize the alignment of these products using the Align related products dropdown. Below is an example of related products with Below product info alignment.

related-products

Finally, you can allow users to Add product to cart without leaving product page by checking that option. This means that when a user adds an item to their cart, they will stay on the page they are currently on, as opposed to being directed to the cart page.

SHOW SHARING ICONS

If you would like to enable share buttons on your products pages, check Show share icons. You’ll be able to connect the networks you want to display from General settings>Social media.

Collection pages

collection-page

A collection page displays all of the products in a given collection. You can configure your collections from within your Shopify admin (more information here). In Grid, you can customize your collection pages by navigating to a collection in the theme editor and clicking on Collection pages under the Sections tab.

SETTINGS

Checking Show featured image will pull the collection image you have set in the Products>Collections area of your Shopify admin onto your collection pages. It will display below the collection name and above your description (if enabled) and products.

Likewise, checking Show description will pull a collection description onto your collection pages. This can be set on the page for each collection under Products>Collections in the Shopify admin.

Checking Enable sorting allows customers to sort products in a different order than they appear by default (e.g. Featured, Price: Low to High, Price: High to Low, A-Z, Newest to Oldest, etc.).

The Enable tag filtering option allows visitors to sort products by custom tags, which can be added to product pages in your Shopify admin. You’ll find them under Organization on the right side of each product editing screen.

You can also specify the Number of products per row (2, 3, or 4) and the Number of rows (2 to 12) that display on your collection pages using the dropdown menus.

PRODUCT ITEM

Checking Show vendor will display the brand or supplier name above the product name. You can add and edit these on the product pages of the Shopify admin.

From the Hover interaction dropdown menu, you can select what happens when a user hovers over a 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 products in your collections by checking that option. The first option will display text badges, however, you can also Use icons for product item badges by checking that option.

Collection list page

collections-list-page

The collection list page displays an index of your store’s collections. To access the settings for this page, navigate to your catalog or collections page in the theme editor and then click Collection list page under the Sections tab.

SETTINGS

Checking Show description will include the descriptions of your collections on your collection list page. These descriptions can be edited for each collection in the Products>Collections section of your Shopify admin.

You can also specify the Number of products per row (2 or 3) and the Number of rows (2 to 6) that display on your collection pages using the dropdown menus.

 

Blogs

Your Shopify store comes with a powerful built-in blogging engine. Blogs are great for content that you’ll be updating regularly. While many stores maintain only one blog (probably called “News” or “Journal”) some create multiple to better categorize information including customer stories, tips, tutorials, FAQs and more.

You’ll do all your blogging in the Shopify admin (to get your Shopify blog up and running, see their instructions), but when it comes to customizing how your blog(s) display, you’ll do that within the theme editor. Just navigate to the blog or article page in the theme editor, and you’ll see a section pop up, giving you access to settings specific to that page.

Blog

blog-page

Your blog page(s) provides users with an index of your blog posts. Some stores choose to rename this page “News” or “Journal”—what you call it and how you use it is up to you!

Grid’s blog pages support two sidebars: the lefthand sidebar housing a tag filter and a recent posts section, and the righthand one housing a promo widget where you can upload an image with overlaying text.

SETTINGS

The Show tag filter option will display a “Sort by tag” dropdown menu in the left sidebar of your blog pages. This menu will list all of the tags you have used for your posts and let users view posts that have been tagged with each.

You can also Show subscribe link by checking that option. This will create a subscribe link below your “Sort by tag” dropdown menu (if enabled) or your recent posts list (if not).

PROMOTIONAL IMAGE

Grid gives you the option of displaying a promotional image, which you can overlay with text and a call-to-action if you wish. This will display in the right sidebar of your blog pages.

Simply input the HeadingSubheading, and Link, then upload your image.

Article pages

article-page

Every time you publish a new article (or post) to your store’s blog, Shopify will generate a new page and URL for it. To access the settings for these pages, navigate to a post—any post—in the theme editor and then click Article under the Sections tab.

Grid comes with a number of article-specific settings, as well as the option to show or not show a promotional image in the right sidebar.

SETTINGS

Grid comes with a number of options when it comes to formatting your blog posts. These include: Show subscribe linkShow comment countShow tagsShow post authorShow post author avatar, Show avatars on post comments, and Show share icons. These are all pretty self-explanatory, but if you’re not sure what something is or want to know where it will display, switch it on and off and watch for the change in your preview.

PROMOTIONAL IMAGE

Grid gives you the option of displaying a promotional image, which you can overlay with text and a call-to-action if you wish. This will display in the right sidebar of your blog posts.

Simply input the HeadingSubheading, and Link, then upload your image.

Static pages

Shopify stores come with a page creation tool, which you can use to generate pages containing information that rarely changes, and that customers will use often, such as an About page or a Contact page. You can add as many pages as you like to your store under Online store>Pages, and configure where they appear under Online store>Menus.

There are also a few pages like the Cart page that are generated and populated automatically, but which you can customize by navigating to them in the theme editor and finding their section settings. We’ll cover the settings for these below.

Create a new page

From your Shopify admin, navigate to Online store>Pages. Click the Add page button to open a new page template.

new-page-screen

From here, you can enter the Title and Content in the space provided, as well as set the Visibility and select a Page template. You’ll notice that Grid comes with two templates: a general page template (which you could use to create an FAQ  or return policy page), and a page.contact template (which creates a contact form designed specifically for your Contact page).

About page

screen-shot-2016-11-30-at-1-52-30-pm

Online shoppers these days aren’t just interested in what they’re buying—they’re also interested in who they’re buying it from. That’s exactly what your about page is for: connecting with your customers, building trust, and establishing your brand.

You can create an about page the same way you would any other page: by going into your Shopify admin, navigating to Online store>Pages and creating a new page titled “About us” or “Our story” or anything else you want!

Contact page

Adding a contact page to your store is a quick and easy way of engaging your customers. To create a contact page you will first need to create a new page. Scroll to the bottom right of the screen and select page.contact from the Template dropdown menu. This will create a simple form on the page that will look something like this:

contact-page

You can add a Title and Content above the form in the page editor screen.

Cart page

cart-page

The Cart page is the first page customers see when they begin the checkout process. It shows a summary of the items and quantities they have added to their cart, and a total of how much it will cost them. In Grid, users can also add “special instructions” for the seller on this page. If you’re trying to customize the Checkout process, you’ll access those settings from the General settings tab.

ORDER NOTES

Enabling Order notes will create a text box at the bottom of the cart page where customers can add “special instructions” about their order. You can add instructive or suggestive copy for this area in the Placeholder text field.

SHIPPING NOTE

Enabling Shipping note allows you to display text stating that the cart total does not include taxes or shipping (or something else!). If enabled, the Text you enter will appear just below your cart total.

SHIPPING RATE CALCULATOR

Grid also gives you the option to Enable shipping calculator—a tool that automatically fetches shipping rates on the cart page of your store, letting customers calculate their fees before completing checkout.

shipping-calculator

Click the Enable box, then use the text box to set your Default country. If you’re unsure of spelling, you can refer to the dropdown on the first page of the Shopify checkout process. Note that if a customer has logged in and configured their shipping address their country will automatically be used.

country-dropdown

General settings

The General settings tab (located to the right of the Sections tab) lets you make global changes to the look and feel of your store, including typography, text and background color, as well as links to your social media accounts. Here’s the nitty-gritty on everything you’ll find there.

Favicon

A favicon (also known as a  website icon, tab icon, or bookmark icon) is a small icon that represents your website and provides a shortcut to it wherever the icon appears. There are a whole bunch of sites that can help you generate a favicon for your store, or you can create your own.

Once you have an image you want to use, upload it under the Favicon setting of the theme editor. You can also select an image from your media library.

Color

Virtually every color in Grid is customizable, with clear self-explanatory names and descriptions in the theme settings. The colors are organized into five categories: BackgroundGeneral, ButtonsHeader, and Dropdowns/Table headers.

Click on the swatch to edit the colors. A popup with a color selector will appear, which allows you to adjust and experiment with custom colors.

Typography

Grid comes with dozens of hand-picked fonts for your store. Fonts can be set for your store’s Body fontHeadingsNavigationCaptions, and Buttons using the corresponding dropdown menu.

For each font (except Body) you can toggle on the option to Capitalize the text. You can also set the Style from Normal to Bold.

Layout

alternative-homepage-layout

Grid’s Alternative home page layout utilizes Grid’s masonry feature to create a homepage that focuses on your images (as pictured above).

To use it, first upload up to six images in Grid’s Masonry section (see instructions above for optimal image sizes), then navigate to General settings>Homepage layout and click Enable under Alternative homepage layout.

Social media

Grid supports social icons for Facebook, Twitter, Pinterest, Instagram, Google+, Tumblr, YouTube, Vimeo, Kickstarter and email.

ACCOUNTS

Simply enter in your account URL in the relevant account field and the social icons will automatically appear in your footer. You can also add an email link here if you wish.

grid-social-icons

SHARING

If you would like to enable share buttons on your product and article pages (allowing users to share your products and posts to their social networks) you’ll enable them separately on both the Product pages and Article section settings. Here, you can select which options to display in these various areas. The options are Share on FacebookTweet on TwitterPin on PinterestAdd to Fancy+1 on Google+, and Enable email. Select the ones you want users to be able to use.

Currency

Shopify works in virtually every country and every currency. With Grid, you can cater to international customers with a currency converter that displays as a dropdown menu in the header of your store. This allows customers to dynamically update their prices throughout your shop.

grid-currency-conversion

After enabling the converter by checking Enable currency conversion, you can choose which currencies are supported and how they’re displayed.

Under Format, you can choose whether or not to display the currency acronym on product and collection pages (e.g. $10.00 CAD vs. $10.00).

Under Supported currencies, you can select which currencies you want to allow users to display when browsing your store. Be sure to use the country’s ISO currency code, and separate each with a space. Note that exchange rates used by Shopify are refreshed twice a day based on rates at XE.com.

You’ll also set the Default currency on this page. This is the currency that will display when a user first lands on your site, i.e. before they have had a chance to use the currency customizer. This is different from your store’s Operating currency, which is the currency you use to process orders. You can set your operating currency in the Shopify admin under Settings>General>Standards and formats.

Checkout

Under the Checkout section of the theme editor, you can add custom banner images, logos, and backgrounds, as well as customize the fonts and colors used throughout the checkout process.

BANNER

The banner is the top section of the checkout screen where your store name appears. By default, it is transparent (or whatever color your store’s background is) however you can customize it by uploading a custom Background image. We recommend uploading an 1000 x 400px image.

LOGO

If you want to add your store’s logo to the checkout page, simply upload a Custom image. You can use your storefront logo or you can upload a different one instead. You can also define the Position and Logo size by making a selection from the bottom two menus.

MAIN CONTENT AREA

The main content area is the left side of the checkout screen where a user inputs their email and shipping address. If you’d like to use a custom background here, upload an image or use the color picker to select a background color. You also have two options for the color of the Form fields—white or transparent.

ORDER SUMMARY

The order summary is the right side of the checkout screen where customers can review the details of their order. You can either upload an image or use the color picker to select a background color.

TYPOGRAPHY

You can customize both the Headings and Body font of the checkout screen by selecting fonts from the appropriate dropdown menu.

COLORS

You can customize the colors that appear on the checkout page under Colors. You can see which areas correspond to each section (AccentsButtons, and Errors) by watching how changes are processed in the preview screen.

You can customize more of the checkout settings from the Shopify admin.

Tabs

You can add tabs to any RTE (rich text editor) area in Grid. This includes:

  • Product descriptions
  • Collection descriptions
  • Custom pages
  • Blog posts

Find an RTE field in the admin area and press the “Show HTML” button. Paste in the following example and replace the text content (“Label X” and “Content for Label X”) with your own. The top set of elements are the tabs themselves, and the second set of elements are the content that corresponds to each tab.

Code Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul class="tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<ul class="tabs-content">
<li class="active">
<p>Tab 1 content goes here.</p>
</li>
<li">
<p>Tab 2 content goes here.</p>
<li>
<p>Tab 3 content goes here.</p>
</li>
</li>
</ul>

World-class customer support

We’ve covered a lot of ground in these docs, but there will no doubt be questions they don’t answer. If you’ve got a burning question—or if you’re just stuck—don’t hesitate to get in touch with us. Our friendly and knowledgable support team will dig into the issue and get you back on track ASAP.