Using the theme editor with Vogue

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

Sections tab

The Sections tab contains all of the sections that are available to you in Empire. 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. We wrote a blog post all about how they work and why they're great, which you can read here.

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.

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:

The dropdown menu attached to your theme name contains a bunch of handy links. First up, Read 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, in the bottom lefthand corner, you'll find two little buttons that let you toggle between previewing your site look on desktop and on mobile. They look like this:

You can also undo or redo changes using the buttons to the right. And Save? Well, you know what that does.

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

Vogue comes packaged with three theme styles that curate your store's colors, fonts, and styles for you. Check out our store demos to see the  ElegantEditorial, and Organic presets.

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.

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.