Use this skill when the user asks about "storefront widget", "scripttag", "customer-facing", "Preact", "bundle size", "lazy loading", "performance optimization", or any storefront frontend work. Provides Preact patterns for lightweight storefront widgets.
| Topic | Reference File |
|---|---|
| Bundle Size, Lazy Loading, Tree Shaking | references/performance.md |
| Preact Hooks, Sharing Components | references/preact-patterns.md |
| Fetch/XHR/Form Interception | references/request-interception.md |
The scripttag package contains customer-facing storefront widgets injected into merchant stores. Performance is CRITICAL - every KB and millisecond impacts merchant store speed and conversion rates.
| Technology | Purpose | Why |
|---|---|---|
| Preact | UI library | 3KB vs React's 40KB+ |
| SCSS | Styling | Scoped styles, minimal footprint |
| Rspack | Bundler | 10x faster than webpack |
| Theme App Extension | Script loading | Shopify-native |
Styling: Always use custom SCSS/CSS. Avoid UI libraries.
packages/scripttag/
├── src/ # Main widget entry
│ ├── index.js # Main entry point
│ ├── loader.js # Minimal loader script
│ ├── components/ # Shared components
│ └── styles/ # Global styles
├── [feature-name]/ # Feature-specific modules
└── rspack.config.js # Build configuration
{% comment %} blocks/app-embed.liquid {% endcomment %}
<script>
window.AVADA_APP_DATA = {
shop: {{ shop | json }},
customer: {{ customer | json }},
settings: {{ block.settings | json }},
config: {{ shop.metafields['$app:feature']['config'].value | json }}
};
</script>
<script src="{{ app_url }}/widget.min.js" defer></script>
.widget {
&__button {
padding: 8px 16px;
border: none;
border-radius: 4px;
background: var(--primary-color);
color: white;
&--secondary {
background: transparent;
border: 1px solid var(--primary-color);
}
}
}
// rspack.config.js loads in order:
// 1. .env.{ENVIRONMENT}
// 2. .env.local
// 3. .env
process.env.API_URL // Backend API URL
process.env.HOST // Current host URL
process.env.PUBLIC_PATH // CDN path for assets
npm run watch # Development with watch
npm run build # Production build
npm run build:analyze # Analyze bundle size
- No barrel imports (use direct paths)
- Heavy components lazy loaded
- No console.log in production
- Custom SCSS with BEM naming
- No UI library dependencies
- Loader < 3KB gzipped
- Main bundle < 50KB gzipped
- No unexpected large chunks