Image

The Image block is a foundational visual element in Sneax that allows you to insert standalone photography into any compatible section or container block (such as a Column in the Multicolumn section, a Group container, or a Slide).

In a sneaker boutique or streetwear store, the Image block is ideal for highlighting technical footwear details (such as leather grain, carbon-fiber shank plates, or reflective 3M overlays), showcasing editorial on-foot campaign shots, or displaying brand trust badges.

Because Sneax is built on Shopify’s modular OS 2.0 architecture, you can drag and drop this block anywhere within a container and freely reorder it above or below headings, descriptions, and action buttons.

---

Accessing the Image Block Settings #

1. In your Shopify Theme Editor, navigate to any page template containing a compatible section (e.g., Multicolumn or Banner).
2. In the left-hand sidebar, locate the parent section or container block (e.g., Column or Group).
3. Click (+) Add block and select Image (or click an existing Image block).
4. Customize the settings in the right-hand panel.

---

Block Settings #

Setting	Type	Default	Options / Range	Description
Image	Image Picker	Blank	Media Upload	Upload or select a high-resolution photograph or graphic from your Shopify library.
Alignment	Select	Center	Left, Center, Right	Controls the horizontal placement of the image within its parent container.

---

Detailed Setting Explanations #

1. Image Selection (image) #

• Upload high-resolution sneaker photography, editorial campaign visuals, or graphic icons.
• Recommended Formats: .webp or compressed .jpg files for the ideal balance between crisp visual fidelity and high-speed page loading.
• Placeholder Fallback: If no image is uploaded, Sneax automatically displays a clean SVG placeholder icon so your layout structure remains visible and intact during design drafting.

2. Alignment (text_align) #

Controls the horizontal alignment of the image wrapper within its container column or section:

• Center (Default): Centers the image horizontally. This is the standard choice for symmetrical multi-column feature grids, value prop icons, and centered banner slides.
• Left: Aligns the image to the left edge of the container. Best used when paired with left-aligned Heading and Text blocks for an editorial, asymmetric lookbook layout.
• Right: Aligns the image to the right edge for avant-garde streetwear layouts.

---

Built-in Performance & Positioning Features #

Sneax includes several automated optimizations inside blocks/image.liquid:

Shopify Focal Point Support #

Sneax dynamically reads Shopify’s image presentation focal point (presentation.focal_point) and injects it as an inline object-position style. If you adjust an image’s focal point in your Shopify Admin media editor (e.g., pinning focus on a sneaker’s heel logo or outsole tread), the block automatically keeps that specific detail centered across desktop, tablet, and mobile screens.

Automated Lazy Loading & Responsive Srcset #

The block automatically serves 13 responsive image widths (ranging from 300px up to 2000px) and applies native loading="lazy" attributes. This guarantees that mobile devices never download oversized desktop images, keeping your store lightning-fast during high-traffic drop events.

Accessibility Alt Text #

Sneax automatically pulls the image’s custom alt text configured in your Shopify Files library. If none is specified, it gracefully falls back to your store’s localized accessibility image label, maintaining strict ADA compliance and boosting Google Image Search SEO.

---

Sizing & Dimension Guidelines #

Because the Image block is a flexible element:

• The actual rendered size is governed by the width of its parent container (such as a 3-column or 4-column grid).
• For clean visual alignment across multi-column rows, always ensure that images within neighboring columns share the same aspect ratio (e.g., all 1:1 Square or all 4:5 Portrait).

---

Sneaker Store Best Practices #

1. Use Macro Shots for Premium Footwear:
   • Pair an Image block displaying a close-up macro shot of tumbled leather or stitching details with a Heading block (“Full-Grain Craftsmanship”) and a Text block to emphasize premium material quality.
2. Icon & Trust Badge Displays:
   • Upload transparent .png or .svg icons (e.g., verified checkmark, express delivery truck, secure box packaging) to create trust-building value proposition columns.
3. Keep Aspect Ratios Consistent in Multicolumn Grids:
   • When showcasing footwear silhouettes side-by-side in a 3-column layout, crop all product cutouts to identical square (1:1) dimensions so the headings and text below them line up perfectly.