Using the Theme Editor

The Shopify theme editor is your control center for customizing Edpro. This guide shows you how to use it effectively.

Accessing the Theme Editor

1. Go to your Shopify admin
2. Navigate to Online Store → Themes
3. On your Edpro theme, click Customize

Theme Editor Overview

The theme editor has three main areas:

Left Sidebar - Sections Panel

This is where you manage your page content:

• Add sections - Click “Add section” to add new content blocks
• Reorder sections - Drag and drop sections to rearrange them
• Remove sections - Click a section, then click the trash icon
• Configure sections - Click any section to open its settings

Center - Live Preview

Shows a real-time preview of your changes:

• Preview updates instantly as you make changes
• Switch between desktop and mobile views
• Navigate to different pages to edit them

Right Side - Settings Panel

When you select a section, its settings appear here:

• Adjust colors, text, and layout options
• Add images and configure media
• Enable or disable features

Editing Different Pages

Use the page selector at the top of the editor:

1. Click the current page name (e.g., “Home page”)
2. Select from:
   • Home page - Your store’s landing page
   • Products - Product page template
   • Collections - Collection page template
   • Pages - Standard pages
   • Blogs - Blog and article templates
   • Cart - Shopping cart page
   • Other pages - Search, 404, password pages

Theme Settings

Access global settings that apply to your entire store:

1. Click the gear icon (⚙️) in the left sidebar, or scroll to the bottom
2. Configure:
   • Design system - Colors, fonts, button styles
   • Product cards - How products appear in grids
   • Product badges - Sale and new arrival badges
   • Price styling - Price display formatting
   • Predictive search - Search suggestions settings

Working with Sections

Adding a Section

1. Click Add section in the left sidebar
2. Browse available sections or use the search
3. Click a section to add it to your page

Configuring a Section

1. Click the section name in the left sidebar
2. Adjust settings in the right panel
3. Changes appear instantly in the preview

Adding Blocks to Sections

Many sections contain blocks (smaller components):

1. Click the section to expand it
2. Click Add block to add content blocks
3. Drag blocks to reorder them
4. Click any block to configure it

Removing a Section

1. Click the section to select it
2. Click the trash icon (🗑️) in the section header
3. Confirm removal if prompted

Saving Your Changes

• Click Save in the top-right corner to save changes
• Your changes are saved to a draft until published
• Click Preview to see your store as customers will see it

Tips for Efficient Editing

1. Work on one page at a time - Complete one page before moving to the next
2. Save frequently - Don’t lose your work
3. Preview on mobile - Use the device toggle to check mobile layout
4. Use undo - Press Ctrl+Z (Windows) or Cmd+Z (Mac) to undo changes

Common Tasks

Changing your logo

1. Go to Header section
2. Click Select image under Logo
3. Upload your logo file

Changing colors

1. Open Theme settings (gear icon)
2. Go to Design system
3. Adjust color options

Changing fonts

1. Open Theme settings (gear icon)
2. Go to Design system → Typefaces
3. Select your preferred fonts

Next Steps

Now that you understand the theme editor, complete the First Setup Checklist to configure your store.