The Custom section gives you a flexible layout area where you can combine theme blocks and app blocks in one section. It is useful when you want to build a custom content layout without using a dedicated section type.
In Concept, the Custom section can display blocks vertically or horizontally, use a background image or video, apply overlay colors, and control the section width, height, spacing, and colors.
How to Set Up the Custom Section in Concept
Steps:
Add the Custom section
-
From your Shopify admin, open Online Store > Themes.
-
Click Customize on your Concept theme.
-
Open the template where you want to add the custom layout.
-
Click Add section.
-
Select Custom section.
-
Click Save.
After adding the section, you can start adding theme blocks or app blocks inside it.
Add content blocks
-
Open the Custom section in the theme editor.
-
Click Add block.
-
Select the theme block or app block you want to add.
-
Configure the block content and settings.
-
Repeat the same process for each block you want to display in the section.
The Custom section supports flexible blocks, so you can use it to combine text, buttons, images, custom Liquid, apps, and other supported theme blocks in one layout.
Configure the section layout
-
Open the Custom section settings.
-
Use Direction to choose how the blocks are arranged.
-
Select Column if you want blocks to stack vertically.
-
Select Row if you want blocks to sit next to each other horizontally.
-
Enable Vertical on mobile if you want row layouts to stack on smaller screens.
-
Enable Wrap if you want row items to move onto a new line when there is not enough horizontal space.
-
Use the alignment settings to control the position of the content inside the section.
-
Adjust Gap to control the spacing between blocks.
These settings help you build simple or complex layouts without adding custom code.
Adjust the section size
-
Use Section width to control how wide the content area should be.
-
Choose a narrow, page-width, full-width, or unrestricted layout depending on the design you want.
-
Use Section height to control the desktop height of the section.
-
Use Section height on mobile to control the mobile height.
-
Select Custom if you want to manually define the section height.
-
Adjust the custom height value when the custom height option is selected.
The height settings are useful when the section uses a background image or video and needs a more visual banner-style layout.
Add a background image or video
-
Open the Background media setting.
-
Select Image if you want to use a background image.
-
Upload or select the background image.
-
Use Image position to control how the image fits inside the section.
-
Select Video if you want to use a background video.
-
Upload or select the video.
-
Use Video position to control how the video fits inside the section.
-
Click Save.
Background media appears behind the blocks inside the section. Use the section height settings if you want the background media to have a stronger visual presence.
Add a background overlay
-
Enable Background overlay if you want to add a color layer above the background media.
-
Select an Overlay color.
-
Choose Solid if you want one consistent overlay color.
-
Choose Gradient if you want the overlay to fade in one direction.
-
Select the Gradient direction when using a gradient overlay.
A background overlay can help text and buttons remain readable when they are placed over an image or video.
Configure colors and spacing
-
Use Text to change the text color inside the section.
-
Use Background or Background gradient to set the section background color.
-
Use the button color settings to adjust button text, button background, and button gradient colors.
-
Adjust Padding top and Padding bottom to control the vertical spacing around the section.
-
Enable Show section divider if you want a divider line between this section and nearby sections.
-
Enable Make section rounded if you want rounded section corners.
-
Click Save.
These settings control the general appearance of the Custom section.
Custom section behavior
- The Custom section can contain theme blocks and app blocks.
- The section layout can be vertical or horizontal.
- Row layouts can be stacked vertically on mobile.
- Background media can be set to none, image, or video.
- Overlay settings only apply when the background overlay is enabled.
- Custom height settings only appear when the section height is set to custom.
- The section can be used on different templates, depending on where you add it in the theme editor.
Troubleshooting
If blocks do not appear, make sure content blocks have been added inside the Custom section.
If the layout does not look correct on mobile, enable Vertical on mobile or adjust the block layout.
If the background image or video does not appear, check that Background media is set to Image or Video and that the media has been selected.
If text is hard to read over the background, enable Background overlay and adjust the overlay color.
If the section height looks too small, adjust Section height or select a custom height.
If spacing feels too large or too small, adjust Gap, Padding top, and Padding bottom.
If app content does not appear, make sure the related app block is added and the app is installed and enabled.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
بانٹیں:
How to Set Up the Countdown Condensed Section in Concept