The Multicolumn section lets you display images, videos, headings, descriptions, and buttons in a flexible column layout. It is useful for highlighting product features, services, brand benefits, or helpful store information.
Demo usage
View the Theme Features – Concept Demo. The page uses multiple Multicolumn sections for features such as Selling internationally, Mega menu, Popup newsletter, Sticky cart, and Free shipping message.
Steps:
Add the Multicolumn section
- From your Shopify admin, go to Online Store > Themes and click Customize on your Concept theme.
- Open the page template where you want to display the columns.
- Click Add section and choose Multicolumn.
- The section starts with three Column blocks. Add, remove, or reorder blocks as needed, then click Save.
Add images, videos, and content
- Open a Column block and upload an Image or select a Shopify-hosted Video.
- Choose an Image ratio: Adapt, Square, Portrait, Landscape, or Wide.
- Add a Heading and Text to describe the feature or benefit.
- Optionally add a Button label and Button link. Choose Primary, Secondary, or Link under Button style.
- Enable Open in new tab or Show button icon when needed.
- Adjust the column's Heading size, Text alignment, and Mobile text alignment.
- Enable Show border to add an outline around the individual column.
Important: If a block contains both an image and a video, the video takes priority. Videos are set to autoplay, play muted, and loop without visible playback controls.
Set the desktop and mobile layout
- In the section settings, set Number of columns on desktop to 2, 3, or 4.
- Choose Gap: Small, Medium, or Large.
- Set Number of columns on mobile to 1 or 2.
- Enable Swipe on mobile if you want customers to browse columns horizontally on smaller screens.
- Preview both layouts and adjust the number of columns or text length as needed.
Customize the section heading and appearance
- Set the section Heading, Heading size, Heading alignment, Heading tag, Subheading, and Description.
- Optionally add a section-level Button label and Button link. This button is separate from the buttons inside individual columns.
- Customize Highlighted text for the section heading or individual column headings, including scribble styles where applicable.
- Adjust text, background, highlight, and button colors.
- Set Top padding and Bottom padding, and optionally enable Divider, Full width, or Rounded corners.
- Click Save when finished.
Theme updates
- Concept 1.1.0: Added video support to the Multicolumn section.
- Concept 1.3.1: Fixed centering of custom images/icons in Multicolumn.
- Concept 2.0.0: Fixed the layout when Multicolumn had only two blocks on iPad and improved block centering.
- Concept 2.1.1: Fixed columns overlapping on mobile devices.
See the official Concept release notes.
Multicolumn vs. Multicolumn with Icons
-
Multicolumn (
multicolumn.liquid) — displays image or video cards alongside headings, descriptions, and optional buttons. -
Multicolumn with Icons (
multicolumn-with-icons.liquid) — designed for feature lists presented with icons and its own layout settings.
Troubleshooting
- Image does not appear: Check whether a video is selected in the same Column block; videos take priority over images.
- Video plays without sound: This is expected for the built-in autoplay video display; it is muted by design.
- Columns look crowded on mobile: Try one column on mobile, shorten the text, or enable Swipe on mobile.
- Button is missing: Make sure Button label is filled in and add a valid Button link if it should lead to another page.
- Cards appear uneven: Review image ratios, text lengths, and individual border settings, then preview across screen sizes.
If you encounter any issues or need additional help with your Concept theme, please contact our support team via our Ticket System for assistance within 8 hours.
शेयर करना:
How to Set Up the Map Section in Concept
How to Set Up the Recently Viewed Section in Concept