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

    • Can I add an RSS feed to my page using Tapita?

      You can follow the steps in this tutorial to do so: https://tagembed.com/support/embed-rss-feeds-on-html-website/ In Step 3, use Tapita's Custom HTML element.

    • How your website font works on Tapita

      Website font is the font set up in your Shopify theme, the font you apply to your website. To apply a website font, go to General > Typography > Font and select Website Font. Website fonts will be applied based on the font guidelines you set up for ...

    • 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 ...

    • 4. Learn about Tapita page builder Sections and Elements

      z age Sections and Elements are an essential part of a page builder tool like Tapita. Once you've mastered the sections and elements, then you've mastered Tapita! You can learn more about Tapita Sections and Elements relationship and management. Some ...

    • 7. 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 ...