Shopify Theme Lab 🧪

Customizable modular development environment for blazing-fast Shopify theme creation.

Vue component with slots and props

Global Vue mixin

NODE_ENV: {% raw %}{{ env }}{% endraw %}

Global Vue directive

this text

Renderless Vue component + Vuex

Vuex “my-module” state “visible” is set to {% raw %}{{ visible }}{% endraw %}

Vuex anywhere!

Vuex “my-module” state “visible” is set to {% raw %}{{ $store.state['my-module'].visible }}{% endraw %}

.shopify-theme-lab { background: rgb(240,240,240); border-radius: 10px; padding: 30px; margin: 20px 0; } .shopify-theme-lab__headline { font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 10px; } .shopify-theme-lab__subline { font-size: 16px; font-weight: 700; } .shopify-theme-lab__text { font-size: 18px; text-align: center; margin-bottom: 40px; } .shopify-theme-lab__examples { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; } .shopify-theme-lab__example { display: flex; flex-direction: column; gap: 20px; } .shopify-theme-lab__button { color: rgb(255,255,255); background: rgb(0,0,0); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; border-radius: 4px; padding: 5px 15px; margin-top: 5px; } .shopify-theme-lab__button:hover { background: rgb(70,70,70); } {% schema %} { "name": "Vue examples", "class": "vue-section", "presets": [ { "name": "Vue examples" } ] } {% endschema %}