Preview Section | Password = Chingi
1 4

Version: 2.5.2

Latest Update:

ADVANCED BANNER | DRAWER OPENS ON CLICK | FULL WIDTH | MOBILE & DESKTOP

ADVANCED BANNER | DRAWER OPENS ON CLICK | FULL WIDTH | MOBILE & DESKTOP

$5.00 USD
$5.00 USD
Sale Sold out
Taxes included. Download Available in less than 2 minutes

Drawer Banner (Desktop & Mobile)

This section displays a fixed-height banner with a toggleable bottom-left drawer of collections and an optional floating heading.

Key features

  • Clickable banner & button — clicking the image or the “Shop Now” button toggles the drawer.
  • Fixed banner height — banner remains consistent regardless of image dimensions.
  • Collection drawer — merchant-selected collections appear in a sliding panel at the bottom-left.
  • Optional floating heading — customizable text overlay with position, font, color, and margin controls.
  • Responsive design — adapts height, toggle button size, and drawer width for mobile devices.

Editable settings

  • Image picker
  • Image alt text
  • Show floating heading (checkbox)
  • Floating heading text
  • Floating heading color
  • Floating heading font family
  • Floating heading font size
  • Floating heading margins (top, right, bottom, left)
  • Toggle button text
  • Collection blocks (select up to 10 collections)

How to add the section

  1. In your Shopify admin, go to Online Store > Themes, then click the kebab menu (⋮) next to your theme and choose Edit code.
  2. In the sections folder, click Add a new section.
  3. Name the file: drawer-banner.liquid and click Create section.
  4. Copy the entire code from this repository and paste it into drawer-banner.liquid, replacing any starter code.
  5. Click Save.
  6. Open the Theme Editor (Customize), click Add section, and choose Drawer Banner.
  7. Configure your image, text, floating heading options, and select collections, then save the theme.
View full details