Skip to main content

Shopify theme editor basics

Understanding Shopify's theme editor is essential for adding your ShopGuide chat widget. This guide covers the parts of the theme editor relevant to installing and managing the "ShopGuide Chat" block.

Accessing the Theme Editor​

  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 as current)
  4. Click Customize to open the theme editor

Theme Editor Interface​

Left Sidebar

  • Sections: add, remove, and configure page sections
  • Theme settings: global theme configuration
  • Page selector: switch between templates (home, product, collection, etc.)

Center Preview

  • Live preview of your store
  • Device toggles to preview desktop and mobile
  • Page selector to choose which template to edit

Top Toolbar

  • Save: apply changes to your live theme
  • Preview: view changes without publishing
  • Exit: return to the themes overview

ShopGuide Requires an Online Store 2.0 Theme​

The "ShopGuide Chat" block is a Shopify theme app extension block. It only works with Online Store 2.0 themes (the current generation of Shopify themes, including Dawn and most themes currently sold in the Shopify Theme Store). Older, pre-2.0 themes don't support app blocks at all — if your theme editor has no "Add Section" option or no Apps category under it, your theme needs to be upgraded or replaced before ShopGuide can be added via the theme editor.

Adding the ShopGuide Chat Block​

  1. Open the theme editor on the page/template where you want the chat to render
  2. Click Add Section in the left sidebar
  3. Open the Apps category
  4. Click ShopGuide Chat
  5. Click Save

The block always renders as a fixed floating bubble, so where you drop it in the section list doesn't affect where it appears on screen — see Chat block & app embed setup for the full walkthrough and block settings.

Mobile vs Desktop Preview​

  • Theme editor changes apply to all devices by default; ShopGuide's own device-specific controls (hide on desktop/mobile, max height, drawer mode) are configured in the ShopGuide admin app, not the theme editor — see Mobile & desktop chat settings
  • Always check both the mobile and desktop preview after adding or reconfiguring the block

Before Making Changes​

Duplicate your theme first

  1. Go to Online Store > Themes
  2. Click Actions on your current theme
  3. Select Duplicate
  4. Name it clearly (e.g. "Backup — before ShopGuide")

Make your changes in the duplicate or in preview mode first, verify the chat appears and works, then publish.

Common Theme Editor Issues​

Chat Block Not Appearing

  • Confirm your theme is Online Store 2.0 (see above)
  • Confirm ShopGuide is installed and your subscription/trial is active
  • Refresh the theme editor and clear your browser cache

Styling Doesn't Match Your Brand

Next Steps​

Take time to familiarize yourself with the theme editor — it's your primary tool for adding and managing the ShopGuide chat block.