> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/cornerstone/products/product-listings/layout-and-style.md).

# 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="/files/gvzHaf6zqMXWK0mEafUb" 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="/pages/W1limMa3a6HViAgYU6Ns#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>

***

> **Related links**
>
> [Product listings](/cornerstone/products/product-listings.md)\
> [Product badges](#product-badges)\
> [Product card details](/cornerstone/products/product-listings/product-card-details.md)\
> [Quick view](https://github.com/fluorescent/kb-cornerstone/tree/main/products/product-listings/broken-reference/README.md)\
> [Quick add](/cornerstone/products/quick-shop.md)