In-Menu Promotional Tiles

In-Menu Promotional Tiles let you showcase featured collections, sales, or brand messaging directly within the mega menu.

Features

• 4 Layout Types — Image-left, image-right, image-top, image-background
• Fully Responsive — Adapts to desktop, tablet, and mobile
• WCAG 2.1 AA Compliant — Accessible keyboard navigation and screen readers
• Lazy Loading — Images loaded on-demand
• Badge Support — Featured, New, Sale, Limited badges
• Translation Ready — Supports EN, FR, DE, ES, IT
• Golden Ratio Spacing — Mathematical precision for visual harmony

Quick Start

1. Enable In-Menu Promotions

Navigate to Theme Settings > In-Menu Promotions:

1. Check “Enable in-menu promotional tiles”
2. Choose default layout (image-left recommended)
3. Set promo tile width (33% default)
4. Configure colors to match your brand

2. Basic Implementation

{% render 'menu-promo-tile',
  title: 'New Collection',
  description: 'Explore our latest arrivals',
  image: collection.image,
  button_label: 'Shop Now',
  button_link: collection.url,
  layout: 'image-left'
%}

Parameters

Parameter	Required	Default	Description
title	Yes	-	Promotional headline
description	No	-	Supporting text
image	No	-	Featured image
button_label	No	-	CTA button text
button_link	Conditional	’#‘	CTA destination
layout	No	’image-left’	Layout type
background_color	No	’#F5F3F0’	Background color
text_color	No	’#1A2332’	Text color
accent_color	No	’#C9A961’	Accent/button color
badge_text	No	-	Badge text (e.g., “Sale”)
badge_style	No	’featured’	featured, new, sale, limited
show_on_mobile	No	false	Show on mobile devices

Layout Types

Image Left — Content right, image left. 40%/60% split. Best for text-heavy promotions.

Image Right — Content left, image right. 60%/40% split. Best for brand storytelling.

Image Top — Image above content, stacked vertical. Best for product launches.

Image Background — Full-width background with centered overlay text. Best for hero-style promotions.

Per-Menu Customization

Show different tiles for different menu items:

{% if link.handle == 'collections' %}
  {% render 'menu-promo-tile',
    title: 'New Collection',
    image: settings.menu_promo_image_1,
    button_link: '/collections/new-arrivals'
  %}
{% elsif link.handle == 'sale' %}
  {% render 'menu-promo-tile',
    title: 'Limited Time Offer',
    badge_text: 'Sale',
    badge_style: 'sale'
  %}
{% endif %}

Best Practices

Content

• Keep titles to 3-5 words
• Descriptions: 10-15 words max
• Use action-oriented button text (Shop Now, Learn More, View Sale)

UX

• Limit to 1-2 tiles per menu
• Keep mobile display disabled by default
• Use badges sparingly for important promotions

Performance

• Optimize images to under 200KB
• Store images on Shopify’s CDN
• Test on mobile to ensure tiles don’t slow menu interactions

Troubleshooting

Tiles not appearing: Check settings.enable_menu_promos is true, verify image assets are uploaded.

Layout issues: Clear browser cache, check for CSS overrides, verify container widths.