Table of Contents

Landbot in Shopify

Pau Sanchez Updated by Pau Sanchez

All that you need to know to add a Landbot to your Shopify site

Landbot Share section and types of embed styles for you Shopify

Share section

To embed a Landbot in your Shopify site, first you need to go the Share Section of your bot and then select which type of bot style would you like to embed. Below is all the types of bots you can embed:

Livechat style

This style, is the most common and is meant to cover a small area (unless is mobile) on the right side of the screen once the user triggers it

Here is how to embed in for this style of embed

Pop up style

The pop style is recommended when you want to display the bot based on a trigger (click on the widget/bubble) by the user, like the livechat embed, but covering most of the screen.

Here is how to embed for this style of embed

Embed (container) style

This style is recommended when you want the bot displayed in a specific part of the bot and being displayed only when the user scrolls to a specific area. Like for example a Hero section. It allows you to set up custom width and sizes.

Here is how to embed for this style of embed

In case you want to embed Landbot as an iframe, here is how you can do it

Full page style

This style of embed is meant to use to cover the whole site

Here is how to embed for this style of embed

Embed Livechat or Pop Up

There are two possible approaches to embed a livechat or pop up type, one that will be in a single page or another way to embed it for the whole site:

Embed Livechat or Pop Up in a single page
  1. Copy the snippet from the Share section
  2. Now in Shopify go to the Admin Section

  3. In the Online Store section, select Pages

  1. Select and enter in the desired page where you want to add the bot
  2. Switch to HTML

  1. Paste the Snippet from Landbot Share Section in the editor

  1. Press SAVE

  1. Now you can see the bot embedded
Embed Livechat or Pop Up in the whole site

  1. Go to Admin Section

  1. Select Online Store

  1. Select Themes

  1. Click Actions

  1. Select Edit code

  1. In the search area, type "theme"

  1. Select "theme.liquid"

  1. On the right side, you will see the site code template, sroll down until you see the </head>

  1. Right between the {{ content_for_header}} and </head>, we will paste the Landbot livechat embed code

  1. Return to Landbot to copy the livechat embed code:

  1. Paste the Landbot livechat embed code between those two elements

  1. Press Save

  1. And now you can see the result in your Shopify site

Embed Container in Page

  1. Go to Admin Section

  1. Select Online Store

  1. Select Themes

  1. Click Customize

  1. Select the page you want to edit

  1. Once there, on the left side panel, select the "Add section" element
  2. Now, we will click "Custom HTML"

  1. In the editor you can see that a new element has been created, click to edit it:
  2. Press to Select it again in Custom HTML
  3. Now you will see and editor to add the snippet:
  4. Copy the snippet from the Share section
  5. Go back to the Custom HTML block and paste the snippet:
  6. Press Save
  7. Then the script will load and now you can see in the editor the Landbot

  1. And also you will see it live in your site:

Note that you can customise the size by changing the snippet style sizes:

Embed Full Page

Creating a Blank Page Template in Shopify
  1. Go to Admin Section

  1. Select Online Store

  1. Select Themes

  1. Click Actions

  1. Select Edit code

  1. Now click on "Add a new template"

  1. A pop up window will appear

  1. Instead of "article" select "page"
  2. And as a name, add "blank_page"
  3. And press "Create template"

  1. In the editor, you will see your new template:

  1. Delete all the content:

  1. And now paste {% layout none %} in the editor:
  2. Now we will add below the Full page snippet, but just the part between the <body> </body> tags:
  3. So the code looks like this:
  4. And press Save
  5. On the left side panel, we will select Pages, to create a new one using this template we just created:

  1. Select and enter in the desired page where you want to add the bot
  2. On the right side, select the Template we just created:
  3. Press SAVE, we don't need to do add anything else here

  1. Now you can see the bot embedded

Add extra customisations and behaviours:

Open livechat as soon as page loads

In case you want to trigger a livechat or pop up as soon as the page is loaded, without user interaction, please check here

Customise widget/bubble look and feel

Finally, many design customisation can be done, please check them in this article

How did we do?

Embed in Sharetribe

Embedding Landbot in Carrd

Contact