Desktop

Mobile

 
 
 

Great storefronts are not assembled from templates.

Great 
 storefronts

are not assembled from templates.

They are shaped around a brand, its products and the way its customers shop.

BlockLab Studio gives designers and developers a single editor for creating custom landing pages, product pages and category layouts, with direct access to your store's product, category and page data. Creative control, live feedback, reusable commerce components and controlled publishing come together in one workspace, so your team can move from idea to live page with fewer handoffs and greater confidence.

Bring your own libraries

 

 

Live responsive preview

Design with complete creative control

HTML, CSS and JavaScript editors

Shape every detail of how your pages look and behave. From tightly branded layouts to rich interactive experiences, BlockLab Studio puts the full capability of the web at your team's fingertips, without the constraints of a fixed theme.

External CSS and JavaScript libraries

Bring in the established styling frameworks and interaction tools your team already knows. There is no need to build everything from scratch when proven libraries can accelerate the work.

 

See your work take shape as you build

Live preview across mobile, tablet and desktop

Every change appears in the preview as you work. Switch between mobile, tablet and desktop views to confirm that each design is polished and responsive on every screen your customers use.

 

Built for commerce, not just content

Dynamic store content through Twig

Design with real product, category and page data rather than placeholders. Twig templating connects your layouts directly to your store, so pages stay accurate as your catalogue changes.

Reusable BlockLab content

Include your existing headers, footers, blocks, zones and add to basket controls in any design. Reusing proven components saves development time and keeps the shopping experience consistent across your storefront.

 

Publish with precision

Page assignments

Apply each design exactly where it belongs. Assign layouts to selected products, categories, pages or groups, and activate or deactivate assignments as campaigns, seasons and priorities change.

 

Iterate with confidence

Revision history, restore and design copying

Explore new directions without risk. Review how a design has evolved, restore earlier versions whenever you need them, and copy existing designs to develop variations quickly.

 

Who BlockLab Studio is for

Merchants

Create a distinctive storefront that reflects your brand and gives you greater control over the customer experience, from flagship landing pages to individual product layouts.

Agencies

Deliver bespoke client work efficiently, using reusable components, copyable designs and controlled publishing to move projects from concept to launch with confidence.

Developers

Work in familiar languages with direct access to store data through Twig, the freedom to use external libraries, and live feedback throughout the build.

 

How it works

Design, connect, preview and publish without leaving the editor.

01

Design

Build your layout in the HTML, CSS and JavaScript editors, drawing on reusable BlockLab content and your preferred libraries.

02

Connect

Bring in live product, category and page data through Twig so every page reflects your store.

03

Preview

Review your design across mobile, tablet and desktop views as you work.

04

Assign and publish

Choose the products, categories, pages or groups the design applies to, then publish when you are ready.

 

What's new in this release

A completely redesigned email designer

Build and edit campaigns, welcome emails, and abandoned cart emails in a single drag and drop designer. Reorder, add, and edit content blocks directly. Changes autosave and preview instantly, with full undo/redo support.

Frequently asked questions

BlockLab Studio is a code based workspace built around HTML, CSS and JavaScript, so it is best suited to designers and developers comfortable working with code, or merchants supported by an agency or development partner.

Yes. Existing BlockLab content, including headers, footers, blocks, zones and add to basket controls, can be included in any design.

No. Work is saved automatically, but publishing is a separate step, so nothing reaches your customers until you choose to publish it.

Yes. Page assignments let you apply a design to selected products, categories, pages or groups, and you can activate or deactivate those assignments at any time.

Revision history lets you review earlier versions of a design and restore them whenever needed.

BlockLab Studio is a code based workspace built around HTML, CSS and JavaScript, so it is best suited to designers and developers comfortable working with code, or merchants supported by an agency or development partner.

Yes. Existing BlockLab content, including headers, footers, blocks, zones and add to basket controls, can be included in any design.

No. Work is saved automatically, but publishing is a separate step, so nothing reaches your customers until you choose to publish it.

Yes. Page assignments let you apply a design to selected products, categories, pages or groups, and you can activate or deactivate those assignments at any time.

Revision history lets you review earlier versions of a design and restore them whenever needed.

 
Wavy black lines
lines_black_cropped_mobile.png
 

Your storefront, designed your way.

Your storefront, designed your way.

Discover how BlockLab Studio helps your team create bespoke commerce experiences with creative freedom, live feedback and complete control over what goes live.