Flexible content
Last updated
Last updated
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 "Flexible content".
Direction
The title for this section.
Wrap
Style of the heading.
Gap
The size of the heading text:
Small
Medium
Large
Extra large
Align items
The alignment of the heading text and description within the section container:
Left - Aligns the heading and description to the left.
Center (default) - Aligns the heading and description in the center.
Right - Aligns the heading and description to the right.
Justify content
The description for this section.
Color scheme
Set the color for the section.
Background media
Choose the style of background you’d like to use:
None
Image
Video
Background overlay
Enable background overlay
Desktop left padding
Determines the width of the left inner space of the section on desktop. Can be from 0px to 100px, increasing arithmetically of 2px (pixel).
Desktop right padding
Determines the width of the right inner space of the section on desktop. Can be from 0px to 100px, increasing arithmetically of 2px (pixel).
Top padding
Determines the height of the top inner space of the section. Can be from 0px to 150px, increasing arithmetically of 2px (pixel).
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0px to 150px, increasing arithmetically of 2px (pixel).
Button label
The text that displays on the button.
Leave the label blank to hide the button.
Button link
The URL that you want the button to link to.
Button style
Style of the button:
Filled
Text link
Outlined
Layout
Layout for this section:
Section container
Full width
Color scheme
Set the color for the block.
Text alignment
The alignment of the text within the group:
Left (default) - Aligns the text to the left.
Center - Aligns the text in the center.
Right - Aligns the text to the right.
Top padding
Determines the height of the top inner space of the block. Can be from 0px to 150px, increasing arithmetically of 2px (pixel).
Bottom padding
Determines the height of the bottom inner space of the block. Can be from 0px to 150px, increasing arithmetically of 2px (pixel).
Heading
The heading for this block.
Heading style
Style of the heading:
Default
Marquee from left to right - Scrolls text horizontally on the screen, starting from the left side and moving towards the right.
Marquee from right to left - Scrolls text horizontally on the screen, starting from the right side and moving towards the left.
Heading size
The size of the heading text:
Small
Medium
Large
Extra large
Description
The text for this block.
Text size
The size of the text:
Extra small
Small
Medium
Large
Color
The color of the text:
Primary text
Secondary text
Heading
The heading for this block.
Heading size
The size of the heading text:
Small
Medium
Large
Extra large
Icon
Add a Select the icon from the dropdown menu.
Custom icon
Replace the default icon with your own image.
Width
Set a size for the icon between 22px and 100px (pixels).
Image
Set up an image.
Desktop image width
Set the image width on desktop from 15% to 100%. (Image is automatically optimized for mobile)
Product
Select a product you want to display.
Color scheme
Set the color for the block.
Product
Select a product you want to display.
Image ratio
The image ratio for the product images:
Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
Square - Crops the images to use a 1:1 ratio.
Portrait - Crops the images to use a 2:3 ratio.
Show second image on hover
When the customer hovers their cursor over the product image, displays the second product image if the product has one.
Enable quick add button
Displays the quick add button that opens a popup displaying all the essential product details.
Product
Select a product you want to display.
Product
Select a product you want to display.
Product
Select a product you want to display.
Collection
Select a product you want to display.
Maximum products to show
The number of products from the collection to display. Minimum: 2. Maximum: 25.
Number of columns on desktop
termines the number of product columns on the desktop. Can be from 2 to 4, increasing arithmetically of 1.
Color scheme
Set the color for the block.
Number of columns on mobile
Determines the number of product columns on the mobile:
1 column
2 columns
Collection
Which collection you want to display products from.
Maximum products to show
The number of products from the collection to display. Minimum: 2. Maximum: 25.
Number of columns on desktop
Determines the number of product columns on the desktop. Can be from 2 to 4, increasing arithmetically of 1.
Show navigation arrows below content on desktop
Displays the navigation arrows below content on desktop.
Pagination style
Choose layout for the pagination.
Color scheme
Set the color for this section. (Not apply for product card. Color of the product card is changed in the theme settings.)
Number of columns on mobile
Determines the number of product columns on the mobile:
1 column
1.5 columns
2 columns
Enable swipe on mobile
Allow customers to swipe horizontally to view additional column blocks.
Show pagination
Displays the pagination for this block.
Padding
Controls the top and bottom inner spacing of the block. Adjustable from 0px to 150px in steps of 2px.
Description
The description for this block.