Local > Sections > Flex Sections

The Local theme includes powerful Flex Sections that give you extra layout control and design flexibility. These sections are ideal for building custom landing pages, showcasing promotions, or crafting unique content blocks — all without touching code.

Flex slideshow

The Flex Slideshow in Local is a highly customizable full-width or fixed-height carousel designed for large, visual storytelling blocks. Each slide can combine imagery, layered content, CTAs, and ratings — giving you full control over both design and messaging.

Slideshow options

Layout & sizing

You can define how tall the slideshow should appear across devices:

• Desktop height lets you choose from Small, Medium, or Full height to control how much space the slideshow takes up on large screens.
• Mobile height gives you the same control, but specifically for smaller devices — ideal for ensuring that slides don't feel too cramped or oversized.
• If you want the slideshow to adapt based on the image size itself, enabling Auto height will override your manual height settings and make each slide adjust to its own image proportions.
• You can also choose to make the section Fullwidth, which stretches the slideshow background to the very edges of the screen — perfect for immersive designs.

Behavior

• With Enable autorotate turned on, the slideshow will automatically transition between slides without user interaction.
• You can control the interval between slides (in seconds), allowing for faster or slower rotations depending on your storytelling pace.

Text styling

Customize how text appears on top of your slides:

• Text alignment lets you position content inside each slide — for example, bottom-left for captions, or centered for bold headlines.
• Use Text spacing to adjust the vertical gap between your content blocks (like heading, caption, and button).
• Choose the Text container width to define how much space the text content should occupy — Small, Medium, or Large.
• The Text blending mode gives you options to overlay the text in a different way over the images.

Visual design & customization

For added style and branding flexibility:

• Border radius allows you to round the corners of the slideshow (especially noticeable when it’s not fullwidth).
• You can set a custom background color to appear behind the slides — this is useful when using partial-width layouts or transparent images.
• Or, for a more layered aesthetic, apply a background gradient instead of a flat color.
• The navigation elements color setting lets you customize the arrows and pagination dots to better match your brand palette.
• If you want tighter layout control, you can remove the top margin, which pulls the slideshow closer to the section above — handy when you want a seamless flow from the header or announcement bar.
• Finally, if you prefer a more static feel, you can disable the parallax effect, preventing images from subtly shifting as the user scrolls.

Flex grid

The Flex Grid is one of the most adaptable sections in the Local theme, allowing you to create complex, modular layouts using a mix of media and content. It's ideal for landing pages, promotional blocks, feature highlights, or brand storytelling — all built from customizable cards.

You can mix two types of content blocks:

• Media Cards – Focused on visuals (image, video, or GIF).
• Text Cards – Focused on messaging, using headings, captions, buttons, and more.

Flex grid settings

The Flex Grid lets you build multi-column layouts that automatically adapt to your content.

Desktop & Mobile Card Height

Each card has a minimum height value for desktop and mobile. Cards automatically expand if the content inside requires more vertical space. This ensures your layout remains responsive while giving you consistent vertical rhythm.

Fullwidth Layout

You can optionally make the grid stretch across the full screen. When disabled, the grid stays within the page’s standard content width — useful for tighter, editorial-style layouts.

Text Style

You can fine-tune spacing inside the text cards using:

• Text spacing – Adjust the vertical gap between blocks like heading, caption, and button.
• Text padding – Choose how much padding surrounds the content within each card.

Custom Card Design

• Remove gap between cards – If enabled, adjacent cards will sit flush with no margin, creating a clean grid wall or collage effect.
• Border radius – Adds rounded corners to cards, letting you soften the design or align it with your brand style.

Card types

Media Card

A media card displays an image or a video, without text on it. Media cards are great for lifestyle photography, featured products, or brand visuals.

Text Card

Text cards are more structured and content-driven. Use them to highlight promotions, unique selling points, or feature overviews. You can include any combination of blocks — from star ratings to CTAs — and arrange them freely inside the card. You can also add images or videos underneath the text.

Flex cards

The Flex Cards section is a powerful, visual layout tool that lets you showcase multiple promotions, categories, or collections in a dynamic, modular grid. Each card can include imagery, text, call-to-actions, and more — giving you full creative freedom to craft eye-catching marketing sections

Flex cards settings

At the section level, you can add a heading and subheading above the grid — great for introducing a promotion or collection. You can also adjust the heading size, text alignment, and optionally add a section-wide call-to-action button.

In terms of layout, you can define the height of media (image or video) shown in each card. If media height needs to remain fixed across breakpoints, you can enable preserve media height on mobile. Or, if you want to build a text-only grid, there’s also a toggle to hide media altogether.

You also get control over:

• Text alignment (Left, Center, Right)
• Text spacing between blocks inside each card
• Text padding, to manage internal spacing inside the card
• Card border radius to adjust corner roundness

Card settings

Each card has its own design and layout controls.

Media Options

You can upload an image or a video. If a video is selected, the image will be used as a fallback preview. The card can optionally link to a product, collection, or external page — and unless you use a separate button, the whole card becomes clickable.

Grid Layout

Use the desktop columns slider to control how wide each card should be in relation to the grid (e.g. setting a card to “5” in a 12-column layout). This lets you mix tall, wide cards with smaller ones to create visual rhythm.

There’s also a toggle to hide specific cards on mobile, if needed.

Flex section blocks

All Flex sections support a wide range of customizable blocks. Each block adds a layer of content or structure to your layout.

Image

The Image block lets you display standalone images or use them as part of layered content. You can set a custom image height and optionally link the image to another page or product. It works well as an icon or as a logo list, if you put more images inside a content group.

Heading

Use the Heading block for bold, prominent text — ideal for titles or key messages. You can control the size (Small, Medium, or Large), adjust the line height, and even set a custom text color. For SEO purposes, you can choose the HTML heading tag (like H2 or H3), which helps search engines understand the structure of your page. Line breaks can be inserted using [br] .

Caption

A Caption block is a simple, smaller-sized text element — perfect for short descriptions, taglines, or subtitles. You can adjust its size and line spacing to match your layout. It’s commonly used under headings to add extra context. If you set a custom background it will turn into a "badge" design, that can work really well inside a content group.

Text

The Text block is ideal for longer paragraphs. It supports rich formatting (bold, italic, links, lists), allowing you to share detailed information, descriptions, or announcements. You can control the text size and line height for better readability.

Button

Add a call-to-action with the Button block. You can define the label, destination link, and choose between a Solid (filled) or Outline (bordered) style. Optionally, you can set a custom background color — helpful when placing buttons over imagery or custom themes.

Quick buy button

This block adds a product-specific "Add to cart" button. Useful for landing pages or promotional slides where quick conversion is key. If the product has multiple variants, a modal will be shown for the user to select the proper variant. Otherwise, the product will be directly added to the cart.

Star rating

Star rating lets you visually showcase customer feedback or social proof. You can set a rating from 0 - 5 stars, customize the accompanying caption text (e.g., “100+ Five Star Reviews”), and select a custom star color to match your brand palette.

Empty space

This utility block inserts vertical spacing between elements. Use it to fine-tune layout breathing room — for example, between a heading and button, or above a call to action.

Divider

Use the Divider block to break up content with a horizontal line. You can customize its height, width (Small, Medium, Full), color, and style (Solid or Dotted). It’s a subtle way to visually group content or separate sections.

Content group

This advanced block allows you to horizontally group multiple blocks — like a Heading and Button side-by-side. Or two buttons. Or a list of logos. Or a group of captions. Whatever you want.

You can control the spacing between them (Small or Medium), and rearrange their order. Great for compact, modular layouts.

Custom liquid

For advanced users, the Custom Liquid block lets you insert your own Liquid code. This is useful for pulling in dynamic content, metafields, or adding custom logic — while keeping everything inside the visual editor.