Multicolumn settings
| Setting | Description |
| Heading | To add a main section heading, simply enter the text in the provided field. In the top menu of the field, you can find options to customize the heading such as making it bold, italic, or adding a hyperlink. |
| Heading font family |
In Theme Settings, you can assign a different font family to headings and body text. This option allows you to customize the visual style of your heading by selecting heading or body styles. For some headings, it might be more effective to apply the body text style instead of the designated heading font. This choice depends on how well the font families harmonize and the overall appearance you want to achieve. |
| Heading size | The heading size setting offers three options to control the size of your section heading:
|
| Font weight | Font weight defines the thickness or boldness of text on your store. Available options for heading:
|
| Heading width | This option adjusts the heading width. Use the slider to change the width as needed. |
| Color scheme | Applying a color scheme to the multicolumn section automatically updates all associated colors set in the theme settings according to the created color schemes. You can edit colors in this block, but it will impact the other sections and blocks in which the same color scheme is used. Learn more about color schemes. |
Button settings
| Setting | Description |
| Button label | To make the button visible on the page, you need to add a label to it. The label is the text that appears on the button and gives it a purpose or indicates the action it performs. Without a label, the button will be hidden and not visible to users on the page. |
| Button link | To set a button link, you can enter the link URL directly into the “Button link” field or select a page from the dropdown list of options that appears when you click on the field. |
| Button style | In Shopify, Button style can be customized by using the primary and secondary button color sets, which are defined in the theme settings. These color sets allow you to style buttons consistently across your store. |
| Button outline | None: The button has no outline. It appears flat, with just the background color and text, giving it a clean, minimal look. Outline: The button has a visible border around it, but the background is transparent. Outline on Hover: The button appears flat without a border or background initially. However, when the user hovers over it, a visible border appears, and the button's background remains transparent. |
Column settings
| Setting | Description |
| Number of columns on desktop | The “Number of columns on desktop” setting allows you to choose the number of columns in which your content will be displayed on larger screens, and on tablets. You can select from 1 to 6. |
Image width |
Choose what width of the column will take the image :
|
| Custom image width | The Custom image width setting allows adjustment of the image width to fit specific needs, ranging from 20 px to 500 px. Simply move the slider to the desired value. Use this setting if the image width settings above do not meet your requirements. Note: To use this setting, select the "Custom" variant in the "Image width" setting. |
Image ratio |
The “Image ratio” setting allows you to control how images are displayed on your website based on their width-to-height ratio. You have several options to choose from:
|
| Enable min height | Enable this setting to set a minimum column height. The specified height will be maintained even if the content is smaller than the set height. |
| Columns min height | Ensure that the "Enable Min Height" setting is turned on, then use the slider to adjust the minimum height of the columns. |
| Column alignment | Choose left or center alignment of the column. |
| Vertical content alignment | Select the vertical alignment of content:
|
| Secondary background | This setting allows you to choose a background for a column. If you select “Show column background” you'll need to choose a different section background in color scheme to see changes:
*Color scheme of column can be changed in column block settings. |
| Color scheme | Applying a color scheme to the multicolumn section automatically updates all associated colors set in the theme settings according to the created color schemes. You can edit colors in this block, but it will impact the other sections and blocks in which the same color scheme is used. Learn more about color schemes. |
Mobile layout
| Setting | Description |
| Number of columns on mobile | Select the preferred column layout for mobile devices:
|
| Column alignment | Choose left or center alignment of the column. |
| Enable swipe on mobile | Turn on this toggle to display columns in a carousel format on screens narrower than 989 pixels. |
Section paddings
| Setting | Description |
| Top padding | The “Top padding” setting allows you to adjust the amount of space at the top of the section for desktop using a slider. |
| Bottom padding | The “Bottom padding” setting functions similarly to the “Top padding” setting but controls the space at the bottom of the section for desktop. |
| Top padding mobile | The “Top padding mobile” setting allows you to adjust the amount of space at the top of the section for mobile devices using a slider. |
| Bottom padding mobile | The “Bottom padding” setting functions similarly to the “Top padding” setting but controls the space at the bottom of the section for mobile devices. |