Custom content 🔥
Produce a flexible and unique Custom content that deatures extra information regarding store's recognition
The Custom content section provides design flexibility and a customizable layout to display any type of content such as videos, featured collections, or even image cards, etc.
This section makes room for customization beyond standardized templates in Sleek theme, empowering you to create visually appealing and engaging pages tailored to your business needs and branding requirements.
In this article, we will show you how to add a Custom content section.
How to add a Custom content section to your Shopify store
Steps
In the theme editor (Customize), click Add section
Select Custom content.
Make necessary changes.
Save the settings.
How to edit a Custom content section
Section settings
General
Adjust the Container (Full width/ Fixed width) and Color scheme for this section.
Especially, if there is a block with a longer height, you can Enable sticky columns on desktop to make the shorter height blocks sticky while scrolling.
Section header
Use the provided text fields to add a suitable Heading.
Leave it blank if you do not want to display it
You can also change the Heading size to:
Heading xs
Heading sm
Heading md
Heading lg
Heading xl
Heading 2xl
Display md
Display lg
Display xl
to make the content look balanced on your website.
Highlight text
How to apply Highlight text to the section heading and block headings?
Use the provided text fields to add a suitable Subheading and Description.
Leave them blank if you do not want to display them
Grid settings
You can modify the Column gap and Row gap in your Custom content as Extra large/ Large/ Medium/ Small/ Extra small/ None / Same as the column gap (special value of the Row gap option).
Mobile Layout
If you are not into the grid layout, you can use the carousel layout by selecting the Enable swipe on mobile.
Section padding
You can modify the spacing above and below the section by adjusting the slider to change the values of the Top padding and Bottom padding.
Section divider
This divider line provides a clear boundary between the current section and the above.
To activate the divider line, enable the ✅ Show divider checkbox.
You can choose a suitable Divider width for it (Fixed width/ Full width).
Block settings
There are 10 main blocks that can be added:
Each of them will have the common settings and its own settings.
In Block settings, you can change the Container width of the block and its Vertical alignment to Top/ Middle/ Bottom.
In Custom attributes, adding classes to Custom classes input field allows you to define custom CSS styles for specific blocks.
1) Image card
Adjust the Color scheme for the image card block.
Click Select image to assign the image to the card media and use the slider to change the Image overlay opacity.
Select the card's Image ratio as:
Adapt to image
Square (1:1)
Portrait (3:4)
Landscape (4:3)
Add some text for the banner’s Heading. Leave it blank if you do not want to display it.
You can also change the Heading size to:
Heading xs
Heading sm
Heading md
Heading lg
Heading xl
Heading 2xl
Display md
Display lg
Display xl
to make your image card block look more balanced.
In Highlight text:
Use the provided text fields to add a suitable Subheading and Description.
Leave them blank if you do not want to display them
Add a call-to-action button that directs customers to the target page specified in the Card link field. Add a Label then choose a Button style (Primary button/ Secondary button/ Underline button).
Furthermore, you can also modify the look as well as the position of the content by changing these properties:
Content position: Top left/ Top center/ Top right/ Middle left/ Middle center/ Middle right/ Bottom left/ Bottom center/ Bottom right
Content alignment: Left/ Center/ Right
Content spacing: Small/ Medium/ Large
In Mobile settings:
Adjust the Color scheme for the image card block on mobile.
Especially, if you want to display a different card image on the mobile device, you can insert another image to the Image field.
You are able to display the content below or above the collapsible tabs by enabling/disabling the Show content below image checkbox.
Moreover, the block also allows you to change Content alignment on mobile.
2) Collections
This Collections block allows you to add up to 3 collections to display in the Collection list field.
In Grid settings:
Use the slider to adjust the Maximum products to show (between 2 and 12) and the Number of columns on desktop (between 2 and 4).
You can also control the suitable spacing between the product cards by selecting Column gap and Row gap options.
In Carousel settings:
You can enable the carousel effect in your featured collection by choosing ✅ Enable carousel on desktop checkbox.
Carousel shows only when the number of products is larger than the number of columns.
In Product cards:
Select the product card's Image ratio as:
Use global settings
Adapt to image
Square (1:1)
Portrait (3:4)
Landscape (4:3)
In Mobile Layout:
You can adjust the Number of columns on mobile to 1 column or 2 columns.
If you are not into the grid layout, you can use the carousel layout by selecting the Enable swipe on mobile.
3) Video
Video: Select a video that you've uploaded to Shopify Files (Shopify-hosted video) or insert an embed video from URL (YouTube or Vimeo video URL).
The embed video from URL will show when no Shopify-hosted video is selected.
Cover image: If you are using an embedded video from URL, a cover image is required.
Video ratio: Set the ratio of the video.
Video alt text: Describe the video for customers using screen readers. Learn more
Enable video autoplay: Video are muted automatically to allow autoplay.
Enable video looping: Video is looped automatically.
4) Image
Click Select image to select a suitable image to display in the section.
5) Text
Add some text for the banner’s Heading. Leave it blank if you do not want to display it.
You can also change the Heading size to make your text block look more balanced.
In Highlight text:
How to apply Highlight text to the section heading and block headings?
Use the provided text fields to add a suitable Subheading and Description.
Leave them blank if you do not want to display them
You can also change the Description size to Small/ Base size/ Large to make the content look balanced on your website.
Add a call-to-action button that directs customers to the target page specified in the Button link field. Add a Label then choose a Button style (Primary button/ Secondary button/ Underline button).
Furthermore, you can also modify the look as well as the position of the content by changing Content alignment (Left/ Center/ Right)
6) Collection card
Enable the Use section color scheme checkbox if you want the block to synchronize the Color scheme with the section.
Moreover, you can change the card's Style:
Use global settings
Standard
Card
Choose the Collection you want to showcase on a collection card.
You can select an Image for the collection card. Leave this field blank if you want to use the collection image.
Select the card's Image ratio as:
Adapt to image
Square (1:1)
Portrait (3:4)
Landscape (4:3)
You can also adjust the Card width to Full width or Narrow width.
7) Promotion card
Adjust the Color scheme for the promotion card block.
Click Select image to assign the image to the banner of the promotion card on the desktop and use the slider to change the Image overlay opacity.
Select the card's Image ratio as:
Adapt to image
Square (1:1)
Portrait (3:4)
Landscape (4:3)
In Content settings:
You can change the Layout of the promotion card to Space between/ Vertical split.
Add some text for the banner’s Heading. Leave it blank if you do not want to display it.
In Highlight text:
How to apply Highlight text to the section heading and block headings?
You can change the Heading size to:
Heading xs
Heading sm
Heading md
Heading lg
Heading xl
Heading 2xl
Display md
Display lg
Display xl
to make your block look more balanced.
Use the provided text fields to add a suitable Subheading and Description.
Leave them blank if you do not want to display them
Add a call-to-action button that directs customers to the target page specified in the Card link field. Add a Label then choose a Button style (Primary button/ Secondary button/ Underline button).
Furthermore, you can also modify the look as well as the position of the content by changing the value of Content alignment to Left/ Center/ Right.
In Mobile settings, if you want to display a different card image on the mobile device, you can insert another image into the Image field.
8) Image with text
Click Select image to select a suitable Image to display in the block.
In Image badge:
Select the suitable Color scheme for the image badge and insert content for the badge into the Text field.
In Content settings:
Add some text for the Heading. Leave it blank if you do not want to display it.
You can change the Heading size to:
Heading xs
Heading sm
Heading md
Heading lg
Heading xl
Heading 2xl
Display md
Display lg
Display xl
to make your block look more balanced.
In Highlight text:
How to apply Highlight text to the section heading and block headings?
Use the provided text fields to add a suitable Subheading and Description.
Leave them blank if you do not want to display them
You can also change the Description size to Small/ Base size/ Large to make the content look balanced on your website.
Add a call-to-action button that directs customers to the target page specified in the Button link field. Add a Label then choose a Button style (Primary button/ Secondary button/ Underline button).
Furthermore, you can also modify the look as well as the position of the content by changing the value of Content alignment to Left/ Center/ Right.
9) Lookbook card
You can add up to 5 Products to display on each block.
Select an outstanding Image for the media of the lookbook card to draw customers' attention.
Insert suitable content for the Heading of the product list pop-up in the lookbook card.
Leave it blank if you do not want to display it
You can also change the Heading size to:
Heading xs
Heading sm
Heading md
Heading lg
Heading xl
Heading 2xl
Display md
Display lg
Display xl
In Product cards:
Select the product card's Image ratio as:
Use global settings
Adapt to image
Square (1:1)
Portrait (3:4)
Landscape (4:3)
To adjust the Use global settings option value, navigate to the "Customize" menu of your theme and click on the "Theme settings" button. This will take you to a menu where you can adjust various global theme settings.
You can also enable the Full column height checkbox to ensure the block consistently extends to the full height of the column.
10) Text card with image
The Text card with image block is available on ✨ Sleek version 1.4.0 and above ✨.
See Changelog.
Click Select image to choose an image displaying above the text card and use the slider to change the Image width (20px - 100px).
Select the card's Image ratio as:
Adapt to image
Square (1:1)
Portrait (3:4)
Landscape (4:3)
Add some text for the text card’s Heading. Leave it blank if you do not want to display it.
You can also change the Heading size to make your text block look more balanced.
In Highlight text:
See: How to apply Highlight text to the section heading and block headings?
Use the provided text fields to add a suitable Subheading and Description. Leave them blank if you do not want to display them.
You can also change the Description size to Small/ Base size/ Large/ Inherit to make the content look balanced on your website.
Add a call-to-action button that directs customers to the target page specified in the Button link field. Add a Label then choose a Button style (Primary button/ Secondary button/ Underline button).
You can also enable the Full column height checkbox to ensure the block consistently extends to the full height of the column (when the block's original height is smaller than the column's height).
Below is an example of how the setting works:
Last updated
