> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt
> Use this file to discover all available pages before exploring further.

# Add a call to action with a moving picture gallery

> Set up Facet's call to action section with a heading, text and buttons beside two columns of pictures that drift as shoppers scroll the page.

The Facet call to action section pairs a short message and buttons with a gallery of up to five pictures in two columns. On large screens the columns drift in opposite directions as shoppers scroll, which draws the eye to the message. This page covers the pictures, the scroll motion and the blocks you can add.

![The Call to action section as it appears on the Facet demo storefront.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/call-to-action/call-to-action-overview.jpg?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=35443ff575ec5a780e831a753dd3085a)

## What this section controls

* The five pictures in the gallery.
* How far the picture columns move while the page scrolls.
* The heading, text and buttons beside the gallery.

## Getting started

**1. Open the Theme Customizer**

In your Shopify admin, open **Online Store**, then **Themes**, and click **Customize** next to Facet.

**2. Add the section**

In the **Sections** panel, click **Add section** and choose **Call to action**. The section can't be added to the header or footer.

**3. Pick the pictures**

Click **Call to action** and choose **Image 1** to **Image 5**.

**4. Write the message**

Edit the heading, text and button blocks, and set each button's link.

![The theme editor with the Call to action section selected in the sidebar, its settings panel open on the left and the section highlighted in the preview.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/call-to-action/call-to-action-location.jpg?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=15a3022f5f639585558c81778b24a8fe)

## Section settings

### Images

![Theme editor sidebar showing the Call to action section settings: Images, Image 1, Image 2, Image 3, Image 4, Image 5.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/call-to-action/call-to-action-settings-1.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=c580dad3e52da1fcf7436fc4b1b7f83e)

![Theme editor sidebar showing the Call to action section settings (part 2, scrolled): Scroll motion, Common settings, Color scheme, Top padding, Bottom padding, Page width, and more.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/call-to-action/call-to-action-settings-2.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=40007777d81dc8789255f50f7d448401)

* **Image 1** and **Image 2**: the pictures in the left column of the gallery.
* **Image 3**, **Image 4** and **Image 5**: the pictures in the right column.
* **Scroll motion**: how far the picture columns drift as the section scrolls by, from 0 to 200 pixels. Default: 120. Set it to 0 to keep the columns still.

Every picture is cropped to the same upright shape. Until you choose a picture, a placeholder fills its place.

> [!NOTE]
>
> The scroll motion runs on screens 990 pixels wide and larger. On smaller screens, and for shoppers who have turned on reduced motion on their device, the columns stay still. The pictures are decorative, so screen readers skip them: put anything important in the text.

### Common settings

See [Common settings](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md) for details.

* **Color scheme**: the colors of the section.
* **Top padding** and **Bottom padding**: None, Small, Medium, Large (default) or Extra large.
* **Page width**: Narrow, Narrower, Fluid (default) or Full.

## Blocks

### Heading, text, button and group

The message beside the gallery is built from **Heading**, **Text**, **Button** and **Group** blocks. Use a **Group** to place several buttons side by side. Their settings are described on [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md).

On large screens the blocks sit to the left of the gallery. On phones they sit above it.

## Best practices

* **Fill all five pictures.** Empty slots show placeholders on your live store.
* **Use pictures with a centered subject.** The gallery crops every picture to the same upright shape.
* **Lower the scroll motion for busy pages.** A value around 60 pixels feels calmer when the section sits near other moving content.

## Related guides

> [card] [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md)
>
> Settings for the heading, text, button and group blocks.

> [card] [Animations](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/animations.md)
>
> Control the other motion effects in your store.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.