> For the complete documentation index, see [llms.txt](https://bigstart.gitbook.io/amber-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bigstart.gitbook.io/amber-documentation/content-sections/image-with-products-gallery.md).

# Image with products gallery

<figure><img src="/files/EvcdslWdMhqnCCIy3CL4" alt=""><figcaption></figcaption></figure>

The main settings in the section are the ones listed [here](/amber-documentation/content-sections/common-settings.md). The additional settings are listed below.

The other section settings are listed below.

* **Flip image and text positions** -- This checkbox flips the position of the big image and the slider.

### Media

* **Aspect ratio for mobile** -- Set the mobile image aspect ratio. For desktop the size of the image is coming from the height of the section (incl. the heading, subheading, slider, etc.)
* **Image - Desktop** -- Set the image used for desktop. Usually, for best fit, use a vertical image. You can set its focal point if needed
* **Image - Mobile** -- Set a separate mobile image. If the mobile image is missing, then the one from desktop will be shown on mobile devices

### Text content

#### Text

<figure><img src="/files/GwLvsNB6uZsycrF1sb1R" alt=""><figcaption></figcaption></figure>

You have full control over the heading, subheading and button using the settings from the screenshot above.

#### Products

The products in the slider come from the `Collection` field.

You can prepare a specific collection and assign the needed products in it or you can simply use an already prepared collection.

From the `Products limit to show` field, you can limit the number of visible products.

### Slideshow

The slideshow can autoplay by checking the `Autoplay` checkbox.\
You can specify the interval between the slides from the `Slideshow Interval` setting.