Skip to main content

Theme Editor Basics

Understanding Shopify's theme editor is essential for successfully integrating your ShopGuide chat widget. This guide covers everything you need to know about navigating and using the theme editor effectively.

Accessing the Theme Editor​

From Shopify Admin​

  1. Navigate to Online Store in your Shopify admin sidebar
  2. Click Themes to view your store's themes
  3. Find your active theme (marked with "Current theme")
  4. Click Customize to open the theme editor

Accessing Theme Editor

Theme Editor Interface​

The theme editor consists of several key areas:

Left Sidebar

  • Sections: Add, remove, and configure page sections
  • Theme settings: Global theme configuration
  • Navigation: Switch between different pages and templates

Center Preview

  • Live preview: Real-time view of your store
  • Device toggles: Preview on desktop, tablet, and mobile
  • Page selector: Choose which page to edit

Top Toolbar

  • Save: Apply changes to your live theme
  • Preview: View changes without publishing
  • Exit: Return to themes overview

Understanding Sections and Blocks​

Sections vs Blocks​

Sections

  • Large content areas (header, footer, product info)
  • Can contain multiple blocks
  • Control overall page layout
  • Examples: Hero banner, product grid, testimonials

Blocks

  • Individual content elements within sections
  • Specific functionality pieces
  • Can be added, removed, and reordered
  • Examples: Text block, image block, chat block

Sections and Blocks

Finding ShopGuide Chat​

The ShopGuide chat appears as:

  • Block name: "Your ShopGuide Chat"
  • Category: Usually under "Apps" or "Custom"
  • Icon: Chat or message bubble icon
  • Description: AI-powered shopping assistant

Theme Editor Navigation​

Page Templates​

Different page types have different editing options:

Homepage

  • Most flexible for adding chat
  • Multiple section options
  • High customer traffic area

Product Pages

  • Product-specific chat context
  • Limited section areas
  • Focus on purchase decisions

Collection Pages

  • Category-specific assistance
  • Browse and discovery focus
  • Product comparison help

Other Pages

  • About, contact, FAQ pages
  • Specific use case scenarios
  • Targeted customer support

Mobile vs Desktop Editing​

Responsive Design

  • Changes apply to all devices by default
  • Some settings have device-specific options
  • Always test on multiple screen sizes

Mobile-Specific Considerations

  • Touch-friendly sizing
  • Screen space limitations
  • Different user behavior patterns
  • Keyboard interaction handling

Mobile vs Desktop

Theme Editor Best Practices​

Before Making Changes​

Backup Your Theme

  1. Go to Online Store > Themes
  2. Click Actions on your current theme
  3. Select Duplicate to create a backup
  4. Name it clearly (e.g., "Backup - [Date]")

Plan Your Changes

  • Identify where chat will be most effective
  • Consider customer journey and page flow
  • Think about mobile user experience
  • Plan for different page types

Making Changes Safely​

Use Preview Mode

  • Make changes in preview before publishing
  • Test functionality thoroughly
  • Check on different devices
  • Verify chat appears and works correctly

Gradual Implementation

  • Start with one page (homepage recommended)
  • Test and optimize before expanding
  • Monitor customer feedback and behavior
  • Iterate based on performance data

Testing Your Changes​

Functionality Testing

  • Chat widget appears correctly
  • Messages send and receive properly
  • Styling matches your brand
  • Mobile responsiveness works

Cross-Browser Testing

  • Test in Chrome, Firefox, Safari, Edge
  • Check on different operating systems
  • Verify on various mobile devices
  • Test with different screen resolutions

Common Theme Editor Issues​

Chat Block Not Appearing​

Possible Causes

  • App not properly installed
  • Theme compatibility issues
  • Browser cache problems
  • Insufficient permissions

Solutions

  • Refresh the theme editor
  • Clear browser cache
  • Reinstall ShopGuide app
  • Contact support if issues persist

Styling Problems​

Common Issues

  • Chat doesn't match theme colors
  • Positioning conflicts with theme elements
  • Mobile display problems
  • Font or sizing inconsistencies

Quick Fixes

  • Adjust chat colors in block settings
  • Modify positioning options
  • Test mobile preview thoroughly
  • Use theme-compatible fonts

Styling Issues

Performance Considerations​

Page Load Speed

  • Monitor loading times after adding chat
  • Optimize images and assets
  • Consider lazy loading options
  • Test with performance tools

Theme Conflicts

  • Check for JavaScript conflicts
  • Verify CSS compatibility
  • Test with other apps installed
  • Monitor for layout issues

Advanced Theme Editor Tips​

Custom CSS Integration​

When to Use Custom CSS

  • Advanced styling requirements
  • Brand-specific design needs
  • Complex layout adjustments
  • Professional customization

How to Add Custom CSS

  • Use theme's custom CSS section
  • Add styles in theme settings
  • Consider using CSS variables
  • Test thoroughly across devices

Working with Different Themes​

Popular Theme Considerations

  • Dawn: Shopify's default theme, excellent compatibility
  • Debut: Older but widely used, good support
  • Brooklyn: Fashion-focused, may need positioning adjustments
  • Venture: Multi-purpose, flexible integration options

Theme-Specific Tips

  • Check theme documentation
  • Look for app integration guides
  • Test in theme's demo store first
  • Consider theme developer resources

Collaboration and Workflow​

Team Collaboration

  • Communicate changes with team members
  • Document customization decisions
  • Use descriptive names for duplicated themes
  • Maintain version control practices

Development Workflow

  • Use development themes for testing
  • Preview changes before publishing
  • Schedule updates during low-traffic periods
  • Have rollback plans ready

Getting Help with Theme Integration​

Self-Service Resources​

  • Theme documentation: Check your theme's official docs
  • Shopify help center: General theme editor guidance
  • ShopGuide documentation: App-specific integration help
  • Community forums: Learn from other users' experiences

When to Contact Support​

  • Chat block not appearing after proper installation
  • Persistent styling or functionality issues
  • Complex theme compatibility problems
  • Custom integration requirements

Professional Services​

  • Shopify Experts: For complex customizations
  • Theme developers: For theme-specific modifications
  • ShopGuide support: For app-related integration help
  • Freelance developers: For custom solutions

Next Steps​

Master theme integration:

Take time to familiarize yourself with the theme editor - it's your primary tool for customizing your store's appearance and functionality.