Custom content
Produce a flexible and unique Custom content that deatures extra information regarding store's recognition
Last updated
Produce a flexible and unique Custom content that deatures extra information regarding store's recognition
Last updated
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.
Steps
In the theme editor (Customize), click Add section
Select Custom content.
Make necessary changes.
Save the settings.
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.
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.
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 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).
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.
This divider line provides a clear boundary between the current section and the above.
You can choose a suitable Divider width for it (Fixed width/ Full width).
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.
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.
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:
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.
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.
Click Select image to select a suitable image to display in the section.
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)
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.
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.
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.
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.
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:
To activate the divider line, enable the Show divider checkbox.
You can enable the carousel effect in your featured collection by choosing Enable carousel on desktop checkbox.
The Text card with image block is available on Sleek version 1.4.0 and above .
