Using the theme editor with Reach
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, most of the changes you make to the look, feel, and functions 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 to the right of the theme.
You'll see that the theme editor is divided into two tabs, titled Sections and Theme settings. We'll cover each in detail below, but here are the essentials to help you get your bearings.
The Sections tab contains all of the sections that are available to you in Reach. Sections are the building blocks of your store, allowing you to assemble pages with customizable, moveable 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.
Theme settings tab
The Theme settings tab lets you make general changes to the look of your store. The settings categories include Colors, Typography, Embellishments, Products, Search, Social Media, Favicon, Currency, and Checkout.
Most of the time you spend in the theme editor will be on either the Sections or Theme 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 Theme actions selector in the bottom left hand corner of your theme customizer screen contains a bunch of handy links.
Preview theme - This will open a new tab or window to show you how the store will look based on the current configurations and settings.
Edit Code - 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.
Edit languages - These settings allow you to control the text content of your theme. Whether you use this to change which terms or phrases are used ("Cart" to "Basket") or to manually translate to another language is up to you.
Above the preview of the theme editor, you'll find three little buttons that toggle between the mobile, desktop, and fullscreen previews of your store. It looks like this:
With this, you can see how your store will appear on different devices.
To select the theme style you would like to use in your store, click 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.
Note: Applying and saving a new theme style will overwrite your current style settings. However, by changing styles 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.