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.
Method 1: Using theme.liquid (Recommended)
Section titled “Method 1: Using theme.liquid (Recommended)”- Go to your PicoBot workspace dashboard.
- Click the Deploy button in the sidebar menu.
- Click the Manage button under the Website Widget option.
- Optional: Design the appearance of the widget by clicking the Open widget designer button.
- Select the display mode for your AI Agent, such as Floating Chat, Inline, or Fullscreen.
- Click to copy the widget code.
- Go to your Shopify dashboard and click on Online Store from the left sidebar.
- Edit your theme by clicking the
...(ellipsis) icon next to your current theme and choosing Edit code. - Find and open the
theme.liquidfile from the sidebar where the list of files is displayed. - Paste the widget code in the
<head>section. You can paste it anywhere between the opening<head>tag and the closing</head>tag. - Click the Save button.
The AI Agent will immediately be live on your website and will perfectly appear across all your store’s pages.
Method 2: Using Customization
Section titled “Method 2: Using Customization”If you prefer not to edit your liquid code files directly, you can use Shopify’s visual block editor.
- Follow steps 1-6 from Method 1 to successfully copy your PicoBot widget code.
- From your Shopify dashboard, click on Online Store and go to Themes.
- Click on the Customize button next to your current active theme.
- Under the Header section (on the left side), click Add section. Search for Custom liquid and add it.
- Open the newly added Custom liquid editor and paste your widget code directly into the Liquid code field.
- Set the Top padding and Bottom padding to
0so the section doesn’t create a blank invisible space in your site’s header. - 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.