Using the theme editor with Grid


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 indigo Customize button in the top right of your screen.

Grid as published theme in Shopify's Online store window

You'll see that the theme editor is divided into two tabs:  Sections and Theme 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. Sections are the building blocks of your store, allowing you to assemble pages from customizable, moveable components. You can add, remove, and reorder sections, as well as access the customization features for each from the Sections tab.

Grid in theme editor with sections visible in left-side settings

Theme settings tab

The Theme settings tab is your control center for configurations and settings, such as Typography, Colors, and Social media.

Theme settings categories as they appear in theme customizer

Pro tips

Most of the time you spend in the theme editor will be on either the  Sections or Theme settings. There are a few other helpful tools to note, as well.

Theme actions menu in theme editor sidebar

The  Theme actions menu attached to your theme name contains a few handy links. 

View theme will open a new tab or window to see how the saved content will display from the customer's point of view. This will be called Preview theme if the theme is still in the draft stage.

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 by selecting Edit code

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

Device preview selector in theme editor

Above the right-side preview, you can change the device view. This allows you to get a sense of how your store appears in mobile (left), desktop with settings sidebar (center), and full-window desktop (right).

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  BrightMoodyWarm, and Light styles in action.

To select the theme style you would like to use in your store, click over to the Theme 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.

Theme style selector with four style options

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.



Back to top ↑

Next article:

Setting up your homepage with Grid