How to Create a Shopify App Embed for Custom Scripts and Styles

How to Create a Shopify App Embed for Custom Scripts and Styles

When customizing your Shopify theme, one of the biggest challenges is maintaining clean, upgradable code. Traditional approaches require editing layout/theme.liquid, which creates merge conflicts during theme updates and makes your customizations fragile. There's a better way: theme app extensions with app embed blocks.

This comprehensive guide will walk you through creating a custom app embed that loads your scripts and styles globally—without touching a single theme file. The result? Your customizations survive theme updates, theme switches, and can even be toggled on and off by merchants through the theme editor.

What is an App Embed?

An app embed (also called a theme app extension) is a special type of Shopify app block that:

  • Loads globally across all pages of your store
  • Activates through the theme editor without any code changes
  • Can inject scripts, styles, and markup exactly where you need them
  • Updates independently from your theme
  • Survives theme switches and updates completely

Think of it as a clean injection point that lives outside your theme code, managed through Shopify's app infrastructure.

Why Use an App Embed Instead of Editing theme.liquid?

Let's be clear about the advantages:

Zero Theme File Edits

Your customizations live entirely outside the theme. No more merge conflicts, no more "which line did I edit?" during updates. Your theme files remain pristine.

Merchant Control

Store owners can toggle your scripts on and off through the theme editor's app embeds section—no developer intervention required. This is particularly valuable when troubleshooting issues or A/B testing features.

Update-Proof Architecture

Theme updates? Theme switches? No problem. Your app embed continues working regardless of what happens to the theme itself.

Version Control and Deployment

App embeds can be versioned and deployed separately from theme releases. Roll out script updates without touching the theme, roll back if needed, and maintain a clean deployment pipeline.

Multi-Store Reusability

Package your app embed once and deploy it across multiple stores. This is invaluable for agencies managing multiple clients or brands managing multiple storefronts.

Better Performance Options

Because app embeds load through Shopify's app infrastructure, you have more control over loading strategies, can leverage app proxies for complex functionality, and can even fetch remote resources more efficiently.

Real-World Impact

One of our Shopify Plus merchants was spending 8-12 hours per quarter managing custom script updates across their theme. After migrating to an app embed architecture:

  • Theme updates: Reduced from 6-8 hours to 30 minutes
  • Script deployment: From 2 hours (with staging/testing) to 15 minutes
  • Zero merge conflicts over 18 months and 4 major theme updates
  • Merchant empowerment: Marketing team can now toggle features without developer support

The ROI was clear within the first quarter.

Prerequisites

Before you begin, ensure you have:

  • Node.js 18+ and npm installed
  • Shopify CLI installed: npm install -g @shopify/cli@latest
  • A Shopify Partner account (free at partners.shopify.com)
  • Access to a development or test store (or production, if you're careful)
  • Basic familiarity with JavaScript, CSS, and Liquid

Time investment: Initial setup takes 30-45 minutes. Subsequent updates take 5-10 minutes.

Step 1: Create a Custom Shopify App

First, we need to create the app that will house your theme app extension.

  1. Log in to your Shopify Partner dashboard at partners.shopify.com
  2. Navigate to Apps and click Create app
  3. Choose "Custom app" (not public app)
  4. Name it clearly - something like:
    • "Custom UX Scripts"
    • "[Your Store Name] Customizations"
    • "Theme Enhancements"
  5. Select your development or production store where you'll install it
  6. Note the app's client ID and API key - you'll need these in a moment

Pro tip: Use a descriptive name that makes it obvious this app contains custom scripts, not a third-party integration.

Step 2: Set Up the App Locally with Shopify CLI

Now we'll scaffold the app structure using Shopify CLI.

Initialize the Project

Open your terminal and run:

# Create a project directory
mkdir custom-ux-app
cd custom-ux-app

# Initialize the app
npm init @shopify/app@latest

Answer the Setup Prompts

During setup, Shopify CLI will ask several questions:

  • Programming language: Choose Node.js (or any - the extension is separate from the app backend)
  • App template: Select "Start with a minimal template" or "Remix"
  • Connect to Partners app: Select the app you created in Step 1

Verify the Structure

The CLI creates this structure:

custom-ux-app/
├── extensions/          # Where your theme extension will live
├── app/                 # Backend app logic (optional for our use case)
├── shopify.app.toml     # App configuration
└── package.json         # Node dependencies

Step 3: Create the Theme App Extension

Now we'll generate the extension that will hold your app embed block.

Generate the Extension

From your project root, run:

npm run shopify app generate extension

Configure the Extension

When prompted:

  • Extension type: Choose "Theme app extension"
  • Extension name: Enter custom-scripts (or any clear name)

Verify Extension Structure

The CLI creates:

extensions/custom-scripts/
├── blocks/              # Where app blocks live
├── snippets/            # Reusable Liquid snippets
├── assets/              # CSS, JS, and other static files
└── locales/             # Translation files

Step 4: Build the App Embed Block

This is where the magic happens. We'll create a flexible app embed that can load scripts and styles in multiple ways.

Create the App Embed File

Navigate to your extension folder:

cd extensions/custom-scripts
mkdir -p blocks
touch blocks/app-embed.liquid

Write the App Embed Code

Open blocks/app-embed.liquid and add:

{% comment %}
  Custom UX Scripts and Styles
  This app embed loads global customizations without editing theme files
{% endcomment %}

{% if block.settings.enabled %}
  {% comment %} Load custom CSS {% endcomment %}
  {% if block.settings.custom_css != blank %}
    <style>
      {{ block.settings.custom_css }}
    </style>
  {% endif %}

  {% comment %} Load CSS from external file {% endcomment %}
  {% if block.settings.load_css_file %}
    {{ 'custom-styles.css' | asset_url | stylesheet_tag }}
  {% endif %}

  {% comment %} Load custom JavaScript {% endcomment %}
  {% if block.settings.custom_js != blank %}
    <script>
      {{ block.settings.custom_js }}
    </script>
  {% endif %}

  {% comment %} Load JS from external file {% endcomment %}
  {% if block.settings.load_js_file %}
    <script src="{{ 'custom-scripts.js' | asset_url }}" defer></script>
  {% endif %}

  {% comment %} Optional: Add custom HTML {% endcomment %}
  {% if block.settings.custom_html != blank %}
    {{ block.settings.custom_html }}
  {% endif %}
{% endif %}

{% schema %}
{
  "name": "Custom Scripts",
  "target": "head",
  "settings": [
    {
      "type": "checkbox",
      "id": "enabled",
      "label": "Enable custom scripts",
      "default": true
    },
    {
      "type": "header",
      "content": "CSS Options"
    },
    {
      "type": "checkbox",
      "id": "load_css_file",
      "label": "Load custom CSS file",
      "info": "Loads custom-styles.css from app assets",
      "default": false
    },
    {
      "type": "textarea",
      "id": "custom_css",
      "label": "Inline CSS",
      "info": "Add custom CSS that loads inline"
    },
    {
      "type": "header",
      "content": "JavaScript Options"
    },
    {
      "type": "checkbox",
      "id": "load_js_file",
      "label": "Load custom JS file",
      "info": "Loads custom-scripts.js from app assets",
      "default": false
    },
    {
      "type": "textarea",
      "id": "custom_js",
      "label": "Inline JavaScript",
      "info": "Add custom JavaScript that loads inline"
    },
    {
      "type": "header",
      "content": "Advanced"
    },
    {
      "type": "html",
      "id": "custom_html",
      "label": "Custom HTML",
      "info": "Add any custom HTML (meta tags, pixels, etc.)"
    }
  ]
}
{% endschema %}

Understanding the Schema

The schema section creates a user-friendly interface in the theme editor:

  • "target": "head" - Renders in the <head> section (you can also use "body_end")
  • Settings - Create toggles, text areas, and other inputs for merchants
  • Headers - Organize settings into logical sections
  • Info text - Provide helpful guidance for each setting

Step 5: Add Your CSS and JavaScript Files

Now let's create the actual asset files that will hold your custom code.

Create Asset Files

cd extensions/custom-scripts
mkdir -p assets
touch assets/custom-styles.css
touch assets/custom-scripts.js

Add Your Custom CSS

Open assets/custom-styles.css:

/* ==========================================================================
   CUSTOM THEME OVERRIDES
   ========================================================================== */

/* CSS Variables & Theme Overrides
   ========================================================================== */
:root {
  --custom-accent: #FF6B35;
  --custom-spacing: 2rem;
  --custom-border-radius: 8px;
}

/* Product Page Customizations
   ========================================================================== */
.custom-main-product .price {
  font-size: 1.5rem;
  color: var(--custom-accent);
  font-weight: 600;
}

.custom-main-product .product-form__submit {
  background: var(--custom-accent);
  border-radius: var(--custom-border-radius);
  transition: transform 0.2s ease;
}

.custom-main-product .product-form__submit:hover {
  transform: translateY(-2px);
}

/* Collection Page Enhancements
   ========================================================================== */
.collection-grid .product-card {
  border-radius: var(--custom-border-radius);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.collection-grid .product-card:hover {
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* Custom Button Styles
   ========================================================================== */
.btn-custom {
  background: var(--custom-accent);
  padding: 1rem 2rem;
  border-radius: var(--custom-border-radius);
  color: white;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

.btn-custom:hover {
  background: color-mix(in srgb, var(--custom-accent) 85%, black);
  transform: translateY(-2px);
}

/* Responsive Adjustments
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --custom-spacing: 1rem;
  }
  
  .custom-main-product .price {
    font-size: 1.25rem;
  }
}

Add Your Custom JavaScript

Open assets/custom-scripts.js:

/**
 * Custom Theme Scripts
 * Loaded via App Embed - Update-proof and theme-independent
 */

(function() {
  'use strict';

  // Configuration
  const CONFIG = {
    debug: false,
    selectors: {
      gallery: '.custom-gallery',
      cart: '.cart',
      productForm: '.product-form'
    }
  };

  // Utility: Debug logging
  function log(...args) {
    if (CONFIG.debug) {
      console.log('[Custom Scripts]', ...args);
    }
  }

  // Feature: Enhanced Product Gallery
  function initCustomGallery() {
    const galleries = document.querySelectorAll(CONFIG.selectors.gallery);
    
    galleries.forEach(gallery => {
      // Your gallery enhancement code here
      log('Gallery initialized:', gallery);
      
      // Example: Add zoom on hover
      const images = gallery.querySelectorAll('img');
      images.forEach(img => {
        img.addEventListener('mouseenter', function() {
          this.style.transform = 'scale(1.05)';
        });
        img.addEventListener('mouseleave', function() {
          this.style.transform = 'scale(1)';
        });
      });
    });
  }

  // Feature: Cart Enhancements
  function enhanceCart() {
    const cart = document.querySelector(CONFIG.selectors.cart);
    if (!cart) return;
    
    log('Cart enhanced');
    
    // Example: Add free shipping progress bar
    const cartTotal = getCartTotal();
    const freeShippingThreshold = 100;
    const remaining = Math.max(0, freeShippingThreshold - cartTotal);
    
    if (remaining > 0) {
      showFreeShippingMessage(remaining);
    }
  }

  // Utility: Get cart total (example)
  function getCartTotal() {
    // Implementation depends on your theme
    // This is a simplified example
    return 0;
  }

  // Utility: Show free shipping message
  function showFreeShippingMessage(remaining) {
    log(`$${remaining} until free shipping`);
    // Implementation here
  }

  // Feature: Product Form Enhancements
  function enhanceProductForm() {
    const forms = document.querySelectorAll(CONFIG.selectors.productForm);
    
    forms.forEach(form => {
      // Add loading state on submit
      form.addEventListener('submit', function(e) {
        const submitBtn = this.querySelector('[type="submit"]');
        if (submitBtn) {
          submitBtn.classList.add('loading');
          submitBtn.disabled = true;
        }
      });
      
      log('Product form enhanced:', form);
    });
  }

  // Feature: Analytics Tracking
  function initAnalytics() {
    // Example: Track custom events
    document.addEventListener('click', function(e) {
      if (e.target.matches('.btn-custom')) {
        log('Custom button clicked:', e.target.textContent);
        
        // Send to analytics
        if (window.gtag) {
          gtag('event', 'custom_button_click', {
            'button_text': e.target.textContent
          });
        }
      }
    });
  }

  // Initialize all features
  function init() {
    log('Initializing custom scripts...');
    
    initCustomGallery();
    enhanceCart();
    enhanceProductForm();
    initAnalytics();
    
    log('Custom scripts loaded successfully');
  }

  // Run on DOM ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  // Expose utilities to global scope if needed
  window.customThemeUtils = {
    log: log,
    config: CONFIG
  };

})();

Step 6: Configure the Extension

Ensure your extension configuration is correct.

Check shopify.extension.toml

The file should exist at extensions/custom-scripts/shopify.extension.toml:

type = "theme"
name = "custom-scripts"

[[extensions.metafields]]
namespace = "custom"
key = "scripts"

If it doesn't exist, create it with the above content.

Step 7: Deploy the Extension to Your Development Store

Now it's time to test your app embed in action.

Start Development Mode

From your app root directory:

npm run dev

The Shopify CLI will:

  • Build your extension
  • Create a tunnel to your local development environment
  • Provide a URL to install the app
  • Watch for file changes and hot reload

Install the App

  1. Open the URL provided by the CLI in your browser
  2. Click "Install app" on your development store
  3. Grant the necessary permissions (the app needs theme access)

Note: The app installs but doesn't activate automatically - you need to enable it in the theme editor.

Step 8: Enable the App Embed in the Theme Editor

This is where merchants (or you) activate the customizations.

Navigate to Theme Editor

  1. In your Shopify admin, go to Online Store → Themes
  2. Click Customize on your active theme

Find App Embeds

  1. In the theme editor, click the theme settings icon (bottom left, looks like a paintbrush)
  2. Scroll down to the "App embeds" section
  3. Find "Custom Scripts" in the list
  4. Toggle it ON

Configure Settings

  1. Click the settings icon next to "Custom Scripts"
  2. Check "Load custom CSS file" to use custom-styles.css
  3. Check "Load custom JS file" to use custom-scripts.js
  4. Or paste inline CSS/JS in the text areas for quick testing

Save and Preview

Click Save in the top right and preview your storefront.

Step 9: Test and Verify

Thorough testing ensures everything works correctly.

Visual Inspection

  1. Open your storefront in a new tab
  2. Right-click and inspect the page source
  3. Look for your custom-styles.css link in the <head>
  4. Look for your custom-scripts.js script tag

Console Verification

  1. Open browser console (F12 or Cmd+Option+I)
  2. Check for your console.log messages (e.g., "Custom scripts loaded successfully")
  3. Verify no JavaScript errors

Functionality Testing

  1. Test each feature you've implemented
  2. Verify CSS is applying to elements
  3. Check responsive behavior on mobile and tablet
  4. Test across browsers (Chrome, Firefox, Safari, Edge)

Performance Check

Run Lighthouse audit:

  • Ensure custom assets don't significantly impact performance
  • Check that scripts load asynchronously
  • Verify CSS isn't blocking render

Step 10: Deploy to Production

Once testing is complete, deploy your extension to production.

Create a Production Version

From your app root:

npm run deploy

The CLI will:

  • Create a new app version
  • Upload your extension to Shopify
  • Provide a version number

Release the Version

  1. Go to your Shopify Partners dashboard
  2. Navigate to your app
  3. Go to "Versions"
  4. Find the new version and click "Release"

Install on Production Store

If this is a custom app for one store:

  1. Install or update the app on your production store
  2. Enable the app embed in the production theme editor (same as Step 8)
  3. Configure settings as needed
  4. Save and publish

Pro tip: Do this during low-traffic hours and monitor closely for 24-48 hours.

Advanced Patterns and Variations

Once you have the basics working, consider these advanced patterns:

Pattern 1: Multiple App Embeds for Different Purposes

Instead of one monolithic app-embed.liquid, create separate blocks:

blocks/
├── analytics-embed.liquid      # Analytics and tracking
├── performance-embed.liquid    # Critical CSS, preloads
├── custom-scripts-embed.liquid # Your UX enhancements

Each appears as a separate toggle in the theme editor, giving merchants granular control.

Why this matters: Merchants can debug issues by selectively disabling embeds. If there's a conflict with a new app, they can disable just the affected embed without losing all customizations.

Pattern 2: Conditional Loading by Page Type

Add page type detection to your app embed:

{% if template.name == 'product' %}
  <script src="{{ 'product-enhancements.js' | asset_url }}" defer></script>
{% elsif template.name == 'collection' %}
  <script src="{{ 'collection-filters.js' | asset_url }}" defer></script>
{% elsif template.name == 'cart' %}
  <script src="{{ 'cart-enhancements.js' | asset_url }}" defer></script>
{% endif %}

Performance benefit: Only load scripts where they're needed, reducing bundle size on pages that don't use certain features.

Pattern 3: Environment-Specific Settings

Add a setting to toggle between development and production assets:

{% schema %}
{
  "settings": [
    {
      "type": "select",
      "id": "environment",
      "label": "Environment",
      "options": [
        { "value": "dev", "label": "Development" },
        { "value": "prod", "label": "Production" }
      ],
      "default": "prod"
    }
  ]
}
{% endschema %}

Then conditionally load minified or debug versions:

{% if block.settings.environment == 'dev' %}
  <script src="{{ 'custom-scripts.js' | asset_url }}" defer></script>
{% else %}
  <script src="{{ 'custom-scripts.min.js' | asset_url }}" defer></script>
{% endif %}

Pattern 4: Feature Flags

Add toggles for individual features:

{% schema %}
{
  "settings": [
    {
      "type": "checkbox",
      "id": "enable_custom_gallery",
      "label": "Enable custom product gallery",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "enable_cart_enhancements",
      "label": "Enable cart enhancements",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "enable_analytics",
      "label": "Enable custom analytics tracking",
      "default": true
    }
  ]
}
{% endschema %}

Then in your JavaScript:

window.customFeatures = {
  gallery: {{ block.settings.enable_custom_gallery | json }},
  cart: {{ block.settings.enable_cart_enhancements | json }},
  analytics: {{ block.settings.enable_analytics | json }}
};

if (window.customFeatures.gallery) {
  initCustomGallery();
}

if (window.customFeatures.cart) {
  enhanceCart();
}

Merchant benefit: Fine-grained control over which features are active, making A/B testing and gradual rollouts trivial.

Pattern 5: Version Tracking

Add a hidden setting to track which version is deployed:

{% schema %}
{
  "settings": [
    {
      "type": "text",
      "id": "version",
      "label": "Version",
      "default": "1.0.0",
      "info": "Current extension version"
    }
  ]
}
{% endschema %}

Then output it as a meta tag:

<meta name="custom-scripts-version" content="{{ block.settings.version }}">

Debugging benefit: Instantly see which version is running in production when troubleshooting issues.

Maintenance and Updates

Once your app embed is live, here's how to maintain it:

Updating Scripts and Styles

  1. Edit your CSS/JS files in extensions/custom-scripts/assets/
  2. Test locally with npm run dev
  3. Deploy with npm run deploy
  4. Release the new version in Partners dashboard

No theme updates required - the app embed automatically uses the latest version.

Version Control Best Practices

Use Git to track your app embed:

# Initialize git if you haven't
git init
git add .
git commit -m "Initial app embed setup"

# Create version tags
git tag v1.0.0
git push origin v1.0.0

Rollback Strategy

If an update causes issues:

  1. In Partners dashboard, find the previous working version
  2. Re-release that version
  3. The app embed automatically reverts

Alternatively, keep a rollback script in your assets:

// custom-scripts-rollback.js
// This is the last known good version
// Swap filenames in app embed if needed

Documentation

Maintain a CHANGELOG.md in your app directory:

# Changelog

## [1.2.0] - 2025-11-04
### Added
- Free shipping progress bar in cart
- Product gallery zoom on hover

### Fixed
- Issue with mobile navigation toggle

## [1.1.0] - 2025-10-15
### Added
- Custom analytics event tracking
- Product form loading states

## [1.0.0] - 2025-10-01
### Initial Release
- Basic custom styles
- Product page enhancements

Troubleshooting Common Issues

Issue: App Embed Doesn't Appear in Theme Editor

Possible causes:

  • App not installed on the store
  • Extension not deployed
  • Theme not compatible with app blocks

Solutions:

  1. Verify app is installed: Go to Apps in admin
  2. Check extension deployed: Run npm run deploy
  3. Ensure theme supports app blocks (Online Store 2.0 themes)

Issue: Scripts Not Loading

Possible causes:

  • File paths incorrect
  • Settings not enabled in theme editor
  • JavaScript errors blocking execution

Solutions:

  1. Check console for 404 errors
  2. Verify checkboxes are enabled in theme editor
  3. Check console for JavaScript errors
  4. Ensure files are in assets/ directory

Issue: CSS Not Applying

Possible causes:

  • Specificity issues with theme CSS
  • File not loaded
  • Syntax errors in CSS

Solutions:

  1. Increase specificity: .custom-main-product .price instead of .price
  2. Use !important sparingly for overrides
  3. Validate CSS syntax
  4. Check if stylesheet link appears in page source

Issue: Performance Impact

Possible causes:

  • Large file sizes
  • Synchronous loading
  • Excessive DOM manipulation

Solutions:

  1. Minify CSS and JavaScript
  2. Use defer or async on script tags
  3. Optimize selectors and reduce queries
  4. Use requestAnimationFrame for animations
  5. Lazy load features that aren't critical

Security Considerations

When building app embeds, keep security in mind:

Input Sanitization

If your app embed accepts merchant input (through settings):

{% comment %} BAD: Directly outputting user input {% endcomment %}
<script>
  {{ block.settings.custom_js }}
</script>

{% comment %} BETTER: Use json filter {% endcomment %}
<script>
  const userConfig = {{ block.settings.user_config | json }};
</script>

Content Security Policy

Be aware of CSP restrictions:

  • Inline scripts may be blocked
  • External resources may need allowlisting
  • Use nonce or hash for inline scripts when possible

Third-Party Scripts

If loading external libraries:

{% comment %} Use SRI (Subresource Integrity) {% endcomment %}
<script 
  src="https://cdn.example.com/library.js"
  integrity="sha384-hash"
  crossorigin="anonymous"
  defer>
</script>

API Keys and Secrets

Never hardcode API keys in client-side code:

// BAD
const API_KEY = 'sk_live_abc123...';

// GOOD: Use app proxy or backend
fetch('/apps/custom-proxy/api/data');

The ROI: Why This Approach Wins

Let's talk business impact. Here's what we've observed across dozens of implementations:

Traditional Approach (Editing theme.liquid)

  • First theme update: 4-8 hours resolving merge conflicts
  • Script deployment: 1-2 hours (with staging/testing)
  • Risk level: High (breaking changes possible)
  • Maintenance burden: Grows with each customization
  • Merchant autonomy: Zero (developer required for everything)

App Embed Approach

  • First theme update: 0 hours (no conflicts)
  • Script deployment: 10-15 minutes
  • Risk level: Low (isolated from theme)
  • Maintenance burden: Constant and predictable
  • Merchant autonomy: High (toggle features independently)

Real Numbers from Merchant Implementations

E-commerce brand with 5,000 orders/month:

  • Reduced developer time on theme maintenance by 75%
  • Saved approximately $15,000/year in development costs
  • Deployed 12 feature updates in one quarter (vs. 3 in previous quarter)

Multi-brand retailer with 3 stores:

  • Packaged one app embed, deployed to all stores
  • Eliminated duplicate work across brands
  • Updates now deploy to all stores simultaneously

Conclusion

Creating a Shopify app embed for your custom scripts and styles transforms how you manage theme customizations. While the initial setup requires 30-45 minutes, the long-term benefits are substantial: zero merge conflicts during theme updates, merchant control over features, independent versioning and deployment, and the ability to package and reuse across multiple stores.

By following this guide, you've learned how to set up the app structure, create flexible app embed blocks with merchant-friendly settings, deploy and test your customizations, and implement advanced patterns for production use. This approach not only makes your customizations update-proof, but also empowers merchants to manage features without developer intervention.

For more information on maintaining upgradable theme customizations, check out our companion guides: How to Safely Customize the Horizon Theme to Maintain Upgradability and How to Upgrade a Customized Shopify Theme: A Comprehensive Guide. These resources provide comprehensive strategies for building maintainable, future-proof Shopify themes.

Additionally, you can reach out to our Growth Services team for help implementing app embeds, refactoring existing theme customizations to use this approach, or training your development team on best practices. Contact Bret Williams at bret.williams@shopify.com to discuss your specific needs. Happy building!

Last updated: November 4, 2025

Back to blog