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!

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 Online Store > Pages. Open the page named “Tapita Preview“.

Click “Show HTML” button to reveal the page code.

Copy the whole code in this page and paste it into your tapita-section.liquid file, replacing the existing code.

Inside this code, we need to do some edit.

First, create an empty div with a unique id. This will be the div where content will be loaded into.

<div id="tapita-section">
  
</div>

Find this code at line 30-31 and replace “MainContent” with your div id above.

if (document.getElementById("MainContent"))
   idToRender = "MainContent";

Find this code at line 40-44:

PageBuilderComponent.renderForIdWithProps(idToRender, {
    endPoint: "https://tapita.io/pb/graphql/",
    maskedId: params.maskedId,
    toPreview: true,
});
  • maskedId: Replace params.maskedId with your Tapita page’s maskedId (see next step)
  • toPreview:
    • true: Your block will show even when it is in Draft
    • false: Your block will only show when it is Published

To get your page’s maskedId, in your Tapita dashboard go to Page Settings. You will see its Masked Id at the bottom.

When you’re done, click Save.

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

{
  "sections": {
    "banner": {
      "type": "main-collection-banner",
      "settings": {
      }
    },
    "product-grid": {
      "type": "main-collection-product-grid",
      "settings": {
      }
    },
    "tapita-block": {
      "type": "tapita-section",
      "settings": {
      }
    }
  },
  "order": [
    "banner",
    "product-grid",
    "tapita-block"
  ]
}

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.

Now let’s check our Collections page on frontend:

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

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, {
    endPoint: "https://tapita.io/pb/graphql/",
    maskedId: maskedId,
    toPreview: true,
});
Was this page helpful?