Impact logo
Header
The Impact logo displays a prominent logo image below the header on the home page. The impact logo hides when the page is scrolled down.
Why is there extra space around the logo?
You can reduce the amount of padding
Make sure to crop your image to avoid unwanted space around the logo. You can use Shopify's built-in image editor ↗ to crop, resize, and even remove image backgrounds.
You can also
Hide impact logo
To remove the impact logo from your home page, click the Hide (eye) icon on the section.
Set up impact logo
Open the Impact logo section and upload your image with the following recommendations:
File format
Use .png, .svg, or .webp image with a transparent background.
Image width
Use images with a minimum width between 250px and 1200px. For full width impact logo, we recommend logo images that are wider than they are tall.
Logo color
For the Transparent impact logo, you may want to change the logo color to contrast with the underlying section image.
Make sure to crop your image to avoid unwanted space around the logo. You can use Shopify's built-in image editor ↗ to crop, resize, and even remove image backgrounds.
Choose visibility for screen sizes
The impact logo can appear on all screen sizes or on large screens (desktop and tablet) only.
Click Impact logo section to find settings
Visibility
Choose to display on all screen sizes or only large screens.
On all screen sizes Default On large screens
Set image width
By default, the impact logo spans the full width of the screen. For smaller logos, you can set a Custom width between 250px to 1200px.
Click Impact logo section to find settings
Image width
Set the logo width to the page width, full width, or a custom width.
Page width Full width Default Custom width
Custom width
Set the maximum width of the impact logo.
250px - 1200px Default: 500px
Change alignment and padding
For logo images that are below full width, you can choose to align the impact logo to the left, center, or right of the screen. You can also adjust the padding above and below the impact logo.
Click Impact logo section to find settings
Alignment
If logo image is less than full width, position the logo either to the left, center, or right.
Left Center Default Right
Top padding
For desktop and mobile, add spacing above the impact logo.
0 - 80px Default: 40px
Bottom padding
For desktop and mobile, add spacing below the impact logo.
0 - 80px Default: 40px
Disable transparent impact logo
By default, the transparent impact logo overlays the section at the top of the page.
The transparent logo requires a full-width Slideshow at the top of the page.
Important
Set Section width to Full width and Top padding to 0px. Click the section and scroll to the bottom the find the settings.
Click Impact logo section to find settings
Enable transparent impact logo
When enabled, the impact logo overlays the top section to display the full height of full width media sections.
Default: Enabled
Change animation style
By default, the impact logo is animated with a parallax effect and fade effect when scrolling down the page. You can disable the parallax effect and change the direction of the fade effect.
Click Impact logo section to find settings
Enable parallax on scroll
When enabled, the impact logo moves at a different speed than the page when scrolling. This parallax effect creates an appearance of depth and perspective.
Default: Enabled
Fade effect on scroll
Choose how the impact logo fades when scrolling down the page.
Full fade Default Bottom to top fade Top to bottom fade Disabled
Last updated
Was this helpful?