Logo

Overview #

The Logo block is designed to display a logo image within a theme. It offers various customization options to control its appearance and behavior. This block can be placed in the "Footer navigation" and "Main navigation" sections, allowing for flexible integration within the theme's layout.

Key components and functionality #

Logo block

The Logo block is intended to display your store's logo. If no logo is set, it will default to showing your store name.

Settings

1. Logo Image

   • Type: Image Picker
   • Label: Logo
   • This setting allows you to upload and select an image to be used as the logo.

2. Maximum Image Width

   • Type: Range
   • Label: Max image width
   • Info: Setting 0 will stretch the full available width
   • Min: 0 px
   • Max: 400 px
   • Step: 4 px
   • Default: 80 px
   • This setting controls the maximum width of the logo image, allowing you to adjust its size to fit your design needs.

Layout settings

These settings allow you to adjust how the logo is displayed within its section, particularly on desktop views.

1. Fill Available Space

   • Type: Checkbox
   • Label: Fill available space
   • This option, when enabled, allows the logo to fill the available space within its container.

2. Show Centered

   • Type: Checkbox
   • Label: Show centered
   • This setting centers the logo block within its section on desktop views. Only one block per section should have this setting enabled.

Visibility settings

These settings control the visibility of the logo block on different devices, providing flexibility for responsive design.

1. Visibility
   • Type: Radio
   • Label: Visibility
   • Options:
     • Do not hide
     • Hide on desktop
     • Hide on mobile
   • Default: Do not hide
   • This setting allows you to control the visibility of the logo block on different devices.

Available in sections #

• Footer navigation
• Main navigation

Usage examples #

1. Basic Logo Display: Use the Logo block in the "Main navigation" section to prominently display your brand logo at the top of your site. Adjust the maximum image width to ensure it fits well within your header design.

2. Footer Branding: Place the Logo block in the "Footer navigation" section to maintain brand visibility at the bottom of your site. Enable the "Fill available space" option to ensure the logo scales appropriately with the footer layout.

3. Responsive Design: Utilize the visibility settings to hide the logo on mobile devices if space is limited, ensuring a clean and uncluttered mobile experience.

By configuring these settings, you can effectively integrate your logo into various sections of your site, enhancing brand recognition and maintaining a cohesive design across different devices.