Logo

The Logo block is a versatile feature designed to display your store's logo within a theme. It offers customization options to control the logo's appearance and behavior, making it adaptable to various design needs. This block can be placed in the "Footer navigation" and "Main navigation" sections, providing flexibility in its integration across your site.

Key settings include the ability to upload a logo image, adjust its maximum width, and control its visibility on different devices. The Logo block can fill available space or be centered within its section, particularly on desktop views, ensuring a cohesive and professional look.

Practical usage examples include using the Logo block in the "Main navigation" section to prominently display your brand logo at the top of your site. In the "Footer navigation" section, it helps maintain brand visibility at the bottom of your site. Additionally, the visibility settings allow you to hide the logo on mobile devices if space is limited, ensuring a clean and uncluttered mobile experience.

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.