Blocks

Blocks are the individual, modular building units that form the structure of sections in Sneax. Each block controls a dedicated piece of content—such as an animated heading, a product description, a release countdown timer, an editorial image, or an animated action button.

Built natively on Shopify Online Store 2.0 (OS 2.0), Sneax’s block engine gives footwear brands and sneaker boutiques complete creative control. You can drag, drop, nest, reorder, and configure blocks directly within the Theme Editor to create custom drop announcement banners, high-energy lookbooks, and multi-tier product detail pages without touching a line of code.

---

1. Types of Blocks in Sneax #

Sneax categorizes blocks into three distinct functional types:

A. Universal Theme Blocks (blocks/*.liquid) #

These reusable blocks can be inserted into any section that declares support for theme blocks (such as Banner, Slideshow, Video, Custom Section, Main 404, Main Password, etc.):

Block	File	Purpose in Sneax Footwear Stores
Title (Heading)	title.liquid	Primary drop headlines with multiline support and cascade entrance scroll animations.
Subtitle	subtitle.liquid	Kicker tags and sub-headlines (e.g., “Exclusive Release” or “Limited to 500 Pairs”).
Text	text.liquid	Paragraph body copy with opacity controls (70%–85%) for materials, leather grades, and release notes.
Rich Text	richtext.liquid	Formatted WYSIWYG text supporting bold, italic, bulleted feature lists, and hyperlinks.
Button (Link)	link.liquid	Interactive CTA buttons with micro-animations and 9 selectable icons (Cart, Arrow, Quickview, Heart, etc.).
Image	image.liquid	Standalone high-res sneaker photography, brand logos, or certification seals.
Countdown	countdown.liquid	Live ticking countdown timer (Days, Hours, Minutes, Seconds) for scheduled sneaker drops.
Breadcrumbs	breadcrumbs.liquid	Hierarchical navigational trails that inherit global theme settings and highlight active categories.
Map	map.liquid	Embeds Google Maps or flagship store coordinates for brick-and-mortar boutique locations.

B. Container & Nested Blocks (Modular Layouts) #

Unlike rigid themes, Sneax supports Nested Blocks. Certain blocks serve as empty structural containers that can hold other child blocks inside them:

• Group (group.liquid): Creates a flexible container with vertical or horizontal flex layout options. You can place a Heading, a Countdown, and a Button side-by-side or stacked inside a single group!
• Column (column.liquid): Modular multi-column container allowing custom widths, alignment, and internal child blocks.
• Slide (slide.liquid): Individual carousel slide container used in the Slideshow section, featuring custom watermark text, star review badges, and internal content blocks.

C. Section-Specific Blocks #

Engineered specifically for complex templates (such as the Main Product section):

• Variant Picker: Shoe sizes (US/UK/EU) and colorway pill swatches.
• Price: Regular, sale, and volume break discounts with unit pricing.
• Buy Buttons: Dynamic checkout with stock status caps and pre-order support.
• Inventory Bar: Live stock level indicator (e.g., “Only 3 pairs left in size 10.5”).
• Estimated Delivery: Delivery date estimator with custom weekend shipping skips.
• Collapsible Tabs: Collapsible accordions for shoe specifications, care instructions, and return policies.

D. App Blocks (@app) #

Sneax fully supports Shopify App Blocks. Any installed Shopify app (such as product reviews, shoe size charts, carbon offset calculators, or pre-order apps) can be inserted directly into your sections and container blocks via the theme sidebar.

---

2. Managing Blocks in the Theme Editor #

Working with blocks in the Shopify Theme Editor is entirely visual:

1. Adding a Block:
   • In the left sidebar, click on the section where you want to add content.
   • Click (+) Add block at the bottom of the section’s block list.
   • Choose the desired block from the catalog (e.g., Heading, Countdown, or an App block).
2. Reordering Blocks (Drag & Drop):
   • In the sidebar, hover over the block you want to move.
   • Click and hold the six-dot handle icon (⋮⋮) next to the block name.
   • Drag the block up or down to instantly rearrange visual order on the page.
3. Nesting Blocks:
   • If using a container block (like Group or Slide), drag child blocks slightly indented below the container block to nest them inside.
4. Hiding & Deleting Blocks:
   • Click the Eye icon next to any block to temporarily hide it without losing your settings.
   • Click on the block, scroll to the bottom of its settings panel, and click Remove block to permanently delete it.

---

3. Styling & Inheritance #

• Color Inheritance: Blocks automatically adapt to the Color scheme assigned to their parent section or container.
• Typography Inheritance: Headings and body copy inherit font families, letter spacing, and base scaling from your global configuration in Theme Settings > Typography.
• Responsive Stacking: Nested containers automatically collapse into clean vertical layouts on mobile screens to ensure optimal readability.

---

Sneaker Store Best Practices #

1. High-Heat Drop Formula:
   • Inside a Banner or Slide, stack your blocks in this high-converting order:
     [Subtitle: "Limited Edition"] $\rightarrow$ [Title: "RETRO 4 'WHITE CEMENT'"] $\rightarrow$ [Countdown: Drop Timer] $\rightarrow$ [Button: "Notify Me / Enter Raffle"].
2. Use “Group” Blocks for Side-by-Side CTAs:
   • In your hero section, add a Group block set to horizontal direction, then nest two Button (Link) blocks inside: one set to Primary button (“Shop New Arrivals”) and the other set to Secondary button (“View Release Calendar”).
3. Keep Mobile Scannable:
   • Avoid overcrowding a single slide or card with too many blocks. Maintain a clean visual hierarchy of 1 headline, 1 short description, and 1 direct call to action.