How to get the template ID from a Shopify webpage for programatic use of the Section Rendering API

Shopify has a handy Section Rendering API where you can pass the following parameters on a live page URL to grab the HTML for certain sections. This can be helpful for rendering the same section in another app or custom webpage elsewhere.

?sections=main-password-header,sections--1234__header
?sections[]=main-password-header&sections[]=sections--1234__header

An example of an absolute URL is:

https://www.mystore.com/products/product-example/?sections=main-password-header`.

The output from that endpoint will be a json object like this:

{
  "main-password-header": "SECTION HTML (ESCAPED) RETURNED HERE"
}

For custom sections however, you have a URL that looks something like this.

https://www.mystore.com/products/product-example/?sections=template--12345678912345__391178d3-08f5-48cb-865d-c407f193babe

In the above URL the ID 12345678912345 is the template ID and 391178d3-08f5-48cb-865d-c407f193babe is the section ID. The format of the rest of the parameter value is always the same.

This means in order to programatically request that section via the Section Rendering API, you need to know the template ID and the section ID. The problem is that there is no public endpoint that gives you the ID of the template ID, whereas the section ID's are all contained in the section .json file such as product.product-example.json at the bottom of the file in the order array. Example below.

"order": [
  "main",
  "391178d3-08f5-48cb-865d-c407f193babe",
  "8d85d3cc-b9ff-4341-be56-2122abc53ddb",
  "7419dc99-9ec8-4010-8a81-d582506cc733",
  "83547083-3690-41fc-8058-4cfe2d74e2a9",
  "3914ae2c-4ce0-4926-9511-6491f2d9e5d4",
  "f7b27d6e-3e10-4d48-b523-e2fa958ee6b1",
  "197d4fc7-03ab-4150-b792-8612b3e3805b",
  "2a632669-d028-4b6a-b261-0924191ef3a4",
  "b02c4edf-751e-44ec-bd0e-776da702603c",
  "d3acc40e-4c6d-47f5-afe9-2d1661380f9f",
  "a4e4ce51-490f-45c9-bb40-0d3aecaba76c",
  "86c2db3d-e9fd-4a43-b4d0-83f8f09b8ac3",
  "d3a5d29b-a1af-4fcf-8221-2545d2930f9d",
  "e7ca7e37-b418-47a6-8bc0-62d9cd68a4e1",
  "766ae22c-cac2-477d-a900-cbf424b6bca5",
  "e3dc966d-fff0-446f-a36d-9d2e79c8b769",
  "398c67c9-9a4b-4d8b-bb11-f6dd8f5b83df",
  "related-products"
]

Solution 1

You can run this javascript that will extract the template ID from a page by looking at the first <section> tag and parsing out the template ID integer from the 'id' for that section.

function extractTemplateId(id) {
    const prefix = 'shopify-section-template--';
    const startIndex = id.indexOf(prefix) + prefix.length;
    const endIndex = id.indexOf('__', startIndex);
    const numberPart = id.substring(startIndex, endIndex);
    return parseInt(numberPart, 10);
}

// get the first shopify section ID for extraction
const first_section_id = document.querySelector('main section.shopify-section')
const fullId = first_section_id.id

// Run the extractTemplateId function
const shopifyTemplateId = extractTemplateId(fullId);
console.log(shopifyTemplateId); // Output example: 12345678912345

Solution 2 (recommended)

If you have control of the Shopify theme, you can add the following code to main-product.liquid.

{% liquid 
  assign section_id = 'template--12345678912345__391178d3-08f5-48cb-865d-c407f193babe'
  assign section_id_parts = section_id | split: 'template--'
  assign section_with_id = section_id_parts[1]
  assign section_id_parts = section_with_id | split: '__'
  assign template_id = section_id_parts[0]
%}

And then add the data-template_id attribute to the <section> block seen here on line 5:

<section
  id="MainProduct-{{ section.id }}"
  class="page-width section-{{ section.id }}-padding"
  data-section="{{ section.id }}"
  data-template_id="{{ template_id }}"
>

This will then allow you to grab the template_id for each page with the following simple JS code:

document.querySelector('section[data-section]').dataset.template_id
// output example: 12345678912345

Warning

Both solution 1 and 2 depend on the default string that Shopify generate for a section ID. This could change at any given time although not likely. If you're wanting to do something programmatic, make sure to add a fallback or log/alert if this ever fails.