Build Shopify Theme App Extension with Custom Widget

Launch a Shopify Theme App Extension in minutes, build, preview, and deploy a custom product widget that enhances engagement, increases conversions, and offers greater merchant flexibility.

Key Points

100% code-free theme integration with Shopify CLI and Online Store 2.0 framework.
Add-to-cart widget boosts user engagement and increases conversions by as much as 25%.
Deploy extensions quickly using Shopify CLI for faster merchant onboarding and updates.

In today’s rapidly changing ecommerce landscape, Shopify app development allows businesses to customize online stores without modifying core code. Shopify Theme App Extensions offer a modern way to add dynamic and interactive features directly into Online Store 2.0 themes—no manual Liquid edits needed.

In this tutorial, you’ll learn how to create a custom Shopify app development project using Theme App Extensions, build a “Custom Product Widget,” and deploy it for real-time use on any Shopify store.

What You’ll Learn

By the end of this guide, you’ll be able to:

Create a Theme App Extension
Preview and test your extension locally
Add a custom product widget using Liquid + JavaScript
Write onboarding instructions for merchants
Deploy and release your extension publicly

Whether you’re an experienced developer or just beginning with Shopify app development services, this tutorial guides you through each step with clarity and real examples.

Requirements

Before we start, ensure you have everything necessary for smooth development.

App Development Permissions: Make sure your account has the necessary permissions to create and manage apps.
Shopify Dev Store: You will need a Shopify development store with some sample products to test your extension.
Shopify CLI (3.0+): Ensure you have the latest version of the Shopify CLI installed to create, preview, and deploy extensions.
Online Store 2.0 Theme: Your store should use an Online Store 2.0 compatible theme, like Dawn or Horizon, to support Theme App Extensions.
Ruby and Bundler: Make sure Ruby and Bundler are installed on your system, as they are necessary for some Shopify development commands.
Basic Knowledge of Theme App Extensions: Familiarity with Shopify Theme App Extensions, Liquid, and JavaScript helps you understand and implement your custom widget effectively.

Step 1: Create a New Theme App Extension

Open your terminal, go to your app folder, and run:

                                        shopify app generate extension

When prompted:

Select Theme app extension
Enter a name (e.g., product-widget)

The Shopify CLI creates a structured extension folder with a sample block. This serves as the foundation for developing your custom Shopify app.

Optional: Create a Product Metafield

If your widget will use product-specific data, such as ratings, define a metafield in your Shopify Admin.

Area: Products
Namespace: demo
Key: avg_rating
Type: Integer

This step enhances your widget functionality when developing on-demand apps that depend on product data.

Step 2: Preview Your Extension

Run the development server to preview your extension live:

                                        shopify app dev

To preview a specific theme:

                                        shopify app dev --theme <theme-name-or-id>

If not specified, Shopify will automatically upload and preview your extension on the Dawn theme.

Preview Steps

Open the Theme Editor from the dev URL printed in your terminal.
Add your App Block under the “Product information” section.
Click Save and test the widget in real-time.

This preview step guarantees your Shopify app development services provide a smooth integration for merchants.

Step 3: Test Your Extension

Now check the widget functionality in the theme editor.

Confirm that:

App embed blocks appear correctly.
Settings update live.
Merchants can easily add or remove app blocks.
Onboarding help text is clear.

Tip: Refer to Shopify Polaris Docs for merchant-friendly help guides, essential for polished custom Shopify app development projects.

Step 4: Add a Custom Product Widget

Let’s now create your custom product widget with Liquid, JavaScript, and CSS.

File Structure

                                         /extensions
  /product-widget
  /blocks 
  Product-widget.liquid : This is a liquid file where work is liquid code.
  /assets  / assets file working for call js file and cs.
  product-widget.js
  product-widget.css

product-widget.liquid

                                        <div class="custom-product-widget">
  {% if settings.enable_widget %} : They call schema setting id.
    <h3 class="widget-title">{{ settings.widget_title }}</h3>
    <p class="widget-text">{{ settings.widget_text }}</p>

    <button 
      class="widget-button" 
      data-product-id="{{ product.id }}"
    >
      Add to Cart
    </button>
  {% endif %}
</div>

{% schema %}
{
  "name": "Custom Product Widget",
  "target": "section",
  "templates": ["product"],
  "javascript": "product-widget.js",
  "stylesheet": "product-widget.css",
  "settings": [
    {
      "type": "checkbox",
      "id": "enable_widget",
      "label": "Enable Widget"
    },
    {
      "type": "text",
      "id": "widget_title",
      "label": "Widget Title",
      "default": "Buy This Product"
    },
    {
      "type": "text",
      "id": "widget_text",
      "label": "Widget Text",
      "default": "Get your product today!"
    }
  ]
}
{% endschema %}

This code allows merchants to turn the widget on or off and modify text directly in the Theme Editor.

product-widget.js

                                        document.addEventListener("DOMContentLoaded", () => {
  const buttons = document.querySelectorAll(".widget-button");

  buttons.forEach((btn) => {
    btn.addEventListener("click", async () => {
      const productId = btn.getAttribute("data-product-id");

      try {
        const res = await fetch("/cart/add.js", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ id: productId, quantity: 1 }),
        });

        if (res.ok) {
          alert("Product added to cart!");
        } else {
          alert("Error adding product to cart.");
        }
      } catch (err) {
        console.error(err);
      }
    });
  });
});

This JavaScript enhances your custom Shopify app development project by enabling quick “Add to Cart” actions from the widget.

product-widget.css

                                        .custom-product-widget {
  padding: 16px;
  border-radius: 12px;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  text-align: center;
  transition: all 0.3s ease;
}

.custom-product-widget:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.widget-button {
  margin-top: 12px;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: #008060;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
}

.widget-button:hover {
  background: #00684a;
}

The CSS ensures your widget maintains a clean, Shopify-aligned design—important for ensuring consistency across all Shopify app development services.

Result

Your merchants can now:

Add the “Custom Product Widget” to any product page.
Edit the widget title and text within the Theme Editor.
Interact with the widget to add products to the cart instantly.

This feature shows how on-demand app development can bring real value to Shopify merchants by enhancing usability and customer engagement.

Step 5: Add Onboarding Instructions

Add onboarding instructions directly in your app under a “Getting Started” or “Help” tab.

Example:

Go to your Theme Editor
Add “Custom Product Widget” block to the Product Information section
Customize the title and text, then click Save

Clear instructions help merchants use your app easily—crucial for any successful Shopify app development project.

Step 6: Deploy and Release Your Extension

When you’re prepared to publish your extension, deploy it using:

                                        shopify app deploy

Optional Flags

--version <name> – Use this flag to assign a specific version name to your deployment. It helps you track changes and keep clear versioning for future updates.

--message <text> – Add a release note or message describing the updates or improvements you’ve made in this deployment. This note appears in your release history.

--no-release – Use this flag if you want to build your extension version without publishing it right away. This is helpful for internal testing or staging before the public launch.

Before deployment, verify your build with:

                                        shopify app build

This guarantees your custom Shopify app development is clean and ready for production.

Summary

Create the Extension – Start by generating a new theme app extension using the command:

                                        shopify app generate extension

Preview the Extension – Run your app locally and preview it in a theme with:

                                        shopify app dev

Test in Theme Editor – Open the theme editor to verify that your app embed blocks function correctly and that settings update in real time.

Add the Custom Product Widget – Build your product widget with Liquid, JavaScript, and CSS files. This widget allows merchants to add interactive product elements, such as “Add to Cart” buttons or custom messages.

Add Onboarding Guide – Include straightforward onboarding instructions for merchants to help them add and customize the widget within their store’s theme editor.

Deploy and Release – Once everything appears ready, deploy your theme app extension using:

                                        shopify app deploy

By following these steps, you have successfully built and deployed a custom Shopify theme app extension. This process not only improves your skills in Shopify app development services but also assists in creating unique, dynamic features that merchants can easily add to their stores.

Final Words

By following this step-by-step process, you’ve created a Shopify Theme App Extension with a custom product widget that enhances interactivity and personalization on product pages, without the need for code editing.

For businesses offering Shopify app development services or agencies providing on-demand app development, Theme App Extensions offer a scalable and merchant-friendly way to enhance store functionality.

You can further extend this app by:

Integrating product ratings or dynamic recommendations
Adding custom analytics tracking
Enhancing UI with real-time updates

The possibilities are unlimited with custom Shopify app development, allowing merchants to offer more personalized and efficient shopping experiences.

1.1K

441

Build a Shopify Theme App Extension and Add a Custom Product Widget

What You’ll Learn

Requirements

Step 1: Create a New Theme App Extension

Optional: Create a Product Metafield

Step 2: Preview Your Extension

Preview Steps

Step 3: Test Your Extension

Step 4: Add a Custom Product Widget

File Structure

product-widget.js

product-widget.css

Result

Step 5: Add Onboarding Instructions

Example:

Step 6: Deploy and Release Your Extension

Optional Flags

Summary

Final Words

Follow Us

Recent Scripts

How to Connect Google Analytics with Google Search Console

How to Analyze Audience Insights Using Google Analytics

Technical SEO Tutorial: Site Speed, Crawling & Indexing Explained

Reach Us At

About Digittrix

Industries

Our Services

Case Studies

Hire Developers

Subscribe Us