Fluorescent
Eclipse
Eclipse
  • Get started
    • Migrating to Eclipse
    • Theme license
  • FAQs
  • Changelog
    • Update your theme
  • General
    • Editing themes
      • Dynamic content with metafields
      • Edit default theme content
      • Multiple languages
      • Unique content for markets
      • Customizing your site
      • H1 heading tags
    • Image guide
      • Web ready photography
      • Image sizes
      • File formats
      • Theme image settings
    • SEO for Shopify
    • Online store speed
    • Accessibility
  • Theme settings
    • Theme settings
      • Social media
    • Theme styles
    • Fonts
    • Colors
  • Corner rounding
  • Pages
    • Page templates
      • Using templates
      • Customize page styles
      • Create and assign templates
    • Demo layouts
    • About page
    • Home page
    • Blog page
    • Blog post
    • Contact page
    • Password page
    • Search page
  • Sections
    • Sections
      • Using sections
      • Content blocks
    • Blog posts
    • Collapsible content
    • Collection list
    • Contact form
    • Featured collection
    • Featured links
    • Feature product
    • Grid
    • Icon with text columns
    • Image hero
    • Image with text
    • Multi-column
    • Newsletter
    • Rich text
    • Scrolling content
    • Shop the look
    • Shoppable feed
    • Slideshow
    • Video
    • Video hero
    • Video with text
    • Custom Liquid
  • Header
    • Announcement bar
    • Header
      • Layout and style
      • Logo
      • Transparent header
      • Mega menu
      • Language and Currency
    • Impact logo
    • Search
  • Footer
    • Footer
      • Image Text and Socials
      • Links block
      • Newsletter and Socials
      • Language and Currency
      • Custom Liquid
  • Products
    • Product listings
      • Product card styles
      • Sale and sold out badges
      • Quick shopping
    • Prices and currencies
    • Swatches
      • Use default colors
      • Use custom colors
      • Use custom images
  • Product pages
    • Product page
      • Gift card product
    • Media gallery
      • Media grouping
    • Product overview blocks
      • Description
      • Price
      • Buy buttons
      • Collapsible row
      • Complementary products
      • Custom option
      • Featured icon with text
      • Icon with text
      • Inventory status
      • Image block
      • Popup block
      • Product rating
      • Text block
      • Share icons
      • Custom Liquid
    • Variant selector
      • Info popup
    • Sticky add-to-cart
    • Sibling products
    • Product recommendations
  • Collections
    • Collection page
      • Banner
      • Product grid
      • Promotion tiles
      • Filters and sorting
    • Collection list page
  • Cart
    • Cart
    • Free shipping bar
    • Cross sells
  • Popups
    • Popups
  • Support
    • Support policy
    • Shopify vs Theme issues
    • Store access requests
  • Advanced
    • Custom CSS
    • Custom fonts
Powered by GitBook
On this page
  • Hide impact logo
  • Set up impact logo
  • Choose visibility for screen sizes
  • Set image width
  • Change alignment and padding
  • Disable transparent impact logo
  • Change animation style

Was this helpful?

  1. Header

Impact logo

Header

Last updated 5 months ago

Was this helpful?

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

Choose visibility for screen sizes


The impact logo can appear on all screen sizes or on large screens (desktop and tablet) only.

If your image is taller than wide, you may want to show the logo on large screens only to keep the top section visible on mobile screens.

Click Impact logo section to find settings

Setting
Description
Options

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.

We recommend setting the image width option to match the actual pixel width of the image.

Click Impact logo section to find settings

Setting
Description
Options

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

Setting
Description
Options

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.

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

Setting
Description
Options

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

Setting
Description
Options

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

Make sure to crop your image to avoid unwanted space around the logo. You can use to crop, resize, and even remove image backgrounds.

The transparent logo requires a full-width at the top of the page.

Shopify's built-in image editor ↗
Slideshow
Shopify's built-in image editor ↗