Logo

Overview

The Logo block enables you to display your branding prominently within navigation or footer areas. You can upload a logo image, manage sizing and alignment, and control its visibility on different devices. This allows you to maintain a polished and consistent brand presence across your store’s main navigation touchpoints.

⚠️ Important: The Logo block is critical for brand recognition and adapts easily to different layouts and devices within your navigation.

Available in sections

The Logo block can be used in the following sections:

1. Footer navigation

2. Main navigation

Key components and functionality

Introduction

The Logo block is designed to help you showcase your brand’s logo within navigation or footer sections. It offers flexibility with image choice, sizing, alignment, and responsive display settings. This ensures your logo fits seamlessly alongside your navigation content on any device, delivering a smooth brand experience.

Logo image

Upload or select your logo image with the image picker. Choosing a high-quality logo ensures a clear and professional appearance across all screen sizes.

Logo width settings

Control your logo’s width independently for both desktop and mobile devices. Maintaining suitable proportions keeps your navigation looking sharp and balanced.

Maximum image width (desktop)

Set the maximum logo width for desktop screens.

1. Minimum value is 0 px.

2. Maximum value is 400 px.

3. Step value is 4 px.

4. Default value is 80 px.

This setting helps your logo remain visually organized within desktop navigation layouts.

Maximum image width (mobile)

Adjust the maximum logo width for mobile screens.

1. Minimum value is 0 px.

2. Maximum value is 400 px.

3. Step value is 4 px.

4. Default value is 80 px.

Specifying a dedicated mobile width maintains logo legibility and ensures your navigation stays tidy on small screens.

Layout settings

These settings let you choose how your logo aligns and interacts with available horizontal space, supporting a responsive layout as your design or device width changes.

Fill available space

Control whether your logo stretches to fill the horizontal space available.

1. Enable: The logo fills all available space.

2. Disable: The logo stays within its set maximum width.

3. Default behavior is disabled.

This setting is useful for fully integrated or minimalist navigation designs.

Alignment (desktop)

Choose how your logo aligns within the navigation bar on desktop devices.

1. Left (default)

2. Center

3. Right

4. Full width

Selecting the right alignment helps your navigation design stay consistent and purposeful.

Alignment (mobile)

Control the logo’s alignment for mobile navigation menus.

1. Left (default)

2. Center

3. Right

4. Full width

Adjusting alignment on mobile improves both branding and usability for all visitors.

Visibility settings

These controls allow you to tailor your logo’s presence based on device, balancing effective branding with your design needs.

1. Do not hide (default)

   1. Logo is visible on both desktop and mobile.

2. Hide on desktop

   1. Logo is visible only on mobile devices.

3. Hide on mobile

   1. Logo is visible only on desktop devices.

💡 Tip: Leverage visibility controls to present your logo where it adds the most value and minimizes clutter.

Usage notes

1. Responsive scaling: Adjust both desktop and mobile widths for optimal logo appearance on all screens.

2. Performance: Use optimized PNG or SVG files to promote fast loading and crisp visuals.

3. Accessibility: Always provide descriptive alt text with your logo to support accessibility best practices.

4. Alignment and spacing: Experiment with fill and alignment settings to find the most balanced and readable navigation.

💡 Tip: Preview your navigation on various devices and backgrounds to ensure your logo remains recognizable and cohesive throughout your store.

🚧 Caution: Oversized logos or missing alt text can negatively impact your user experience, performance, and accessibility. Carefully select your settings for the best practical results.