# Layout and style

Go to **Theme settings > Product listing** to find the settings to customize the layout and style of product cards.

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FzCYZfExYATvrQvspj3bJ%2Fproduct-listing-glow.jpeg?alt=media&#x26;token=2431d82e-5aab-4f1d-8b3e-ecbd049dde42" alt=""><figcaption><p>Listing with default style</p></figcaption></figure>

### General appearance

***

Change the overall appearance, including the color, layout, and alignment of product cards.

<table><thead><tr><th width="205">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Product list style</mark></td><td>Change the style to <strong>Default</strong>, <strong>Bordered grid</strong>, or <strong>Colored tile</strong>.</td></tr><tr><td><mark style="color:blue;">Colored tile</mark></td><td>Select the color for the Colored tile style, if enabled.</td></tr><tr><td><mark style="color:blue;">Alignment</mark></td><td>Choose too align content and elements to the <strong>Left</strong>, <strong>Center</strong>, or <strong>Right</strong>.</td></tr><tr><td><mark style="color:blue;">Product title text limit</mark></td><td>Limit how many lines of text is shown. Text that is cut off is replaced with an ellipsis (...). Select <strong>No limit</strong>, <strong>1 line</strong>, <strong>2 lines</strong>, or <strong>3 lines</strong>.<br><br>This setting does not apply to Collection and Search pages when products are in "List" display mode.</td></tr></tbody></table>

### Product images

***

Change the shape (aspect ratio) and fit of the product images, and enable a secondary image on hover.

<table><thead><tr><th width="201">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show second image on hover</mark></td><td>Display the second product image when hovered over.</td></tr><tr><td><mark style="color:blue;">Image aspect ratio</mark></td><td>Choose to crop all product images to be a single uniform shape. Select <strong>Portrait (2:3)</strong>, <strong>Portrait (4:5)</strong>, <strong>Square (1:1)</strong>, <strong>Landscape (5:4)</strong>, or <strong>Landscape (3:2)</strong>. Select <strong>Natural</strong> to display images in their original shape (without cropping).<br><br>Learn more about aspect ratios in our <a href="../../../general/image-guide/theme-image-settings#image-aspect-ratio">Image settings guide</a>.</td></tr><tr><td><mark style="color:blue;">Media fit</mark></td><td>Make product images <strong>Cover</strong> the full product card or <strong>Fit</strong> within the card with its original shape.</td></tr></tbody></table>

&#x20;

***

> **Related links**
>
> [Product listings](https://help.fluorescent.co/cornerstone/products/product-listings)\
> [Product badges](#product-badges)\
> [Product card details](https://help.fluorescent.co/cornerstone/products/product-listings/product-card-details)\
> [Quick view](https://help.fluorescent.co/cornerstone/products/product-listings/broken-reference)\
> [Quick add](https://help.fluorescent.co/cornerstone/products/quick-shop)


---

# 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://help.fluorescent.co/cornerstone/products/product-listings/layout-and-style.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.