This customization displays a banner image at the top of the Horizon theme's drawer menu (hamburger menu). The banner image and link can be configured from the theme editor's "Drawer Banner" settings, and the configuration is preserved through theme updates. CSS loading uses the custom.globals.liquid snippet pattern, keeping changes to theme.liquid to a single line for a safe implementation.
Result
Tapping the hamburger icon opens the drawer, displaying a banner image above the menu items. Adding a destination link allows you to direct customers to coupon pages or featured pages.
Theme Editor Settings
After implementation, you can set the image and link destination from the "Drawer Banner" section in the theme editor's Menu block without touching any code.
Implementation Steps
5 files need to be created or modified. The only change to theme files is a single line in theme.liquid — all other changes are new files or additions to existing files.
① layout/theme.liquid — Add 1 line at L30
Add the custom.globals render tag immediately after the stylesheets snippet. This is the only change to theme files.
② snippets/custom.globals.liquid — Create new file
An intermediary snippet that loads custom.css and custom.js. This pattern keeps the change to theme.liquid to a single line, while allowing future customizations to be managed through this snippet.
③ assets/custom.css — Create new file
Defines the banner styles. border-radius uses a theme CSS variable to follow the theme's corner radius setting.
④ blocks/_header-menu.liquid — Add schema settings
Add banner image and link settings to the end of the settings array (immediately after drawer_dividers).
⑤ snippets/header-drawer.liquid — Add banner display code
Insert the banner display code immediately after the close button (</button>), just before the <nav> tag. When a link is set, it wraps the image in an <a> tag; otherwise it shows the image without a link.
Translation Keys
Add translation keys for t:content.drawer_banner / t:settings.drawer_banner_image / t:settings.drawer_banner_link to locale files.
locales/en.default.schema.json — Add to content / settings objects.
locales/ja.schema.json — Add to content / settings objects in the same way (translation key values are included in the code).
Note: About the custom.globals.liquid Pattern
While there are several ways to add custom CSS to a theme, writing <link> tags directly in theme.liquid creates diffs that are hard to manage during theme updates. By using a custom.globals.liquid snippet as an intermediary, you can limit changes to theme.liquid to a single line: {%- render 'custom.globals' -%}. If you want to add custom JS in the future, you only need to modify custom.globals.liquid.
Note: About the menu-drawer__animated-element Class
The menu-drawer__animated-element class is added to the banner element to apply the Horizon theme's standard drawer animation (fade-in or slide-up) to the banner as well. --menu-drawer-animation-index: 0 sets the animation order to first (0th), so the banner animates before the menu items.
