App reviews, troubleshooting, and recommendations
I'm researching the theme app extension with app blocks and app embed blocks to update my app to use theme app extension instead of using Assets RESTful API to edit the theme code (based on requirements while app submission).
I have a question about app block and app embed block:
How to get the {{ product.id }} in app-block.liquid (or app-embed.liquid) to use in app-block.js (the js file for app-block)?
For example, I have the app-block.liquid file:
<image-gallery data-id="{{ block.id }}">
{%- if block.settings.heading -%}
<h2>{{ block.settings.heading }}</h2>
{%- endif -%}
{%- if block.settings.description -%}
<p>{{ block.settings.description }}</p>
{%- endif -%}
<p>{{ product.id }}</p>
<p>{{ shop.id }}</p>
</image-gallery>
{% schema %}
{
"name": "Image Gallery",
"target": "section",
"stylesheet": "app-block.css",
"javascript": "app-block.js",
"templates": ["product", "index"],
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Cute Puppy Gallery"
},
{
"type": "text",
"id": "description",
"label": "Description",
"default": "A simple app block that shows a grid of images that can be customized by the merchant. Each image can be selected to show a popup with the full-sized image."
}
]
}
{% endschema %}
The app-block.js:
class ImageGallery extends HTMLElement {
constructor() {
super();
}
// I want to get the product.id or shop.id here
connectedCallback() {
console.log(product.id)
}
}
Hi @test6A ,
Try like this '{{product.id}}' , It has worked for us.
Hi @getInfoSol
I tried with '{{product.id}}' but it doesn't work for me. I using in a JS file. Are you using it in JS file too? Can I see your code for example?
no, we have put it in a script tag which is inside a liquid file.
Discover how to increase customer engagement on your store with articles from Shopify A...
By Jacqui Apr 23, 2025Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025