Unicorn Shopify Theme
  • Getting Started
  • Demo
  • Section Groups
    • Header
      • Menu icons
      • Badges
      • Popup menu
      • Image with button (Mobile)
      • Featured promotion (Mobile)
      • Contacts
    • Cart drawer
    • Search popup
    • Mega menu
      • Menu
      • Image with button
      • Featured promotion
      • Custom HTML
      • Empty column
      • Badges
    • Footer
      • Menu
      • Text
    • Popups
  • Dynamic Theme Sections
    • Before/after image
    • Blog posts
    • Brand list
    • Collage
      • Image
      • Collection products
      • Video
    • Collage of images
      • Image
      • List item
    • Collection list
    • Collection slider
    • Contact form
    • Countdown timer
    • Custom Liquid
    • Email signup
      • Heading
      • Subheading
      • Email form
    • FAQ
    • Featured collage
      • Product
      • Image
    • Featured collection
    • Featured collections
    • Featured product
    • Featured promotions
      • Content, Text on image
      • Content, Text below the image
      • Content, Button on image
    • Image with text overlay
      • Second image
      • Mobile settings
      • Heading
      • Text and Custom HTML
      • Buttons
    • Image gallery
    • Lookbook
    • Map
    • Media
    • Multicolumn
    • Page
    • Popup
      • Image
      • Text
      • Newsletter form
      • Buttons
      • Social media
      • Time countdown
      • Collection
      • Promotional code
    • Reels
    • Rich text
      • Heading
      • Text
      • Button
    • Slideshow
    • Tags
    • Testimonials
    • Ticker
  • Page Categories
    • Products
      • Product information
      • Product recommendations
    • Collections
      • Collection banner
      • Product grid
    • Collections list
    • Cart
    • Blogs
    • Blog posts
    • Search
    • Password
      • Email signup
    • 404 page
  • Theme Settings
    • Top bars
    • Header and Logo
    • Colors
    • Typography
    • Layout
    • Styles
    • Product
    • Variant picker
    • Social media
    • Search
    • Favicon
    • Currency format
    • Cart
    • Popups
    • Performance
    • Advanced settings
    • Custom CSS
    • Theme style
  • SVG Icons
  • FAQ
    • How to customize Metafields
    • How to group product images by variants?
    • How to create a template?
    • How to create webpages?
    • How to set up filters?
    • Understanding of metaobjects and their use in a store
Powered by GitBook
On this page
  • Layout
  • Content
  1. Page Categories
  2. Collections

Collection banner

The "Collection banner" section is valuable if you need to display a title, banner, and a collection description from your admin on collection pages.

PreviousCollectionsNextProduct grid

Last updated 1 month ago

Tip: Drag and drop the section to the desired position on a page. If the section is unnecessary, you can hide it. Hover over a section title and click the eye icon to hide the section.

Before proceeding with customization of the section, convince you have applied the required settings in Shopify admin -> Products -> Collections. Find the details in the initial .

Layout

To add a divider between sections, use the "Dividing line" to set the position: "Top", "Bottom", or "Both". The dividing line will be hidden once you use the option "None".

On the "Top spacing" and "Bottom spacing" scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

Content

To show a description on collection pages, tick the "Show collection description" option.

Enable "Show collection image" to showcase a collection image added in the admin. The recommended image aspect ratio is 16:9. Learn more about aspect ratio .

The collection title and description can be set to the "Left" or "Center" in the "Text align" picker. This option works for desktop and mobile.

If you need to set up the color of the title, use the "Heading color" picker. Here you can paste the hex code to the related field or choose the color using the paint pallet. The color settings will be used for both desktop and mobile.

The color of the description can be set in the "Description color" picker. The color you apply for the item will be used for a desktop and mobile.

In the following examples, you can view how the section might display on desktop and mobile:

documentation
here