Script Tag Not Executing Inside App Embed Block

I’m developing a Shopify App Embed Block to display a list of recommended products. The H1 tag (“Recommended Products”) is successfully displayed on the page, but the product list is not rendered because the JavaScript code inside the <script> tag is not executed. Here’s my code:

<div id="custom-product-list" class="product-list">
  <!-- Products will be injected here by JavaScript -->
  <h1>Recommended Products</h1>
</div>

<script>
  // Mock products array (this can be fetched via AJAX instead)
  export const products = [
    {
      _id: '1',
      title: 'product 1',
      description: 'Lorem ipsum product 1 dummy description.',
      price: 100,
      compare_at_price: 80,
      featured_image: 'https://images.pexels.com/photos/985635/pexels-photo-985635.jpeg',
      url: 'https://images.pexels.com/photos/985635/pexels-photo-985635.jpeg',
    },
    {
      _id: '2',
      title: 'product 2',
      description: 'Lorem ipsum product 2 dummy description.',
      price: 200,
      featured_image: 'https://images.pexels.com/photos/147641/pexels-photo-147641.jpeg',
      url: 'https://images.pexels.com/photos/147641/pexels-photo-147641.jpeg',
    },
  ];

  function renderProducts(productList) {
    const productContainer = document.getElementById('custom-product-list');
    productContainer.innerHTML = '';

    productList.forEach((product) => {
      const productItem = `
        <div class="product-item">
          <a href="${product.url}">
            <img src="${product.featured_image}" alt="${product.title}">
          </a>
          <h3><a href="${product.url}">${product.title}</a></h3>
          <p class="price">
            ${
              product.compare_at_price > product.price
                ? `<span class="sale-price">$${product.price}</span>
                 <span class="original-price">$${product.compare_at_price}</span>`
                : `<span class="regular-price">$${product.price}</span>`
            }
          </p>
        </div>
      `;
      productContainer.insertAdjacentHTML('beforeend', productItem);
    });
  }

  document.addEventListener('DOMContentLoaded', () => {
    renderProducts(products);
  });
</script>

{% schema %}
{
  "name": "Custom Product List",
  "target": "section",
  "settings": [
    {
      "type": "number",
      "id": "product_limit",
      "label": "Number of Products",
      "default": 5
    }
  ]
}
{% endschema %}

The H1 tag appears on the page, but the script responsible for rendering the products does not run. This code is inside a Shopify Liquid template file for an App Embed Block.

Why is the JavaScript not executing in this Shopify App Embed Block, and how can I make sure the script is executed to display the product list?

When you’re adding Javascript to app embed blocks, you’ll need to contain the scripts in a separate .js file, which will be in the assets directory. You can see an example of what the file structure should be here: Theme app extension configuration

and here’s a basic theme app extension example, where there are multiple .js files in the /assets directory theme-extension-getting-started/assets at main · Shopify/theme-extension-getting-started · GitHub

Then you can reference the .js file in the app extensions’ schema:

{% schema %}
  {
    "name": "Image Gallery",
    "target": "section",
    "stylesheet": "image-gallery.css",
    "javascript": "image-gallery.js",
    "templates": ["product", "index"],

Hope this helps!

2 Likes