The Multicolumn section in Sneax is one of the most versatile layout tools in your theme. Whether you want to educate customers on your 4-step sneaker authenticity check, communicate core store value propositions (such as free express shipping and guaranteed deadstock), or display physical boutique store locations, the Multicolumn section presents complex information in an organized, digestible format.
Merchants have complete control over multi-device layouts—effortlessly switching between a structured desktop CSS Grid (1 to 6 columns) and an interactive Touch Slideshow with custom progress bar indicators. Furthermore, each column utilizes nested block architecture, allowing you to pair custom images, headings, rich text paragraphs, and action buttons.
Accessing the Multicolumn Section Settings #
- From your Shopify Admin, navigate to Online Store > Themes.
- Click Customize next to your active Sneax theme.
- In the top dropdown template selector, select Home page (or any other page template).
- In the left-hand sidebar, click (+) Add section and select Multicolumn.
- Click (+) Add block under the section to add individual Column blocks. Within each column, configure or nest child blocks (Image, Title, Text, Link).
1. Section Header & Typography Settings #
Configure container width, background color palette, and primary header text:
| Setting | Type | Default | Options / Range | Description |
|---|---|---|---|---|
| Color scheme | Color Scheme | scheme-1 | Theme Schemes | Controls the master background fill and text contrast colors for the section. |
| Section width | Select | page-width | page-width, full-width | Choose between a centered bounded container (page-width) or an edge-to-edge canvas (full-width). |
| Heading | Text Area | Section heading | Multi-line text | Prominent title displayed above the columns (e.g., “WHY BUY FROM SNEAX?”, “THE SNEAKER CARE PROTOCOL”). |
| Heading size | Select | h4 | h1 to h6 | Sets the visual typography scale and font hierarchy of the section heading. |
| Text alignment | Select | left | left, center, right | Sets horizontal alignment for the section heading and description copy. |
| Description | Text Area | Blank | Multi-line text | Optional supporting copy or subtitle text positioned beneath the main heading. |
| Text size | Select | h5 | h1 to h6 | Sets the font size of the descriptive text paragraph. |
2. Desktop & Mobile Layout Controls #
Customize column counts and display modes across different device screens:
| Setting | Type | Default | Options / Range | Description |
|---|---|---|---|---|
| Desktop view | Select | grid | grid, slideshow | Select grid for a clean static multi-column layout, or slideshow for an interactive swiper carousel. |
| Desktop columns | Range | 4 | 1 to 6 (step: 1) | Determines how many columns appear side-by-side across desktop monitors (3 or 4 columns are ideal for features and trust badges). |
| Enable mobile slideshow for grid | Checkbox | true | Checked / Unchecked | When desktop view is set to grid, checking this automatically converts mobile devices into a swipeable carousel to prevent endless vertical scrolling. |
| Mobile slides per view | Range | 1 | 1 to 3 (step: 1) | Sets how many column cards are visible at once on mobile phone screens (1 slide per view offers focused card viewing). |
3. Slideshow Automation & Navigation Controls #
Fine-tune carousel controls when slideshow mode is active:
| Setting | Type | Default | Options / Range | Description |
|---|---|---|---|---|
| Enable loop | Checkbox | false | Checked / Unchecked | Enables continuous infinite slide looping without end. |
| Autoplay slideshow | Checkbox | false | Checked / Unchecked | Automatically advances columns continuously without requiring manual user touch. |
| Slideshow speed | Range | 30 | 10 to 100 (step: 1) | Adjusts the slide transition delay (lower values transition faster, higher values keep cards on-screen longer). |
| Show navigation arrows | Checkbox | true | Checked / Unchecked | Displays circular next and previous arrow navigation buttons. |
| Show pagination | Checkbox | true | Checked / Unchecked | Displays a modern horizontal progress bar indicator showing current slide progression. |
4. Content Blocks: Column Architecture #
Each card within the section is represented by a Column block, which houses child content blocks:
| Block Type | Primary Settings | Description |
|---|---|---|
| Column | Image size, Card color scheme, Alignment | The master card container. Allows setting image ratios (adapt, portrait, square), card surface background colors, and column text alignment. |
| Image | Image picker | Top featured image (e.g., sneaker graphic, boutique storefront, or authentication tool). Automatically receives rounded top corners (border-radius: 8px 8px 0px 0px). |
| Title | Heading, Heading size | Feature title (e.g., “100% Deadstock Guarantee”, “Double-Boxed Express Shipping”). |
| Text | Text, Text size | Detailed explanation of the feature, guarantee, or store policy. |
| Link (Button) | Button label, URL, Style | Actionable button linking to a dedicated policy page or collection. |
5. Spacing & Mobile Optimization #
Manage vertical layout breathing room:
| Setting | Type | Default | Options / Range | Description |
|---|---|---|---|---|
| Top padding | Range | 0px | 0px to 200px (step: 5px) | Vertical padding above the multicolumn section on desktop monitors. |
| Bottom padding | Range | 24px | 0px to 100px (step: 1px) | Vertical padding below the multicolumn section on desktop monitors. |
Responsive Behavior: On screens narrower than 767px, top and bottom padding values are automatically scaled down by 50%. The gap between cards reduces from 20px on desktop to 15px on mobile, and mobile slideshow mechanics ensure effortless finger-swipe browsing.
Sneaker Store Best Practices #
- Highlight: Set Desktop columns to create trust pillars that eliminate buyer hesitation:
- Educate with a “Sneaker Cleaning & Care” Guide: Use columns with images to show step-by-step shoe care.
- Always Keep Mobile Slideshow Active: Keeping Enable mobile slideshow for grid enabled ensures your features remain accessible in a compact, swipeable carousel.