Concept Documentation
Open a Store for FREEExclusive OffersServicesResources
  • Exclusive Offers 🔥
  • Greeting + Useful Resources
  • Changelog
  • Overview
    • Full Theme Features
    • Online Store 2.0
      • Color Gradient
      • Dynamic Source
  • Installation
    • Install Theme 🎯
    • Update Theme 🔔
      • Update Theme
      • Theme Update Service
    • Install App
      • Product Review
      • Shopify Search & Discovery
      • Shopify Forms
  • Basic Configuration
    • Customer registration
    • Shipping rates
    • Location
    • Language
    • Payment
    • Currency
    • Navigation
  • Theme Settings
    • General
    • Colors
      • Color schemes
    • Typography
    • Multiple layouts
    • Animations
    • Buttons
    • Variant pills
    • Inputs
    • Product cards
    • Media
    • Dropdowns and pop-ups
    • Drawers
    • Badges
    • Social Media
    • Search behavior
    • Favicon
    • Currency format
    • Cart drawer
    • Login
    • Multitasking bar
    • Preloading screen
    • Custom CSS
  • Header Group
    • Demo & Settings Data
    • Advanced settings
      • Dropdown menu
      • Mega menu
    • Header
    • Announcement bar
      • Announcement
    • Link list
      • Text
      • Menu
    • Countdown Showcase Hero
      • Heading
      • Countdown
      • Button
      • Logo
  • Footer Group
    • Demo & Settings Data
    • Footer
      • Menu
      • Text
      • Email signup
      • Social
    • Footer bottom
  • Section
    • Section on every page
    • Before/after image
    • Blog posts
      • [Block] Tags
      • [Block] Heading
      • [Block] Content
      • [Block] Author
      • [Block] Date
      • [Block] Button
    • Brand list
      • [Block] Brand
    • Carousel images
      • [Block] Slide
    • Category list
      • [Block] Category
    • Category slide
      • [Block] Slide
    • Collapsible collection
      • [Block] Collapsible row
    • Collection banner
      • [Block] Collection
    • Collection video
      • [Block] Video
    • Collection with bundle
      • [Block] Slide
    • Collection with product
      • [Block] Slide
    • Coutdown showcase hero
      • [Block] Heading
      • [Block] Countdown
      • [Block] Button
      • [Block] Logo
    • Collage
      • [Block] Image
      • [Block] Text
    • Collapsible content
      • [Block] Collapsible row
      • [Block] Caption
    • Collection list
      • [Block] Collection
    • Contact form
      • [Block] Heading
      • [Block] Caption
      • [Block] Text
      • [Block] Button
    • Custom tab
      • [Block] Custom tab
    • Custom liquid
    • Custom section
    • Double banner
      • [Block] Heading
      • [Block] Button
    • Email signup
      • [Block] Heading
      • [Block] Email form
    • Featured blog post
    • Featured collection
      • [Block] Heading
      • [Block] Information
    • Featured collection tab
      • [Block] Tab
    • Featured images
      • [Block] Image
    • Featured product
      • [Block] Text
      • [Block] Title
      • [Block] Vendor
      • [Block] Price
      • [Block] Information
      • [Block] Inventory status
      • [Block] Countdown
      • [Block] Variant picker
      • [Block] Buy buttons
      • [Block] Description
      • [Block] Custom liquid
      • [Block] Product rating
      • [Block] Icon with text
    • Featured product tab
      • [Block] Tab
    • Icon with text
      • [Block] Icon with text item
    • Image banner
      • [Block] Heading
      • [Block] Text
      • [Block] Button
      • [Block] Link
      • [Block] Countdown
      • [Block] Thumbnail images
      • [Block] Image with text
    • Image gallery
      • [Block] Image
    • Image with collection
    • Image with text
      • [Block] Logo
      • [Block] Subheading
      • [Block] Heading
      • [Block] Text
      • [Block] Navigation
      • [Block] Link
    • Instagram
      • [Block] Image
    • Lookbook
      • [Block] Image
    • Map
    • Marquee
      • [Block] Marquee
    • Multicolumn
      • [Block] Column
      • [Block] Column: Text
    • Multiple options
      • [Block] Options
    • Outstanding reviews
      • [Block] Slide
    • Page
    • Product column
      • [Block] Collection
    • Quotes
      • [Block] Slide
      • [Block] Heading
    • Rich text
      • [Block] Heading
      • [Block] Caption
      • [Block] Text
      • [Block] Buttons
    • Slideshow
      • [Block] Slide
      • [Block] Lookbook
    • Slide banner
      • [Block] Slide
    • Spotlight products
    • Testimonial
      • [Block] Slide
    • Visual hightlight
      • [Block] Slide
    • Video
      • [Block] Heading
      • [Block] Text
      • [Block] Button
      • [Block] Countdown
    • Video with text
      • [Block] Caption
      • [Block] Heading
      • [Block] Text
      • [Block] Button
  • 🔥POPUP GROUP
    • Before you leave
    • Newsletter popup
      • Heading
      • Text
      • Newsletter
    • Recently purchased
    • Toolbar mobile
      • Search
      • Account
      • Cart
      • Wishlist
      • Link
  • Collection
    • Demo & Settings Data
    • Collection
      • Collection banner
      • Product grid
    • Storefront filtering
  • Collection List
    • Collection list page
  • Product
    • Demo & Settings Data
    • Product
    • Product information
      • Text
      • Title
      • Vendor
      • Price
      • Positive vibes bundle
      • Information
      • Inventory status
      • Countdown
      • Variant picker
      • Buy buttons
      • Description
      • Custom liquid
      • Collapsible row
      • Pop-up
      • Drawer
      • Product rating
      • Complementary products
      • Icon with text
      • Trust badge
      • Ask an expert
      • Size chart
    • Product recommendations
    • Pre-order product
    • Local pickup
  • Blogs
    • Demo & Settings Data
    • Blogs page
    • Blog posts
      • Side block: Products form collection
      • Side block: Collections list
      • Side block: Brands list
      • Side block: Posts list
      • Side block: Tags list
      • Side block: Image
      • Side block: Text
  • Article
    • Demo & Settings Data
    • Article page
    • Blog post
      • Featured image
      • Title
      • Rich text
      • Textarea
      • Image with text
      • Content
      • Lookbook
      • Quote
      • Tag
      • Side block: Products form collection
      • Side block: Collections list
      • Side block: Brands list
      • Side block: Posts list
      • Side block: Tags list
      • Side block: Image
      • Side block: Text
    • Comment
  • Cart
    • How to set up sections for Cart Page?
    • Items
  • Pages
    • How to create a page?
    • Default page
  • Other pages
    • Search page
    • Password page
      • Heading
      • Paragraph
      • Email form
    • 404 page
    • Knowledge base
      • Getting started in Shopify
      • Shopify help center
      • Shopify developers platform
    • FAQs
  • Theme Support
Powered by GitBook
On this page
  1. Section

Custom section

To add this section, please follow the below steps:

  1. From your Shopify admin, go to Online Store -> Themes.

  2. Find the theme that you want to edit, and then click Customize.

  3. Click Add section and choose "Custom section".

Layout

Setting
Description

Direction

Select the section width from the dropdown menu:

  • Vertical

  • Horizontal

Vertical on mobile

(Displayed if the Direction setting is set to Horizontal)

Select this checkbox to use a vertical on mobile for this section

Alignment

Set horizontal alignment for content inside section containers.

  • Left

  • Center

  • Right

  • Space between (Displayed if the Direction setting is set to Horizontal)

Position

Select desktop content position from the dropdown menu:

  • Top

  • Center

  • Bottom

  • Space between (Displayed if the Direction setting is set to Vertical)

Gap

Determines the row gap of link. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).

Size

Setting
Description

Width

Select the width from the dropdown menu:

  • Page

  • Full

Page width

(Displayed if the Width setting is set to Page)

Select the page width from the dropdown menu:

  • Narrow

  • Normal

  • Wibe

Height

Select the height from the dropdown menu:

  • Auto

  • Small

  • Medium

  • Large

  • Full screen

  • Custom

Custom height

Determines the maximum height of the image. Can be from 0% to 100%, in 1% arithmetic increments.

Appearance

Setting
Description

Color scheme

Select a color scheme to set the text and background colors for the section

Background media

Select the background media from the dropdown menu:

  • None

  • Image

  • Video

Borders

Select the background media from the dropdown menu:

  • None

  • Solid

Border thickness

(Displayed if the Borders setting is set to Solid)

Set the width of an input's four borders. Can be from 0px to 10px, increasing arithmetically of 1px (pixel).

Border opacity

(Displayed if the Borders setting is set to Solid)

Sets the opacity level for an input's four borders. Can be from 0% to 100%, increasing arithmetically of 1%.

Corner radius

Set the radius of the corners. Can be from 0px to 40px, increasing arithmetically of 1px (pixel).

Background overlay

Select this checkbox to use a background overlay for this section

Overlay color

(Displayed if the Enable overlay setting is turned on)

Set the background color.

Overlay style

(Displayed if the Enable overlay setting is turned on)

Select the gradient direction from the dropdown menu:

  • Solid

  • Gradient

Gradient direction

(Displayed if the Overlay style setting is set to Gradient)

Select the gradient direction from the dropdown menu:

  • Up

  • Down

Padding

Setting
Description

Top

Determines the height of the top inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).

Bottom

Determines the height of the bottom inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).

PreviousCustom liquidNextDouble banner

Last updated 2 days ago