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

    • How to add and edit count down element with Tapita

      In this guide, we will show you how to create beautiful count down timer in your landing page using Tapita 1. Create your countdown template Step 1: Go to https://logwork.com/countdown-timer Step 2: Edit the style, start time... and others ...

    • Insert Judge.me review widgets into Tapita pages

      Your store must have Judge.me app already installed. In your Tapita page, add a Custom HTML element. Depending on which widget you want to show, copy and paste the corresponding code below into the Custom HTML content. Preview badge {% render ...

    • How to link Tapita from with additional emails?

      This article explains how to set up email forwarding to have another email to receive your form request from Tapita Set Up a Filter to Auto Forward in Gmail To set up a filter that forwards Gmail email to another email address: Select the Settings ...

    • How to create an Email Subscription form

      This tutorial will guide you to create a Store Email Subscription form similar to Shopify default one. Then you can put this form into any page you like. Shopify’s default subscription form Use the Store Email Subscription block In Tapita page ...

    • How to make overlapping sections or images in Tapita

      Normally, the sections on your page are stacked on top of one another as separate sections. However, sometimes you want some sections/images to overlap for better visual effect, like in our template Contact Us 4, or this blog template SM Global. This ...