Table of Contents
- Copy embed code
- Custom HTML Section
- Create Section
- Embed on a Product or Collection Page
- Embed on a Single Page or Post
Copy embed code
After you create manual widget in the app settings, you can add it to your Shopify store. To do this you need to copy widget code.
Custom HTML Section
To add an app as an individual HTML section, copy the embed code and follow these steps.
Step 1
In your Shopify Dashboard select Themes, then click on Customize.
Step 2
Select the Add section option.
Step 3
Select the last item called Custom content.
Step 4
Select Add content -> Add block -> Custom HTML
Step 5
Paste the embed code in the box that just appeared. You can set the container width to 100% if you need. You can also remove the previous sections by clicking on them and selecting Remove Section. Save the changes and view the updated page.
Create section
Add widget via Create section
Step 1.
In-App dashboard, select "Create section" and choose the preferred layout.
Step 2.
In Theme editor, click on "Add Section"
Step 3.
Search for a section with the same name as layout you've chosen in Step 1.
Step 4.
Select the section and place in the preferred area of the page. Click "Save"
Embed on a Product or Collection Page
To add the widget code to your collection page or product page, copy the embed code and follow these steps.
Step 1
In your Shopify Dashboard select Products or Collections.
Step 2
Select the product or collection you want to edit and click on the <> icon to switch to HTML view.
Step 3
Paste the embed code where you want the app to load. Save the changes and click on View below the title to see the updated page.
Embed on a Single Page or Post
To add an app to a page or on your blog, copy the embed code.
Step 1
In your Shopify Dashboard select Online Store, then Pages or Blog posts.
Step 2
Select the page or post you want to edit and click on the <> icon to switch to HTML view.
Step 3
Paste the embed code anywhere on the page or post, where you want the app to load. Save the changes and click on View Page below the title to see the updated page.