Aurora Tee
$39
Add to cart{% props %} title: "{{ title | default: 'Aurora Tee' | escape }}" price: {{ price | default: 39 }}{% endprops %} <article class="product-card"> <h3>{{ title }}</h3> <p class="price">${{ price }}</p> <add-to-cart>Add to cart</add-to-cart></article>
Write a Liquid component.
21:50:28 VITE http://localhost:517721:50:28 VITE integration: Loaded integration "preact"21:50:28 VITE integration: Loaded integration "solid"21:50:28 BACKEND theme sync backend: graphql21:50:29 UPLOADED layout/theme.liquid21:50:30 COMPILED sections/product-card.liquid21:50:33 COMPILED sections/home.liquid21:50:34 INFO Dev server started — WS:35079 Vite:localhost:5177
assets├─ ✓ product-card.js├─ ✓ add-to-cart.js╰─ ✓ reel.csssections├─ ✓ home.liquid╰─ ✓ product-card.liquidtemplates╰─ ✓ index.json
✓ Built 47 production files in 0.91s✓ Pushed 47 files in 1.74s✓ Theme updated @ i5kn71-aw.myshopify.com
config╰─ ✓ settings_data.jsontemplates├─ ✓ index.json╰─ ✓ product.jsonlocales├─ ✓ en.default.json╰─ ✓ fr.json
✓ Downloaded 38 files in 1.20s✓ Wrote to ./ · in sync with Live
Run osmose dev.
title: "{{ title | default: 'Aurora Tee' | escape }}" price: {{ price | default: 39 }} <h3>{{ title }}</h3><p class="price">${{ price }}</p>
$39
Add to cartSave. The section updates live.
<section class="product-card"> <h3>{{ section.settings.title }}</h3> <p class="price">${{ section.settings.price }}</p></section><island-element load="idle" asset="add-to-cart.js">{% schema %} { "name": "Product card" } {% endschema %}
Compiles to a plain Shopify theme. No runtime lock-in.
The world’s first framework for Shopify Liquid.
$ curl -fsSL https://get.osmose.sh/install.sh | bash
osmose.sh · private beta