# Slideshow

Showcase your brand and products with Pipeline's powerful slideshow section. Customize your slides to promote products on both mobile and desktop devices.

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FnetCzukQQ6I2h6j2xdBa%2FSS%20Pipeline%20main.png?alt=media&#x26;token=c35dacee-3fd5-4774-9e8b-237b1574c2c6" alt=""><figcaption><p><strong>Desktop image setting</strong></p></figcaption></figure>

### Mobile image

Portrait images can be used for mobile devices. Each slide can have a different mobile image:

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FK8B8uu0jw1NQoyyV5Huf%2FPP%20SS%20Mobile%20image.jpg?alt=media&#x26;token=aae8ec5e-c603-4278-b3fc-34e48f4cbd6c" alt=""><figcaption><p><strong>Mobile image setting</strong></p></figcaption></figure>

> ***Tip***: Use the ***Image height*** setting to view the entire image without any cropping. Especially helpful for mobile devices. Combined with turning off Parallax images in the Theme settings -> Layout under Animations will provide the best results.&#x20;

### Prioritize image loading

When checked, the first image of the slideshow will be prioritized ahead of other theme files. This ensures there's an image displaying in the first fold when shoppers first visit:

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FLhJIapq8da75qYme6rRp%2FPrioritize%20image%20load.jpg?alt=media&#x26;token=34f6c6b7-4f4c-4270-a80e-ed379d7c1aad" alt=""><figcaption><p><strong>Section settings</strong></p></figcaption></figure>

> ***Tip:*** Check this box for only the **first** section on your homepage. Other sections on the page should remain unchecked.&#x20;

### Multiple buttons

Add the buttons block and configure up to three buttons placed horizontally:

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FQo3tkir3KeIa7zAbkZuj%2Fmultiple%20buttons.jpg?alt=media&#x26;token=92a1f014-1c8e-4dde-8854-5f8bf933e60f" alt=""><figcaption></figcaption></figure>

### Transparent header

Blend your banner image with the header area:

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FZaT2L83W298502ifCvON%2FSample%20pipeline%20header.jpg?alt=media&#x26;token=b740ac66-059d-4696-93ca-62d2a5de3342" alt=""><figcaption></figcaption></figure>

Set the Padding top range slider to 0px (none) for best results:

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FFSXb0Fz3mm1hD1EqjbJH%2Fslideshow%20top%20gap.png?alt=media&#x26;token=7a9ef859-cfa0-484e-9235-4c6228acd755" alt=""><figcaption></figcaption></figure>

In the Header section settings, enable Transparent header on the homepage:

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FmNQ1ThtLeLEjuP9OsLUr%2FPipeline%20transparent%20header%20settings%20B.png?alt=media&#x26;token=954f442e-fb51-494b-bb94-b04dd9549d2a" alt=""><figcaption></figcaption></figure>

Also add an Alternate logo that works best with your images. In our example, we've added a white alternate logo. The regular logo is black.&#x20;
