Shopify Theme Editor: Store Customization Guide

The Shopify Theme Editor is a visual tool for customizing your store's appearance without writing code. You can modify layouts, update content, change colors and fonts, and see your changes in real-time. This guide covers how to use the Theme Editor effectively.

Accessing the Theme Editor

1. Go to Online Store > Themes in your Shopify admin
2. Find your current (live) theme
3. Click Customize

The Theme Editor opens with your store preview on the right and editing options on the left.

Theme Editor Interface

Left Panel

Contains editing controls:

• Sections: Add, remove, and configure page sections
• Theme settings: Global settings like colors and fonts
• Page selector: Switch between different page templates

Preview Area

• Live preview of your changes
• Click elements to select them for editing
• Device preview buttons (desktop, tablet, mobile)

Working with Sections

Sections are the building blocks of your pages. Each section is a distinct content area.

Common Section Types

• Header: Logo, navigation, cart icon
• Slideshow/Banner: Hero images with text overlay
• Featured collection: Display products from a collection
• Featured product: Highlight a specific product
• Rich text: Text content with formatting
• Image with text: Image and text side by side
• Newsletter: Email signup form
• Footer: Links, social icons, copyright

Adding Sections

1. Click Add section in the left panel
2. Browse available section types
3. Click to add the section
4. Configure section settings
5. Drag to reorder if needed

Editing Sections

1. Click the section name in the left panel (or click it in the preview)
2. Modify settings like content, images, and layout
3. Add or remove blocks within the section
4. Changes appear immediately in the preview

Blocks

Blocks are smaller components within sections. For example, a "Featured collection" section might contain product blocks.

• Click a section to see its blocks
• Add blocks using the "Add block" button
• Drag blocks to reorder them
• Delete blocks you don't need

Theme Settings

Global settings that apply to your entire store:

1. Click Theme settings in the left panel
2. Configure options like:

• Colors: Primary, secondary, background, text colors
• Typography: Fonts for headings and body text
• Logo: Upload your store logo
• Favicon: Browser tab icon
• Social media: Links to your social profiles
• Cart: Cart behavior (drawer vs. page)

Editing Different Pages

Use the page selector dropdown at the top of the Theme Editor to customize different page types:

• Home page: Your store's landing page
• Collection pages: Product listing pages
• Product pages: Individual product details
• Cart: Shopping cart page
• Blog: Blog post listings
• Other pages: About, Contact, etc.

Collections in Your Theme

Showcase your collections using theme sections:

• Featured collection: Display products from one collection
• Collection list: Show multiple collection images
• Collection page template: Customize how collection pages display

Preview Modes

Test your design on different devices:

• Desktop: Full-width preview
• Tablet: Medium-width preview
• Mobile: Narrow preview (important—most traffic is mobile)

Always check mobile appearance before publishing changes.

Saving and Publishing

• Save: Click Save to preserve your changes
• Preview: View changes on your live store (you only)
• Exit: Return to your theme list

If you're customizing your live theme, changes go live when you save. For safer editing, duplicate your theme first.

Safe Customization Practice

1. Go to Online Store > Themes
2. Click Actions > Duplicate on your current theme
3. Customize the duplicate
4. When ready, publish the duplicate as your live theme

This approach lets you experiment without affecting your live store.

When You Need Code

Some customizations require editing theme code:

• Adding custom Liquid sections that aren't available in your theme (e.g., a size guide table or ingredient list)
• Modifying the product form to show variant-specific images or custom metafield data
• Injecting tracking scripts or third-party widgets that don't have a Shopify app
• Changing collection page grid behavior (e.g., showing different layouts for tagged vs. untagged products)

For code changes, click Actions > Edit code on your theme. This requires knowledge of Liquid, HTML, CSS, and JavaScript.

Best Practices

• Set global theme settings first: Configure colors, fonts, and logo under Theme Settings before customizing individual pages — this avoids inconsistencies
• Edit on a duplicate: Click Actions > Duplicate before making changes. Publish the duplicate when you're happy — the original stays as a rollback
• Preview on mobile: Use the device toggle at the top of the editor. Most customers shop on phones, and section layouts behave differently at narrow widths
• Use OS 2.0 app blocks: If your theme supports it, add app content via the editor (Product page > Add block) instead of editing Liquid code
• Keep sections minimal on the homepage: Each section adds page weight. Five or six well-chosen sections load faster than fifteen

Conclusion

The Theme Editor makes it easy to customize your store's appearance without coding knowledge. Start with global theme settings, then customize individual pages using sections and blocks. Always preview on mobile devices and consider duplicating your theme before making significant changes.

Related Resources

• Shopify Help: Theme Editor
• Choosing a Shopify Theme
• Shopify Liquid Guide