Appearance
Hero logo ​
This guide describes the Hero logo section.
For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks.
Configure the Hero logo section ​
To configure your Hero logo section:
Go to Customize theme.
In Theme editor, at the top of the page, use the dropdown to select Home page.
Note
The section can be added into the Header and Footer areas of any page, excluding the Checkout, Gift card, and Password pages.
To add the section into the current page, in the Header or Footer area, select Add section > Hero logo. Refer to Shopify help: Add a section.
From the side menu, select Hero logo.
Select a setting described in the following table.
| Setting name | Description |
|---|---|
| Home page only | Set the Home page only checkbox to on or off. |
| Plain text > Mobile font size scale | Adjust the Mobile font size scale slider between -2 and 7. |
| Plain text > Desktop font size scale | Adjust the Desktop font size scale slider between -2 and 10. |
| Logo > Logo image | Use the Logo image picker to select an image. |
| Layout > Alignment | Use the Alignment options to select Left, Center or Right. |
| Layout > Logo max width | Adjust the Logo max width slider between 10 and 100 percent. |
| Layout > Disable vertical spacing | Set the Disable vertical spacing checkbox to on or off. |
| Overlay > Enable overlay | Set the Enable overlay checkbox to on or off. |
| Overlay > Overlay offset | Adjust the Overlay offset slider between 0 and 500 pixels. |
| Color > Color scheme | Use the Color scheme selector to select a color scheme. |
| Color > Theme settings (link) | Follow the Theme settings link to open Theme editor's Color theme settings. Use the settings to edit the theme colors for your entire store. |
| Color > Use gradient for background | Set the Use gradient for background checkbox to on or off. |
| 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. |