Documentation

Getting Started

Blockify Builder lets you design Shopify sections visually and export production-ready Liquid code. No app dependency, no runtime scripts — you own the output.

Your First Section

1. Sign up and open the Builder from your dashboard.
2. Add a Container — every section starts with a Container element. Drag it from the left panel onto the canvas.
3. Add elements inside — drag a Heading, Text, Button, or Image into the Container.
4. Style your elements — click any element to open its properties on the right panel. Change colors, fonts, spacing, and more.
5. Export — click the purple Export Liquid button in the toolbar. You'll get a .liquid file ready to drop into your Shopify theme.

Builder Interface

Left Panel — Element Palette

The left panel contains all available elements organized into categories: Layout, Basic Elements, Interactive, and Shopify. Drag elements from here onto the canvas or click them to add.

Center — Canvas

The canvas is your workspace. Elements appear here as you add them. Click any element to select it and edit its properties. Drag elements to reorder them.

Right Panel — Properties

When you select an element, its properties appear on the right. Here you can:

• Edit content (text, images, links)
• Adjust styles (colors, fonts, spacing, borders)
• Toggle properties for Shopify schema export

Toolbar

The top toolbar gives you access to:

• Viewport Switching — preview and edit at 5 different screen sizes (XS, SM, MD, LG, XL)
• Sync — copy the current breakpoint's styles to all other breakpoints
• Undo / Redo — step back or forward through your changes
• Navigator — open a tree view of your element hierarchy
• Clear Canvas — start fresh
• Import — load a previously exported JSON file
• Export JSON — save your work as a JSON file you can re-import later
• Export Liquid — generate the final Shopify Liquid file

Elements

Layout

Basic Elements

Interactive Elements

Shopify Elements

Templates

Templates are pre-built section designs you can insert with one click. They come fully styled and ready to customize.

Using Templates

1. Click the Templates tab at the top of the left panel.
2. Browse by category (Hero, CTA, Features, Pricing, etc.) or search by name.
3. Click Insert on any template to add it to your canvas.
4. Customize the content, colors, and styles using the property panel.

Template Categories

Templates are organized by section type: hero sections, call-to-action, feature showcases, pricing tables, testimonials, FAQ accordions, countdown sales, product displays, and more.

Schema Toggles

Schema toggles are what make your sections editable in the Shopify theme customizer. When you toggle a property on, it becomes a setting that store owners can change without touching code.

How It Works

1. Select an element on the canvas.
2. In the right panel, you'll see checkboxes next to each property.
3. Check the box to make that property editable in Shopify.
4. When exported, checked properties become Liquid variables with schema settings.

What Happens When You Toggle

• Toggle ON — the property exports as a Shopify schema setting. Store owners can change it in the theme customizer.
• Toggle OFF — the property is hardcoded in CSS. It uses the value you set in the builder and can't be changed in Shopify without editing code.

Common Properties to Toggle

Responsive Design

Blockify gives you 5 viewport breakpoints to design for every screen size.

How to Use

1. Use the viewport buttons in the toolbar to switch between breakpoints.
2. Edit properties at each breakpoint — changes only apply to that screen size.
3. Use Sync to copy the current breakpoint's styles to all others.

What “Liquid Variable” Means

SM, LG, and XL breakpoints export as Shopify schema settings. This means store owners can adjust mobile, desktop, and fullscreen values independently in the theme customizer. XS and MD are builder-only — they export as fixed CSS values.

Exporting

Export Liquid

Click the purple Export Liquid button in the toolbar. This generates a single .liquid file containing:

• HTML — semantic markup with Liquid variables for editable content
• CSS — scoped styles with Liquid variables for editable properties, plus responsive media queries
• Schema — Shopify JSON schema with all your toggled settings, types, defaults, and options

Installing in Your Theme

1. Download the exported .liquid file.
2. In your Shopify admin, go to Online Store → Themes → Edit Code.
3. Under Sections, click Add a new section.
4. Paste the contents of your exported file and save.
5. Go to the Theme Customizer and add your new section to any page.

Export JSON

Use Export JSON to save your work as a JSON file. You can re-import this later with the Import button to continue editing. This is useful for saving drafts or sharing designs between team members.

For Developers

The 4 Property Routes

Every CSS property in Blockify follows exactly one of these routes:

Liquid Output Structure

The exported .liquid file has this structure:

• <style> — CSS rules scoped to the section ID, using {{ section.settings.setting_id }} Liquid variables for schema-toggled properties
• HTML — element markup with data-element-id attributes for CSS targeting
• {% schema %} — JSON schema with setting types (text, color, range, select, image_picker, etc.), defaults, and options

Schema Setting Types

Responsive Schema Breakpoints

When a responsive property is toggled for schema, it generates 3 settings:

• Mobile — corresponds to SM viewport (576-767px)
• Desktop — corresponds to LG viewport (992-1199px, base styles)
• Fullscreen — corresponds to XL viewport (1200px+)

This gives store owners control over how the property looks at each major breakpoint, directly from the Shopify theme customizer.

Shopify Pickers

Certain elements generate special Shopify picker settings:

• Product Card — generates a product picker
• Product Grid — generates a collection picker
• Collection List — generates 6 collection pickers

These allow store owners to select products and collections directly in the theme customizer.