Appearance
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.
|
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. |