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

![](/files/TlNfDXifR4JNa1KorBg0)<br>

You can also&#x20;

</details>

<figure><img src="/files/VChA2KNc6t2N8dkU6J6f" 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="/files/FQyPcmlmVTw5tFXPFm58" 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.

![](/files/TlNfDXifR4JNa1KorBg0)<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="/files/puQB2HBsWoWy5BpEhAjr" 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="/files/n9LCCNSNWL4kbN71aSrU" 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](/eclipse/sections/slideshow.md)  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="/files/ML2K951gbJcF4uze5N66" 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/eclipse/header/impact-logo.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.