I recently gave a talk at VaanTalk, where I spoke about something that keeps coming back in my daily work: prototyping and communication.

The talk was intentionally not about new frameworks, AI tools, or developer trends. Instead, it focused on a more fundamental part of our job that often gets overlooked.

Developers as a bridge​

I strongly believe that a developer's role goes beyond writing code. In practice, we often act as a bridge between different worlds:

• business and implementation
• ideas and constraints
• expectations and reality

Code is usually the last step in that process.

Why prototyping matters​

Prototyping — especially visual prototyping — helps reduce misunderstandings early. It creates a shared reference point that allows everyone involved to talk about the same thing, even if they don't share the same technical language.

In the talk, I explored:

• why prototyping is not just a "design thing"
• different levels of prototyping (from rough sketches to interactive demos)
• real examples where prototyping prevented costly mistakes

Most of these examples came directly from real project experience, not theory.

A recurring lesson​

Preparing this talk reminded me of something simple but important:

The better we explain, visualize, and validate ideas early, the smoother the implementation phase becomes.

Presentation slides​

Download PDF

I hope it helps others refine how they communicate ideas and approach daily development work.

🔗 Getting Metaobjects from a Metafield​

If you've got a metafield on a product (or any resource) that stores Metaobject references, you can loop through it like this:

{% for metaobject in product.metafields.custom.pdp_faq_items.value %}
  {% if metaobject.question_single and metaobject.answer_single %}
    <ul>
      <li>
        <strong>Q:</strong> {{ metaobject.question_single }}<br>
        <strong>A:</strong> {{ metaobject.answer_single }}
      </li>
    </ul>
  {% endif %}
{% endfor %}

• .value gives you the array of metaobjects.
• The field names like question_single and answer_single should match what's defined in your metaobject template.

📦 Accessing Metaobjects Directly via shop.metaobjects​

If you're working with site-wide or shared content (e.g. modals, banners, color patterns, size charts), Shopify gives you direct access through the shop.metaobjects object.

Here's an example of grabbing a specific metaobject by handle:

{% liquid
  assign upsell_popup = shop.metaobjects.pdp_upsell_pop_up_modal['handle-of-the-metaobject']

  assign modal_background_color = upsell_popup.modal_background_color
  assign modal_title = upsell_popup.modal_title
  assign modal_description = upsell_popup.modal_description | metafield_tag
  assign modal_product_image = upsell_popup.modal_product_image
  assign modal_product_title = upsell_popup.modal_product_title
  assign modal_product_cta_text = upsell_popup.modal_product_cta_text
  assign modal_upsell_product = upsell_popup.modal_upsell_product.value
%}

You can also loop through all metaobjects of a given type if needed:

<ul>
  {% for item in shop.metaobjects['shopify--color-pattern'].values %}
    <li>{{ item.label }}</li>
  {% endfor %}
</ul>

• shopify--color-pattern is the metaobject type (replace with yours).
• You access fields like label, title, or whatever's defined in the object.

🧠 Final Tip​

Use Metafield references when content is tied to specific resources (like FAQs per product), and reach for shop.metaobjects for reusable, global content (like modals or site-wide promotions).

✅ Always check if fields exist before rendering, especially if you're working with optional content, to prevent errors in production.

Hope this helped you on your search! 😊

Shopify's official headless development stack consists of Hydrogen and Oxygen — a set of tools designed to provide a clear path for building fast, scalable, and dynamic headless commerce storefronts.

Hydrogen is a React-based framework that combines modern development principles such as Optimistic UI, Nested Routes, and Progressive Enhancement. It comes with pre-configured commerce-specific components, hooks, and utilities tailored to work seamlessly with the Shopify API. The stack is modular and performance-optimized, giving developers a strong foundation without limiting flexibility. It also allows easy integration with any third-party tools or services already used in your tech ecosystem.

While Hydrogen storefronts can be hosted on any cloud provider, the simplest and most optimized way to deploy is via Oxygen — Shopify's global edge-hosting solution. Oxygen offers rendering at the edge with 285+ points of presence worldwide. It gives developers full control over deployment and is included in all Shopify plans at no additional cost. This ensures maximum performance and uptime across the globe while reducing infrastructure costs.

📘 Learn more about Hydrogen here

2. Custom Tech Stack​

Shopify also supports full tech stack flexibility. Developers can use any frontend framework, infrastructure, or hosting provider to create a custom storefront experience. Through the Headless sales channel, Shopify APIs can be integrated directly into existing systems and workflows.

This approach is ideal for teams that already work with technologies like Vue.js, Svelte, Angular, or prefer building with their own internal architecture. API-based access enables complete freedom to design and develop without being limited to Shopify's theme structure.

📘 Learn more about custom headless builds here

3. Mobile App Integration​

If you're building a native mobile app, Shopify provides dedicated SDKs to bring ecommerce functionality directly into your mobile experience.

Supported platforms include:

• iOS (Swift)
• Android
• React Native

These SDKs allow developers to connect to the Shopify backend for product data, checkout, and customer sessions — all with secure and high-performing native integrations.

📘 Learn more about mobile integrations here

💡 Key Considerations​

While headless Shopify development — particularly with Hydrogen and Oxygen — offers powerful flexibility, scalability, and performance, it introduces certain trade-offs and challenges compared to traditional theme-based setups.

Here are the key points to keep in mind:

• Higher development costs
  Building and maintaining a custom storefront requires more time, technical expertise, and ongoing support compared to using standard Shopify themes.

• No visual builder
  With headless setups, you lose access to Shopify's built-in Theme Customizer. Any visual editing or layout adjustments must be implemented directly in code or recreated through a custom admin interface — significantly increasing project complexity.

• App Store limitations
  Most apps in the Shopify App Store are built to automatically integrate with Shopify themes using embedded scripts, theme blocks, or native UI extensions.

  In headless environments:

  • These automatic integrations don't work out of the box
  • Developers must implement all app functionality manually using APIs
  • Some app features may be partially or entirely incompatible, or require workarounds

• Developer-focused tooling
  Hydrogen and other headless solutions are built specifically for developers. They provide complete control and power — but require a team comfortable with code-driven development and ongoing technical maintenance.

Summary

Headless architecture offers unmatched customization and performance — but it also demands deeper technical resources and a higher level of planning. There's no "one-size-fits-all" approach. The best choice depends on your business goals, technical capabilities, and budget.

However, there's one major downside to this approach: preview links expire after 48 hours. This can easily lead to confusion or unnecessary concern if a client or teammate tries to access an outdated link. If the link no longer works, they might assume something is broken or missing.

Fortunately, there's a more reliable solution.

Every theme in Shopify has a unique ID, and you can use this ID to create a permanent preview link that doesn't expire. Instead of generating a temporary preview link, simply include the preview_theme_id parameter in the URL — Shopify will automatically load the correct version of the theme.

You can find the theme ID in the URL when the theme is open in the Theme Customizer.

Here's an example of a permanent preview link using a theme ID:

🔗 https://test-store.com?preview_theme_id=155153826068

Alternatively, you can simply copy the preview link this way:

This method might seem obvious once you know it — but many people are unaware, which often leads to confusion and unnecessary back-and-forth. Using permanent theme preview links makes the review process smoother and ensures everyone stays aligned during development.

Thankfully, you can toggle the preview bar with a simple query parameter:

✅ Hide the Preview Bar:

Add ?pb=0 to your preview URL. Example: https://yourstore.myshopify.com/?preview_theme_id=123456789&pb=0

🔄 Show the Preview Bar Again:

Use ?pb=1 to restore it. Example: https://yourstore.myshopify.com/?preview_theme_id=123456789&pb=1

⚠️ Important Note on Caching

Shopify caches your preview bar preference in your browser session. That means:

• Once you hide or show it with pb=0 or pb=1, that state will persist across previews

• The preference stays until the cache is reset or a new query parameter is added to the URL

So if you're still seeing the bar (or not seeing it), try changing the parameter or clearing the cache to reset the state.

It's a simple tweak — but it helps create a cleaner, more professional experience when sharing your work. 💡

But not all partners serve the same purpose. Some focus on design, others build apps, and many offer end-to-end services that touch every part of a merchant’s business.

In this article, we’ll break down the different types of Shopify Partners, what they do, and how they contribute to the success of merchants around the world.

🧩 Types of Shopify Partners​

Shopify's partner ecosystem includes a diverse mix of roles — each bringing unique value to both merchants and the platform.

🎨 Theme Developers​

Front-end developers — often called Shopify Theme Developers — are responsible for building or customizing the storefront, which is the customer-facing part of a Shopify store.

Traditionally, they work with:

• Liquid — Shopify’s templating language

• HTML, CSS, and JavaScript — for structure, styling, and interactivity

• Theme tools — such as Shopify CLI, the Dawn theme, and the visual Theme Editor

Their goal is to deliver fast, responsive, and branded shopping experiences using Shopify’s out-of-the-box capabilities.

🧠 What About Headless?​

In more advanced use cases, some developers take a headless approach — separating the frontend from Shopify’s backend. This allows for full design control and performance optimization using modern frameworks like:

• Next.js

• Remix

• others

In a headless architecture, the storefront becomes a standalone application that communicates with Shopify via the Storefront API or GraphQL Admin API. This approach enables:

• Blazing-fast page speeds through static generation or server-side rendering

• Full control over user experience and interface

• Easier integration with third-party systems

While more complex, headless architecture is growing in popularity among larger merchants who demand flexibility, speed, and custom UI/UX.

💡 Both approaches — traditional themes and headless — have their strengths and trade-offs. There’s no “best” solution, only the one that fits your business goals and technical capacity.

⚙️ App Developers​

Back-end developers play a crucial role in Shopify’s ecosystem by building Shopify Apps — tools that extend the platform’s built-in functionality. Shopify provides a strong ecommerce core, but apps are how merchants unlock truly custom experiences.

Apps can be:

• Custom apps — tailored for one merchant’s specific needs

• Public apps — published to the Shopify App Store and used by thousands

These apps typically run as external web applications and connect to Shopify using REST or GraphQL APIs. Popular stacks include Node.js, React, and PostgreSQL.

📦 What Do Shopify Apps Do?​

Apps add features, automate workflows, and integrate Shopify with other platforms. They’re essential for adapting Shopify to fit any business model.

Examples include:

• Inventory and fulfillment automation
  Sync stock across locations, trigger fulfillment events, or manage dropshipping.

• Custom product logic
  Add subscription options, tiered pricing, product bundles, or dynamic checkout flows.

• Sales and marketing tools
  Build loyalty programs, upsell systems, and referral tracking.

• Third-party integrations
  Connect Shopify with CRMs (e.g., Salesforce), ERPs (e.g., NetSuite), and accounting or shipping platforms.

• Admin tools and dashboards
  Create custom merchant-facing dashboards and Shopify Admin UI enhancements using App Bridge.

🧠 Why Apps Matter​

Apps allow developers to tailor Shopify for businesses with complex, industry-specific, or rapidly evolving needs. They’re where technical creativity meets real-world challenges, and they power much of the innovation within the ecosystem.

🏗️ Agencies & Full-Service Partners​

Agencies provide end-to-end services — offering strategy, design, development, and marketing under one roof. They often work with cross-functional teams that include:

• Designers and front-end developers

• Back-end and app developers

• Marketers and strategists

They typically support merchants with:

• Full custom store builds

• Platform migrations

• Ongoing technical and UX optimization

• Conversion rate optimization (CRO) and growth marketing

Agencies are ideal for merchants seeking a long-term partner or launching complex, high-volume stores.

🔌 Integration Partners & Tech Providers​

These partners specialize in connecting Shopify to external systems, enabling operational efficiency and scaling behind the scenes.

They help merchants:

• Integrate with ERPs, POS systems, fulfillment networks, or PIMs

• Build custom APIs and data pipelines

• Automate cross-platform workflows using tools like Zapier or custom scripts

These partners are essential for mid-size to enterprise merchants managing complex operations and multiple business systems.

📣 Marketing Partners​

Marketing-focused partners drive customer acquisition and retention. They specialize in:

• Paid media and performance marketing (e.g., Meta Ads, Google Ads, TikTok)

• SEO and content strategy

• Email and SMS marketing automation

• Loyalty, affiliate, and referral program setup

They often work with platforms like Klaviyo, Yotpo, Postscript, or ReConvert, ensuring that campaigns are integrated, data-driven, and optimized for performance.

💡 Final Thoughts​

Understanding the different types of Shopify Partners helps merchants, managers, and developers make smarter decisions — whether you're building a store, scaling an existing one, or launching your own service in the ecosystem.

Each partner brings something unique to the table — and when they collaborate effectively, the Shopify ecosystem becomes more powerful than the sum of its parts.

🔄 The best results happen when the right partners work together to create something tailored, scalable, and impactful.