Use the " Multicolumn" section to highlight important information, key products, or special offers. With the ability to customize the number of columns and content, you can draw your customers' attention to what you want.
Step 01: From Shopify Admin, click on Online Store > Select Theme > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize), click the Sections button > Click the Add Section button or hover below another section until the (➕) icon appears > In the Sections tab, scroll through the list or use the search bar to find and select Multicolumn
To add Column block to the Multicolumn section, click the Add item button (plus icon ➕) under the Multicolumn
Once the Column block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Color scheme: Selects the color palette for the column block, ensuring harmony with the overall website design and creating a unified visual experience.
Image: Select the image you want to display in each column.
Image overlay opacity: Adjust the transparency of the color overlay on the image.
Desktop content position: The position where the text content will appear over the image on desktop screens (e.g., bottom left, bottom right,...).
Mobile content position: The position where the text content will appear over the image on mobile devices (e.g., bottom left, bottom right,...).
Subheading: Enter the text content for the element, conveying information or messages to users
Subheading font: Select the font style for the text, choose between font for body content and font for heading.
Subheading size: Adjust the font size of the text (small, medium,large), controlling the displayed text size.
Heading: Enter the title text for the section, providing a clear and attention-grabbing title for viewers.
Heading size: Adjust the font size of the heading, creating emphasis and visual hierarchy for the content
Heading tag (Will affect SEO): Select the HTML tag for the heading (eg: H1, H2, H3), affecting SEO structure and content hierarchy.
Description: This is the body text that provides additional information or promotional details. You can enter and format the text using bold, italic, link, list, text alignment,...
Description size: Choose the visual size of the description text: Small, Medium, Large or Extra large
Hide description on mobile: When enabled, this setting will prevent descriptive text related to that particular section or block from being displayed when viewing the site on a mobile device.
Button label (Leave the label blank to make the slide fully clickable): Enter the text displayed on the button.
Button link: Enter the URL or select a page/product to link the button to. When clicked, users will be directed to the specified destination.
Button size: This setting controls the visual size of the button. Common options you might see in a dropdown or as radio buttons include: Extra Small, Small, Medium
Button style: This setting determines the visual appearance and styling of the button. Common options include: Outline, Solid, Link, Solid 3D
Show button on hover (desktop) (Always shown on mobile): This setting controls the visibility of the button specifically on desktop devices.
Once you add the Multicolumn section, you can customize its settings in the left or right sidebar (depending on your screen size)
2.2.1. General
Color scheme: Selects the color palette for the section, ensuring harmony with the overall website design and creating a unified visual experience.
Make section full width: Expands section width to the full page width, optimizing display on large screens and creating an impactful layout.
Reveal on scroll (Show animation when section becomes visible): Activates animations when the section becomes visible while scrolling, enhancing engagement and interactivity.
Caption: Enter a brief caption, often used to provide additional information or context for an image or content.
Heading: Enter the main title for the section, helping readers quickly grasp the main topic.
Heading size: Adjust the font size of the heading, creating visual hierarchy and emphasizing content.
Heading style: Select the style for the heading (e.g., normal, uppercase), customizing the interface and creating emphasis.
Heading tag (Will affect SEO): Select the HTML tag for the heading (H1-H6), affecting SEO structure and content hierarchy.
Description: This is the body text that provides additional information or promotional details. You can enter and format the text using bold, italic, link, list, text alignment,...
Image ratio: This setting controls how the images within the section are cropped or sized to fit their containers (square, portrait, adapt to image)
Corner radius image: This setting allows you to round the corners of the images displayed in the section.
Number of columns on desktop (Automatically optimized for mobile) : This determines how many images will be arranged horizontally on larger, desktop screens
Spacing between columns: This setting controls the horizontal gap or space between the columns of images on desktop screens.
Spacing between columns (mobile): This setting specifically controls the horizontal gap or space between the columns of images when the website is viewed on mobile devices
Top padding (Desktop/Mobile): Creates space above the content within an element, separating it from elements above and improving visual layout.
Bottom padding (Desktop/Mobile): Creates space below the content within an element, separating it from elements below and improving visual layout.
2.2.2. Theme Settings
In the Multicolumn > click open Theme Settings tab
Reveal section on scroll: Activates animations when the section becomes visible while scrolling, enhancing engagement and interactivity.
2.2.3. Custom CSS
Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.
Add custom styles to this section only.
To add custom styles to your entire online store, go to Theme settings