Install #1 Page Builder App for FREE and get deal 6 months of Standard Plan. Hurry up! See Detail  

Header background

Kalles - Custom section

Annie

Written by Annie

Last updated

412 views

On this page


This section is very flexible and you can design it like whatever you want with images, text, and buttons, etc. It is usually located on Home Page. However, Shopify 2.0 allows you to add Custom Section to any pages that you want.

You can look over this video to see some examples of layouts Custom section can build.

Steps: In the theme editor (Customize) > Add section > Custom section > Save.

1. Custom section content

Click on Custom section > ADD BLOCK > choose the block you want to add.

block.gif

1.1. Col (Parent)

col.gif

Each Col (Parent) represents for one column. In this block, you can adjust it with many options below:

col1.gif
  • Item width for many devices: Desktop, Tablet, Mobile

  • Content align: You can align content to Left, Center or Right and Content align vertical center

  • Padding inner for many devices: Desktop, Tablet, Mobile

  • Background image/background color for this column

1.2. Other blocks (Child)

  • Text: you can add a text to the banner image and you can adjust text with many options like Font family, Font size, color, etc.

  • Button: This block allows you to create a button for the banner, you can customize this button with many options like add a link, style, effect, color, etc.

  • HTML: you can add a HTML codes

  • Image (Child): With this block, you can add a Image(child) inside the Image(parent) and you can adjust the Image(child) more creatively.

  • Countdown timer: This block help you add the countdown timer and set it very easily just by adding the date countdown into.

  • Newsletter: you can add a subscribe form here.

  • Space HTML: This block allows you to create a separator line for this section.

  • Banner with product: you can add a banner with a product inside the banner.

You can refer to this video to know more about these blocks:

2. How to configure the Custom section?

CONTENT OPTIONS

  • Space horizontal/vertical items: You can set the space between items by horizontal/vertical. Moreover, you can choose different spaces for many devices: Desktop, Tablet, Mobile.

2023-06-24_11-03-38.gif

DESIGN OPTIONS

Please follow this guideline to config Layout, Background, Margin/Padding for the section.

[Private Offer] EComposer Partner Plan

ecomposer.jpg
Exclusively for The4 users, when you bougth any theme from us, you can get Ecomposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:

  • FREE 100% EComposer Standard plan for 6 months (save you $114)
  • Build ANY Shopify pages: Landing page, Sale Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to your theme with ease
  • 100+ professtional, stunning designer-made templates
  • Build pages with a love drag-drop editor, no coding required

How to claim offer. Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject "Theme name+EComposer" to upgrade for free

Ecomposer1.jpg
Cheers, The4.

We highly recommend Shopify apps from our partners.

We uses cookies to ensure you get the best experience on our website.