Embedding a Jebbit Experience in a Shopify Storefront
If you are a customer using the Jebbit App through Shopify, then this guide will show you how to embed Jebbit experiences onto your Shopify storefront. We outline steps for using the Jebbit Onsite Embed app to embed onsite, as well as steps for using a Custom Liquid too.
Video Tutorial
Step by Step Guide
When editing your theme in Shopify, find where you want to embed your experience, then select Apps > Add block, and choose the Jebbit Onsite Embed app.
In the right-hand column, paste a Launch Link to embed a standard experience. You can grab the link from the Launch page in the Jebbit platform.
If you are embedding a Lightbox or Companion, then navigate to the Onsite Deployment settings for your brand, and grab the Companion/Lightbox Launcher Key to paste into the theme extension instead.
If your theme supports theme extensions and you were able to follow the steps above, then you are all set! However, if your theme cannot support theme extensions, then continue below to learn another way that you can embed Jebbit experiences onto your Shopify Storefront.
Starting from your Jebbit account, click the "Builder" tab and select Experience Library to view your campaigns.
Select the experience campaign you want to embed in your Shopify store.
From the Builder Map view of your selected experience, click the "Launch" button which is located in the top nav bar to the right of "Editor."
Click on the "Website" section on the left side menu panel > then "Embed On Site". Click on the "Create Embed Code" tab to generate the iframe snippet code.
Once generated, click the "Copy" icon to copy the embed code that you will paste in the Shopify storefront editor.
Now that you have your embed code, now let's add this experience to your Shopify store! Take note, some steps in the Shopify platform may look slightly different than what we outline below. If you are unable to follow along, try checking out this resource from the Shopify support center!
Open your Shopify store Admin panel
On the left hand panel, click the "Sales Channels" dropdown, or simply type "Online Store" in the search bar at the top of the screen.
Click "Online Store" from the results.
You should default to your themes. Click the "Customize" button.
Now, from the left hand panel, scroll down the options until you see an option to "Add Section"
Select the "Custom Liquid" option.
Once you click "Custom Liquid" on the left hand side (you may have to scroll until you find it), a blue box should appear indicating your Custom Liquid.
Click into the box.
After you click the blue Custom Liquid box, you should see this panel appear on the left or right side of your screen. Paste your embed code in the Custom Liquid Box.
Your experience should automatically populate on screen.
Click the "Save" button in the top-right corner.
Congratulations! You've embedded a Jebbit experience in your Shopify storefront!
Frequently Asked Questions
Q: My Shopify theme does not support theme extensions and I cannot locate the Jebbit Onsite Embed app.
A: If your theme cannot support theme extensions, then you can still embed your experiences onto your Shopify storefront by using a Custom Liquid. Refer back to step four in this article and follow the steps from there to see how!
Q: I'm having a hard time following your steps to add my experience through a Custom Liquid.
It's very possible that some steps in the Shopify platform may look slightly different than what we outline above. If you are unable to follow along, try checking out this resource from the Shopify support center for more guidance!
Related Articles
Keywords: shopify, shopify storefront, themes, theme extension, custom liquid, embed, embed onsite