Hero logo

This guide describes setting up the Hero logo section.

Use the section to display a custom logo on your store's pages with text, or by using an image file from Shopify's free library or your store's media library.

The previous image shows a Hero logo section at the top of a store's home page. In the bottom right, part of the Theme editor section menu is displayed. The menu's Logo image selector contains the image that's applied as the section's custom logo.

For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks.

Set up a Hero logo section

To set up a Hero logo section:

Go to Customize theme.
In Theme editor, at the top of the page, select the Home page template.
Note
By default, Theme editor displays the Hero logo section in the Header area of a page. In Theme editor, with the exception of Checkout, Password, and Gift card pages, you can add/remove the section to/from the Header and Footer areas of any page.
From the side menu, select Hero logo.
Select a setting described in the following table.

Setting name	Description
Home page only	Select the Home page only checkbox to turn on/off displaying the section on the home page only.
Plain text > Mobile font size scale	Adjust the Mobile font size scale slider to set a font size for the section's text on mobile display devices. The minimum value is `-2` and the maximum is `7`.
Plain text > Desktop font size scale	Adjust the Desktop font size scale slider to set a font size for the section's text on desktop display devices. The minimum value is `-2` and the maximum is `10`.
Custom logo > Logo image	Use the following Logo image selector options to set up a custom logo inside the section. Adding a custom logo overrides your plain text or default logo settings. To upload an image, choose Select image, and then choose an image file to upload. Refer to Shopify help: Uploading and managing files. To add an image from your store's media library, choose Select image, and then select an image file to add. To add an image from Shopify's free image library, choose Explore free images, and then select an image file to add. To display an image from a dynamic source, select Change > Connect dynamic source, and then choose a metafield to add. Refer to Shopify help: Metafields.
Custom logo > Logo image > Connect dynamic source	To display an image from a dynamic source, select the Connect dynamic source icon beside the Logo image selector, and then choose a metafield to add. Refer to Shopify help: Metafields. Adding a custom logo overrides your plain text or default logo settings.
Layout > Alignment	Use the Alignment options to position the section's content to the Left, Center, or Right.
Layout > Logo max width	Adjust the Logo max width slider to set a maximum width for logos the section. The minimum slider value is `10 %` or percent, and the maximum value is `100 %`.
Overlay > Enable overlay	Select the Enable overlay checkbox to turn on/off overlay mode for the section. Enabling this setting places the Hero logo section on top of the first section on the page.
Overlay > Overlay offset	Adjust the Overlay offset slider to specify a size for the section's overlay area. The slider ranges between `0 px` and `500 px` or pixels. To use this setting, set the Enable overlay checkbox to `on`.
Overlay > Position underneath first section	Select the Position underneath first section to turn on/ off "first section transparency" mode. With this option enabled, the first section below the Hero logo is displayed using a transparent background.
Color > Color scheme	Use the Color scheme options to select a color scheme for the section. Refer to Colors.
Color > Disable transition	Select the Disable transition checkbox to turn on/ off overriding any color transitions set in the section's theme settings. Setup defaults for this setting in Theme Settings > Colors > Transitions.
Spacing > Remove top padding	Select the Remove top padding checkbox to add/remove the spacing (padding) that's displayed above the section. Refer to W3 Schools: CSS Padding.
Spacing > Remove bottom padding	Select the Remove bottom padding checkbox to add/remove the spacing (padding) that's displayed below the section. Refer to W3 Schools: CSS Padding.
Theme settings	If available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSS	Select Custom CSS. In the box, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS.
Remove section	Select Remove section to delete the section from the current page.

Hero logo ​

Set up a Hero logo section ​

Hero logo

Set up a Hero logo section