Flexible columns
Flexible columns lets you build layouts no other section offers: columns of any width, each holding its own blocks, with control over how they stack on smaller screens.
Build a layout
- In the theme editor, click Add section and choose Flexible columns.
- Add a Column block for each column, and set its Width on large screens, from 20% to 100%. Columns that add up to more than 100% wrap onto a new line.
- Inside each column, add blocks: headings, text, buttons, images, icons, stats, countdowns, discount codes, email signups, spacers, custom Liquid, or a Row to place blocks side by side.
- Click Save.
Column settings
| Setting | What it does |
|---|---|
| Height | Auto, stretch to match the tallest column, the full browser height on desktop, or a custom height. |
| Stick when scrolling on desktop | Keeps the column in view while a taller column beside it scrolls past. |
| Background image | An image behind the column’s content. |
| Use a color scheme | Gives the column its own panel, with an optional shadow and rounded corners. |
| Padding | Space inside the column, optionally on desktop only. |
| Column link | Makes the whole column a link, with Link text for SEO. Don’t use it if the column contains links or buttons. |
Breakpoints
By default, columns take the full width on smaller screens and stack. Turn on Specify custom breakpoints (advanced) to set a width for small and medium screens too, and the screen widths where those apply. Ignite’s standard breakpoints are 549px for mobile, 749px for tablets and 989px for large tablets.
Section settings
- Maximum width: from S to full width, so a layout can sit in a narrow column or fill the screen.
- Gap on small, medium and large screens.
- Background image, Color scheme, and a heading, description and View more link.
- Hide this section when there’s no content to show. See Showing sections at the right time.
Common questions
Can I set my own column widths in Shopify with Ignite?
Yes. In Flexible columns, each Column block has its own width, from 20% to 100%, and can have different widths on small and medium screens.
Can a column stay in view while the page scrolls?
Yes. Turn on Stick when scrolling on desktop on that column. The columns beside it must be taller.