Skip to main content

Adding Your ShopGuide Chat Block

This step-by-step guide walks you through adding the "Your ShopGuide Chat" block to your Shopify store pages using the theme editor.

Before You Start​

Prerequisites​

  • ShopGuide app installed and active subscription
  • Access to your Shopify theme editor
  • Basic familiarity with Shopify admin
  • Backup of your current theme (recommended)

Planning Your Chat Placement​

Consider these factors before adding your chat block:

  • Customer journey: Where do customers need help most?
  • Page traffic: Focus on high-traffic pages first
  • Conversion goals: Place chat where it can impact sales
  • User experience: Avoid overwhelming or cluttering pages

Chat Placement Planning

Step-by-Step Setup​

1. Access Theme Editor​

  1. From Shopify admin, go to Online Store > Themes
  2. Find your active theme and click Customize
  3. Choose the page where you want to add chat (start with homepage)

2. Locate Chat Block​

  1. In the theme editor sidebar, look for Add section or Add block
  2. Search for "Your ShopGuide Chat" or browse the Apps category
  3. The block will show with a chat bubble icon and ShopGuide branding

Finding Chat Block

3. Add the Block​

  1. Click on "Your ShopGuide Chat" to add it
  2. The block will appear in your selected section
  3. You'll see it in both the sidebar and the preview area
  4. The chat widget will immediately appear in the preview

4. Position the Block​

Within Sections

  • Drag the chat block to your preferred position
  • Consider placing it after hero content but before footer
  • Test different positions to see what works best

Section Placement Options

  • Header area: Always visible but may interfere with navigation
  • Main content: Integrated with page content
  • Sidebar: Less intrusive, good for desktop
  • Footer area: Available but not prominent

Block Configuration Options​

Basic Settings​

Chat Heading

  • Default: "Your ShopGuide"
  • Customize to match your brand voice
  • Examples: "Ask [Store Name]", "Shopping Assistant", "Need Help?"

Primary Color

  • Sets the main color for user messages and accents
  • Should match your brand colors
  • Affects buttons, user message bubbles, and highlights

Product Context (for product pages)

  • Auto-fills with current product information
  • Helps AI provide relevant product assistance
  • Leave blank for general store assistance

Basic Configuration

Advanced Block Settings​

Custom Settings Override

  • Enable: Use page-specific settings instead of global settings
  • Disable: Use global settings from ShopGuide dashboard
  • Recommendation: Start with global settings, customize later

Visibility Controls

  • Hide on desktop: Remove chat from desktop view
  • Hide on mobile: Remove chat from mobile view
  • Use case: Different experiences for different devices

Custom Launch Messages​

Use Custom Launch

  • Enable to override automatic AI greeting
  • Create specific welcome messages for different pages
  • Useful for product-specific or page-specific assistance

Custom Buttons

  • Add up to 6 quick-action buttons
  • Examples: "Product Advice", "Size Guide", "Shipping Info"
  • Helps customers start conversations quickly

Custom Launch Settings

Page-Specific Setup​

Homepage Setup​

Recommended Placement

  • Below hero section for immediate visibility
  • In sidebar for non-intrusive presence
  • Above footer for easy access without interference

Configuration Tips

  • Use general welcome message
  • Focus on store navigation and product discovery
  • Include buttons for popular customer questions

Product Page Setup​

Optimal Placement

  • Near product description for contextual help
  • In product details section for purchase assistance
  • Below add-to-cart button for decision support

Configuration Tips

  • Enable product context for relevant assistance
  • Use product-specific welcome messages
  • Include buttons for sizing, compatibility, reviews

Collection Page Setup​

Strategic Placement

  • In sidebar for browsing assistance
  • Above product grid for category guidance
  • Below filters for search and discovery help

Configuration Tips

  • Focus on category-specific assistance
  • Help with product comparisons
  • Guide customers to specific products

Page-Specific Setup

Testing Your Setup​

Functionality Testing​

Basic Tests

  1. Visibility: Chat block appears on the page
  2. Interaction: Click to open chat interface
  3. Messaging: Send a test message and receive response
  4. Styling: Colors and fonts match your expectations

Advanced Tests

  1. Product context: AI knows about current product (on product pages)
  2. Custom buttons: Quick-action buttons work correctly
  3. Mobile responsiveness: Chat works well on mobile devices
  4. Cross-browser: Test in different browsers

Performance Testing​

Page Load Speed

  • Check loading times before and after adding chat
  • Use tools like Google PageSpeed Insights
  • Monitor for any significant slowdowns
  • Optimize if necessary

User Experience

  • Navigate through your store with chat enabled
  • Test customer journey flows
  • Ensure chat doesn't interfere with other functionality
  • Verify mobile usability

Common Setup Issues​

Chat Block Not Appearing​

Troubleshooting Steps

  1. Refresh theme editor: Sometimes blocks need a refresh to appear
  2. Check app installation: Ensure ShopGuide is properly installed
  3. Verify subscription: Confirm your ShopGuide subscription is active
  4. Clear cache: Clear browser cache and try again

Styling Issues​

Common Problems

  • Colors don't match theme
  • Chat appears too large or small
  • Positioning conflicts with theme elements
  • Mobile display problems

Quick Solutions

  • Adjust colors in block settings
  • Modify sizing options
  • Try different positioning
  • Test mobile preview thoroughly

Functionality Problems​

Message Issues

  • Chat opens but messages don't send
  • AI doesn't respond to messages
  • Error messages appear in chat

Resolution Steps

  • Check internet connection
  • Verify ShopGuide subscription status
  • Test with different browsers
  • Contact support if issues persist

Troubleshooting

Optimizing Your Setup​

Performance Optimization​

Best Practices

  • Use optimized images in chat settings
  • Minimize custom CSS if possible
  • Test loading speeds regularly
  • Monitor for conflicts with other apps

User Experience Enhancement​

Continuous Improvement

  • Monitor chat usage analytics
  • Gather customer feedback
  • Test different placements
  • Optimize based on performance data

A/B Testing Setup​

Testing Ideas

  • Different chat positions on the same page
  • Various welcome messages
  • Different color schemes
  • Custom button variations

Next Steps​

Enhance your chat integration:

Remember: Start simple with basic setup, then gradually customize based on customer behavior and feedback.