Embed Tapita blocks at custom positions on website

Embed Tapita blocks at custom positions on website

Difficulty: Advanced

By default, Tapita allows you to build home pages and landing pages for your Shopify store. However, there are cases when you need to build not a whole individual page but a block at certain positions on your website, such as inside collections, search, or product pages.

This tutorial will show you exactly how to do that manually.

The idea is to:

  • Create a custom section in Shopify (a liquid file) that will contain the content of the Tapita block
  • Insert this section into a page template (collection, product, etc.) at the position that you want
  • Add some logic in the section code to only show the block for some specific pages, or to show different blocks for different pages (within the same page type) if necessary

Now let’s do this!

Step 1: Create a custom section in Shopify

In your Shopify admin, go to Online Store > Themes > Actions > Edit code.


Under Sections, click Add a new section.


Let’s name it “tapita-section”, for example.

Now go to Tapita Dashboard. Find your page > Settings > Advanced > Generated HTML.



Copy these pieces of code in Generated HTML: all the <script>...</script> parts and the <div id="mydiv"></div> part. Sample code:

  1.     <script src="https://tapita.io/pb/pub/media/Simipbuilder/tapita-pagebuilder-react@1.4.5.umd.js"></script>
  2.     <div id="mydiv"></div>
  3.     <script>
  4.         PageBuilderComponent.renderForIdWithProps('mydiv', {
  5.             endPoint: "https://tapita.io/pb/graphql/",
  6.             maskedId: "4769fGmX5SxypCB5ro7r0eP1646******"
  7.         })
  8.     </script>

and paste it into your tapita-section.liquid file, replacing the existing code.



When you’re done, click Save.

Step 2: Insert the custom section into a template

Now, find the template file of the page type that you want to insert this section into. Note that you can insert Tapita blocks into any page type, including Home page.

For example, the template file for Collections is collection.json, the template file for Products is product.json, etc.

In this tutorial, we will try to insert the custom section into Collections.

Let’s open collection.json under Templates and insert our custom section like so:

  1. {
  2.   "sections": {
  3.     "banner": {
  4.       "type": "main-collection-banner",
  5.       "settings": {
  6.       }
  7.     },
  8.     "product-grid": {
  9.       "type": "main-collection-product-grid",
  10.       "settings": {
  11.       }
  12.     },
  13.     "tapita-block": {
  14.       "type": "tapita-section",
  15.       "settings": {        
  16.       }
  17.     }
  18.   },
  19.   "order": [
  20.     "banner",
  21.     "product-grid",
  22.     "tapita-block"
  23.   ]
  24. }

Note that the order of the values inside “order” property is also the showing order of corresponding sections in Collection pages. In this case we insert “tapita-block” as the last value, so on the frontend it will appear at the bottom of Collections pages. You can change its order inside “order” property to change where it appears on your pages.

Finally, click Save.

Step 3 (optional): Add some display logic for the custom section

What if you only want to include the custom section at one specific page, or insert different sections for different pages?

In that case, you can add some more code in your custom section file (“tapita-section.liquid” in this example) to filter the maskedId by page path, for example:

var urlPath = window.location.pathname;
var maskedId = "";
switch (urlPath) {
case "/collections/nike" {
maskedId = "xxxxxxxxxxxxxxxxxx"
}
case "/collections/adidas" {
maskedId = "yyyyyyyyyyyyyyyyyy"
}
}

And change the maskedId at this line from a fixed value to our maskedId variable:

PageBuilderComponent.renderForIdWithProps(idToRender, {
maskedId: maskedId,
toPreview: true,
});

    • Related Articles

    • Translating your Tapita Page

      In the newest update, we have release a completely new feature call Translation. What it does is that it will help Tapita's user to translate their created pages to the language that they choose. The target languages are pulled from your current ...
    • How Tapita works with your theme

      Tapita works with both Shopify Online Store 1.0 & 2.0 Tapita does not replace your theme. The Header and Footer of your website are still managed by your theme. What Tapita does is help you modify the body section - the content between the Header and ...
    • Completely remove Tapita from your Shopify store

      After you delete Tapita Page Builder app from your Shopify store, all the pages that you built with Tapita will remain in your store and function as normal. However, in case you want to delete the pages that you built as well, along with any Tapita ...
    • How to import/export Tapita pages

      Tapita Page Builder allows you to export your pages into a file and then use that file to import to another page. This is an easy way to copy and paste your pages between different page types (Landing Page, Blog, etc.) and between different Shopify ...
    • How to use Funnels in Tapita

      What are Funnels? Funnels is a brand new feature update in Tapita with the top goal of helping merchants like you to create groups of pages that work perfectly together, therefore increasing conversion rates and boost sales. You can find Funnels ...