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

# Product List With Image

You can choose to list of product in a section.

The **Product list with image** section contains the following default blocks:

* [Product](#product-block)

## Section settings

<table><thead><tr><th width="238">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Make section full width</td><td>Extend the section to be the width of the browser window.</td></tr><tr><td>Color schema</td><td>A set of colors that you can apply to this section. <a href="https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme">Learn more.</a></td></tr><tr><td>Separator line</td><td><p>Display a line to visually separate this section from the other sections:</p><ul><li><strong>None</strong></li><li><strong>Top</strong></li><li><strong>Bottom</strong></li><li><strong>Top and bottom</strong></li></ul></td></tr></tbody></table>

## Main section settings

<table><thead><tr><th width="264">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Desktop image placement</td><td><p>Choose whether the image or the text appears first. Image first is default for mobile layouts:</p><ul><li><strong>Image first</strong></li><li><strong>Image second</strong></li></ul><p>(<em>Image first is the default mobile layout</em>)</p></td></tr></tbody></table>

## Image settings

<table><thead><tr><th width="229">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Upload a image</td><td>Upload a image.</td></tr><tr><td>Image height</td><td><p>Determine the height of the image:</p><ul><li><strong>Adapt to image</strong></li><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul></td></tr><tr><td>Image behavior</td><td><p>Determine the behavior of the image:</p><ul><li><strong>None</strong></li><li><strong>Ambient movement</strong></li></ul></td></tr></tbody></table>

## Product card settings

<table><thead><tr><th width="293">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image ratio</td><td><p>The image ratio for the product images:</p><ul><li><strong>Adapt to image</strong>: use the aspect ratio of the product image.</li><li><strong>Square</strong>: Crop the images to use a 1:1 ratio.</li><li><strong>Portrait</strong>: Crop the images to use a 2:3 ratio.</li></ul></td></tr><tr><td>Image border thickness</td><td>Set the width of an image's four borders. Can be from 0px to 10px, increasing arithmetically of 1 pixel. </td></tr><tr><td>Image border opacity</td><td>Set the opacity level for an image's four borders. Can be from 0% to 100%, increasing arithmetically of 5%. </td></tr><tr><td>Image corner radius</td><td>Set the radius of the image's corners. Can be from 0px to 40px, increasing arithmetically of 1 pixel. </td></tr><tr><td>Show second image on hover</td><td>When the customer hovers their cursor over the product image, displays the second product image if the product has one.</td></tr><tr><td>Show badges</td><td>Display badges of the products.</td></tr><tr><td>Show vendor</td><td>Display vendors of the products.</td></tr><tr><td>Show product rating</td><td>Display the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such as Shopify Product Reviews, and metafield definitions for reviews.rating_count and reviews.rating.</td></tr><tr><td>Show color swatch</td><td>Display swatches allows you to see color options.</td></tr><tr><td>Enable quick add button</td><td>Display a quick add to cart button. If product has variants, the button opens a popup displaying all the essential product details.</td></tr><tr><td>Content alignment</td><td><p>Determine the content alignment:</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr></tbody></table>

## Section padding settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determine the height of the top inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determine the height of the bottom inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

## Block settings

### Product block

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Choose a product</td><td>Select a product to show.</td></tr><tr><td>Horizontal position</td><td>Determines the horizontal position of point. Can be from 0% to 100%, increasing arithmetically of 1%.</td></tr><tr><td>Vertical position</td><td>Determines the vertical position of point. Can be from 0% to 100%, increasing arithmetically of 1%.</td></tr></tbody></table>