Custom Code / Live Data

Your store. Your Code. Your data.

Stitch is Bareconnect's live template language for the BareX builder. Write any HTML, embed real products and collections, and ship custom sections -- without touching backend code.

Try Stitch free Learn Stitch
custom-section.html Stitch
<div class="product-grid">
{{ for item in collection.sale.products }}
<a href="{{ item.url }}">
<img src="{{ item.image }}" />
<p>{{ item.name }}</p>
<strong>{{ item.price }}</strong>
</a>
{{ end }}
</div>
Live preview updated -- 600ms
What is Stitch

Your store data, one token away.

Stitch is Bareconnect's templating engine built into the BareX website builder. Write plain HTML, drop in a token, and your real store data appears. No API. No backend. No framework.

Pick a template

product-grid.html
What you write
Stitch resolves
Live Store
What your customer sees

Hover over any green token in the code to see what it resolves to in the preview.

For developers

Full creative control. Write any HTML, CSS, or JS. Stitch only touches the tokens -- everything else ships exactly as you wrote it.

For power users

Autocomplete shows your real product slugs as you type. Or just ask Ada to generate the whole template from plain English.

Always fresh

Tokens resolve server-side on every page load. Update a product name or price in your dashboard and it changes everywhere instantly.

bare.shop/builder/custom-section COMPONENTS Header Gallery Products Custom Footer Custom Code Section Preview Code Linen Maxi Dress $120.00 Add to Cart Silk Camisole $85.00 Add to Cart Canvas Tote $45.00 Add to Cart Stitch resolved 3 products from collection.sale -- 420ms Drop Custom Code block here A Ada AI Stitch assistant Show my sale collection as a product grid with prices A Done! Generated 12 lines of Stitch. Loops collection.sale with images, names, prices, and Add to Cart. Insert to page Edit Live Preview
Ada AI + Stitch

Don't know Stitch? Ask Ada to write it.

Ada, the AI assistant built into BareX, knows every Stitch token. Tell it what you want in plain English and it generates the full HTML template with the right tokens for your actual store data.

"Show my summer collection as a grid" -- Ada writes the loop, images, prices, and links.

"Create a featured product hero" -- Ada fetches your real slug and generates the complete section.

"Add a sale badge loop" -- Loops all sale products with name, price, and compare price.

Everything in your store, available as a token.

Products, categories, collections, and pages. All accessible by slug. No API calls, no authentication, no backend code.

Product
{{ product.slug.name }} {{ product.slug.price }} {{ product.slug.comparePrice }} {{ product.slug.image }} {{ product.slug.url }} {{ product.slug.description }} {{ product.slug.collections }}
Loop Sources
{{ for item in products }} {{ for item in categories }} {{ for item in collections }} {{ for item in pages }} {{ for item in category.SLUG.products }} {{ for item in collection.SLUG.products }}

Your imagination. Real store data.

Build sections no template has. Stitch handles the data. You handle the design.

Start building with Stitch

Explore more solutions

Retail & Physical Goods. Website builder, POS, and variant inventory for fashion, shoes, food, beauty, and more.

Explore Retail

Digital Sellers. Sell courses, e-books, and software with zero-touch automated delivery the moment a customer pays.

Explore Digital

Unified Commerce. Connect every channel -- online, POS, B2B wholesale, and mobile -- into one dashboard.

Explore Unified Commerce