# Products

The settings here are applicable to the product page and product cards seen on:

* homepage collection and products sections
* collection page
* product page related/recommended products
* etc.

### Filter images

This settings allows you to show different sets of images per color INSTEAD of showing all images at once. Here is an example with a product having purple and green images.

<figure><img src="https://4207195275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp5czJlcYNU7vFLQkGMwL%2Fuploads%2FxUvmE7xP4EavMCLrKQ8f%2Fimage.png?alt=media&#x26;token=c1ffe1e1-3b5c-42f3-877f-653cf0293b26" alt=""><figcaption></figcaption></figure>

Then, once the green is enabled - it will hide all purple images and will show the green ones:

<figure><img src="https://4207195275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp5czJlcYNU7vFLQkGMwL%2Fuploads%2F5yP257cf7r8P5UIob7HF%2Fimage.png?alt=media&#x26;token=54f949c8-a6d7-4b99-8752-df0dd4eba8be" alt=""><figcaption></figcaption></figure>

To use this feature you firstly need to enable the `Filter images` setting. Then, you need to add some specific alt attributes to the product images. The format must follow the following pattern: `SEO Text|{option_name}:{option_value}`. For example: `Great T-Shirt - Front|color:Grey`.

Here a short video showing how this can be done in the admin area:

{% embed url="<https://youtu.be/i_WqP_H78po>" %}

### Product badges

<figure><img src="https://4207195275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp5czJlcYNU7vFLQkGMwL%2Fuploads%2FsP88X6TfAq561RdqRhkz%2Fimage.png?alt=media&#x26;token=53a31f50-2b76-4670-a662-962786521e1c" alt=""><figcaption></figcaption></figure>

**Disable badges** - this setting allows you to turn on/off the badges

**Disable sale badge** - this setting allows you to turn on/off the Sale badge only

**Border radius** - adjusting this will make the badges with rounded corners.

**NEW badge days** - the `New` badge is automatic and will be shown if the product was added within the number of days put in this field.

[Custom product badges](https://bigstart.gitbook.io/marble-documentation/global-features/custom-product-badges) - more details [here](https://bigstart.gitbook.io/marble-documentation/global-features/custom-product-badges).

### Product cards

**Round corners** - will make the product images with rounded corners

**Swap image on hover** - if enabled, on hover we'll show the second product image

**Media size** - with this option you can define the product cards' size. The options are: original (showing the image with its original size/ratio), landscape, square, 3:2, 4:3, 5:4. This way you can easily change the product cards ratio based on your photos.

**Crop image to media size** - defines if you prefer the image to be cropped or shown in full when image's ratio is different from the chosen Media size.

**Image alignment** - in case the image is cropped you can pick which part of the image to be in priority.

### Quick view

There are options for turning this on and off separately on desktop and mobile.

For desktop you can choose the button type:

* Text button - big button shown over the product
* Icon button - small eye icon shon in the bottom right corner on hover

### Quick buy

Quick buy functionality can be turned separately on/off on desktop and mobile.

<figure><img src="https://4207195275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp5czJlcYNU7vFLQkGMwL%2Fuploads%2FpDLfYzAMfygHkAryHjve%2Fimage.png?alt=media&#x26;token=5f79ad45-2fb9-45ad-8b42-9e4562fbab4c" alt=""><figcaption></figcaption></figure>