Skip to content
Home

Shopify

There are two primary methods to add PicoBot to your Shopify store: by directly editing your theme.liquid code, or by using the Shopify visual theme customizer.

Section titled “Method 1: Using theme.liquid (Recommended)”
  1. Go to your PicoBot workspace dashboard.
  2. Click the Deploy button in the sidebar menu.
  3. Click the Manage button under the Website Widget option.
  4. Optional: Design the appearance of the widget by clicking the Open widget designer button.
  5. Select the display mode for your AI Agent, such as Floating Chat, Inline, or Fullscreen.
  6. Click to copy the widget code.
  7. Go to your Shopify dashboard and click on Online Store from the left sidebar.
  8. Edit your theme by clicking the ... (ellipsis) icon next to your current theme and choosing Edit code.
  9. Find and open the theme.liquid file from the sidebar where the list of files is displayed.
  10. Paste the widget code in the <head> section. You can paste it anywhere between the opening <head> tag and the closing </head> tag.
  11. Click the Save button.

The AI Agent will immediately be live on your website and will perfectly appear across all your store’s pages.

If you prefer not to edit your liquid code files directly, you can use Shopify’s visual block editor.

  1. Follow steps 1-6 from Method 1 to successfully copy your PicoBot widget code.
  2. From your Shopify dashboard, click on Online Store and go to Themes.
  3. Click on the Customize button next to your current active theme.
  4. Under the Header section (on the left side), click Add section. Search for Custom liquid and add it.
  5. Open the newly added Custom liquid editor and paste your widget code directly into the Liquid code field.
  6. Set the Top padding and Bottom padding to 0 so the section doesn’t create a blank invisible space in your site’s header.
  7. Click the Save button at the top right.

The widget will now be live on your website and seamlessly integrated across all your store’s pages.