Multicolumn
To add this section, please follow the below steps:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Add section and choose "Multicolumn".
Setting | Description |
---|---|
Content inside image | Select this checkbox to enable/disable content inside image |
Heading | Add text to display as a section heading (Leave the field blank to hide the heading) |
Link label | Add text to display as a link label on the section (Leave the field blank to hide the link) |
URL | Set the link, for example the customer service page |
Image ratio | Select image ratio from the dropdown menu:
|
Content alignment | Select content alignment from the dropdown menu:
|
Choose style button | Select the button style for the section:
|
Colors
Setting | Description |
---|---|
Color scheme | Select a color scheme to set the text and background colors for the section |
Use custom color | Select this checkbox to use custom color for this section. (The 3 following settings only take effect if this checkbox is ticked) |
Text (Color) | Set the text color for this section |
Background | Select a background color for this section (If a background gradient is set, the section's background will be set according to the background gradient setting) |
Background gradient | Select a background gradient color for the section |
Carousel
Setting | Description |
---|---|
Grid spacing (desktop) | Determines the grid spacing between columns of products on desktop devices. Can be from 0px to 60px, increasing arithmetically of 1px (pixel). |
Grid spacing (tablet) | Determines the grid spacing between columns of products on tablet devices. Can be from 0px to 60px, increasing arithmetically of 1px (pixel). |
Grid spacing (mobile) | Determines the grid spacing between columns of products on mobile devices. Can be from 0px to 60px, increasing arithmetically of 1px (pixel). |
Products per row (desktop) | Determines the number of products on the desktop. Can be from 1 to 5, increasing arithmetically of 0.1 |
Products per row (tablet) | Determines the number of products on the tablet. Can be from 1 to 3, increasing arithmetically of 0.1 |
Products per row (mobile) | Determines the number of products on the mobile from the dropdown menu:
|
Enable arrows | Display arrows on devices:
|
Enable infinite scroll | Select this checkbox to show/hide infinite scroll on this section. Recommended when 'Column block' is greater than the number of 'Products per row (desktop)' |
Enable pagination | Display pagination on devices:
|
Pagination type | Display pagination type on devices:
|
Animations
Setting | Description |
---|---|
Reveal sections on scroll | Select the scroll animation from the dropdown menu:
|
Text animation | Select the text animation from the dropdown menu:
|
Section padding
Setting | Description |
---|---|
Top margin | Determines the height of the top outside space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel). |
Bottom margin | Determines the height of the bottom outside space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel). |
Setting | Description |
---|---|
Top padding | Determines the height of the top inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel). |
Bottom padding | Determines the height of the bottom inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel). |
Top padding on mobile | Determines the height of the top inner space of the section on mobile. Can be from 0px to 100px, increasing arithmetically of 1px (pixel). |
Bottom padding on mobile | Determines the height of the top inner space of the section on mobile. Can be from 0px to 100px, increasing arithmetically of 1px (pixel). |
Last updated