# Impact logo

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.

<details>

<summary>Why is there extra space around the logo?</summary>

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 <mark style="color:blue;">↗</mark>](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/media-editor#crop-an-image) to crop, resize, and even remove image backgrounds.

![](https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2Fv6Ld1kqlXc5ujnA0hhUJ%2Fimpact-logo-crop.png?alt=media\&token=2b9b65c8-b915-4cd1-9f4e-2877b610ffb2)<br>

You can also&#x20;

</details>

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FWMrCzBvQkJT8WxyeyxNg%2Fimpact-logo.png?alt=media&#x26;token=8272a677-6c77-4845-89bf-82a6a43163a9" alt=""><figcaption></figcaption></figure>

## Hide impact logo

***

To remove the impact logo from your home page, click the **Hide** (eye) icon on the section.

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FGor7uxFctNfxxVsSxnBF%2Fimpact-logo-hide.png?alt=media&#x26;token=0761de6c-a1c7-4d51-8af9-0a054a87d945" alt=""><figcaption></figcaption></figure>

## Set up impact logo

***

Open the **Impact logo** section and upload your image with the following recommendations:

<table data-header-hidden><thead><tr><th width="198"></th><th></th></tr></thead><tbody><tr><td><strong>File format</strong></td><td>Use <em><strong>.png</strong></em>, <em><strong>.svg</strong></em>, or <strong>.</strong><em><strong>webp</strong></em> image with a transparent background<strong>.</strong></td></tr><tr><td><strong>Image width</strong></td><td>Use images with a minimum width between <strong>250px</strong> and <strong>1200px.</strong><br><br>For <strong>full width impact logo</strong>, we recommend logo images that are wider than they are tall. </td></tr><tr><td><strong>Logo color</strong></td><td>For the <strong>Transparent impact logo</strong>, you may want to change the logo color to contrast with the underlying section image.</td></tr></tbody></table>

{% hint style="info" %}
Make sure to crop your image to avoid unwanted space around the logo. You can use [Shopify's built-in image editor <mark style="color:blue;">↗</mark>](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/media-editor#crop-an-image) to crop, resize, and even remove image backgrounds.

![](https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2Fv6Ld1kqlXc5ujnA0hhUJ%2Fimpact-logo-crop.png?alt=media\&token=2b9b65c8-b915-4cd1-9f4e-2877b610ffb2)<br>
{% endhint %}

### Choose visibility for screen sizes

***

The impact logo can appear on **all screen sizes** or **on large screens** (desktop and tablet) only.&#x20;

{% hint style="info" %}
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.
{% endhint %}

&#x20;

`Click Impact logo section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="318">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Visibility</mark></td><td>Choose to display on all screen sizes or only large screens.</td><td><strong>On all screen sizes</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>On large screens</strong><br></td></tr></tbody></table>

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

{% hint style="info" %}
We recommend setting the **image width** option to match the actual pixel width of the image.
{% endhint %}

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2Fj3QWB8mvhvCf1WfHtoGj%2Fimpact-logo-width.png?alt=media&#x26;token=49bca9ac-6087-46d6-9d4f-d4341a824ab1" alt="" width="563"><figcaption></figcaption></figure>

`Click Impact logo section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="318">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image width</mark></td><td>Set the logo width to the page width, full width, or a custom width.</td><td><strong>Page width</strong><br><strong>Full width</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Custom width</strong></td></tr><tr><td><mark style="color:blue;">Custom width</mark></td><td>Set the maximum width of the impact logo.</td><td><strong>250px - 1200px</strong> <br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 500px</mark></td></tr></tbody></table>

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

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FrmJhxhm83f7sx2RGPrh4%2Fimpact-logo-align.png?alt=media&#x26;token=52dd348e-2f2c-4b8a-add2-5cb8240ce773" alt="" width="563"><figcaption></figcaption></figure>

`Click Impact logo section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Alignment</mark></td><td>If logo image is less than full width, position the logo either to the left, center, or right.</td><td><strong>Left</strong><br><strong>Center</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Right</strong></td></tr><tr><td><mark style="color:blue;">Top padding</mark></td><td>For desktop and mobile, add spacing above the impact logo.</td><td><strong>0 - 80px</strong><br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 40px</mark></td></tr><tr><td><mark style="color:blue;">Bottom padding</mark></td><td>For desktop and mobile, add spacing below the impact logo.</td><td><strong>0 - 80px</strong> <br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 40px</mark></td></tr></tbody></table>

### 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](https://help.fluorescent.co/eclipse/sections/slideshow)  at the top of the page.

{% hint style="info" %}
**Important**

Set **Section width** to `Full width` and **Top padding** to `0px`. Click the section and scroll to the bottom the find the settings.

<img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FrM5pkdWRnhu8yVXRpPpP%2Fsection-spacing.png?alt=media&#x26;token=748f9b5c-df0a-47e5-a364-5e85806740a8" alt="" data-size="original">
{% endhint %}

`Click Impact logo section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable transparent impact logo</mark></td><td>When enabled, the impact logo overlays the top section to display the full height of full width media sections.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: Enabled</mark></td></tr></tbody></table>

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

&#x20;

`Click Impact logo section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable parallax on scroll</mark></td><td>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.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: Enabled</mark></td></tr><tr><td><mark style="color:blue;">Fade effect on scroll</mark></td><td>Choose how the impact logo fades when scrolling down the page.</td><td><strong>Full fade</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Bottom to top fade</strong><br><strong>Top to bottom fade</strong><br><strong>Disabled</strong></td></tr></tbody></table>