# 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="/files/nKI6J17KKlTct6fLt1nD" 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="/files/GDhvbZDF8Pevt5UXL7MQ" 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="/files/Y7ysuFxcuYHtxjUTT65R" 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](/marble-documentation/global-features/custom-product-badges.md) - more details [here](/marble-documentation/global-features/custom-product-badges.md).

### 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="/files/gWv9RRx9kIZaSwraijlq" alt=""><figcaption></figcaption></figure>


---

# 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://bigstart.gitbook.io/marble-documentation/global-settings/products.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.