# Product -> Collection Page {% hint style="info" %} **Theme settings -> Product -> Collection Page** {% endhint %} {% embed url="" %} ## Image ### **Image height (in % of the width)** Here you have a zoom slider (with a scale from 50% to 150%) where you can decide what height (in % of the width) your image will have on the collection page. Here are the examples of some variants: Less than 100 - landscape. 100 - square image. More than 100 - portrait. {% hint style="warning" %} **Please note**, this option doesn't work for 'Image resize = Auto' which comes next. {% endhint %} ### **Image resize** Here you have 5 images resize options: * **Auto** - if you choose this option, ignore the previous option of the image height (in % of the width). The image container and the image size are generated based on the source image dimensions. * **Contain** - CSS object-fit = contain. If you choose this option, the image will look like an [object-fit demo](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). * **Cover** - CSS object-fit = cover. If you choose this option, the image will look like an [object-fit demo](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). * **Stretch by width** - in this option, the image width fits the container width. It is centered vertically. If the image height is more than the container, cut the image from the top and the bottom. If the image height is less than the container, add white space at the top and the bottom of the image. * **Stretch by height** - in this option, the image height fits the container height. The image is centered horizontally. ### **Image border-radius** Here you have a zoom slider for the image border-radius (with a scale from 0 to 50), which allows you to change the image corners from sharp to round ones. The level of roundness is up to you: ![](/files/-MfD2yDo9q0eT9RVu1Jk) ### **Show second images on hover** If you enable this option the second image of the product will be shown when you hover your mouse over the product´s image. ## Labels Here you can decide which labels should be shown on the product on the collection page. The following labels are available: “In stock”, Pre-order”, “Out of stock”, “New”, “Hot”, and “Sale”: ![](/files/-MfD41Axt-nIbkOE6gP-) {% hint style="warning" %} **Please note**, you can configure “New” and “Hot” labels via Metafields. Check this [**help page** ](https://mpithemes.gitbook.io/shella-shopify-theme/product-metafields)for more details about the product meta fields. {% endhint %} ## Elements ### **Centered information** If you enable this option the product´s information will be shown centered under the product: ![](/files/-MfD4e5Ub-aEMM-HL3Gd) **Other elements** Additionally, you can decide whether type, vendor, or collections should be shown before the product´s title, and then choose what elements should be shown under the image. In our example, we show it in a mobile version: ![](/files/-MfD4iPJv3tZ5CIwuuzt) ### Trim title to one line This option enables you to show the product's title in one line both on desktop and mobile view. This is what it may look like: ![](/files/-MfD6wyK4xMYOV_5QvdM) ## Elements for list mode Here you can choose what elements should be shown when the product is viewed in a list mode: ![](/files/zK8h249tamLelJu3OuQh) ### **Show quantity** Shows quantity input. This option applies only to the collection page, product list “Design #2”. ![](/files/-Mg60ITzmAZ1VsRdsTiW) In case you need to change the product list design, navigate to *Collections -> Product grid -> Grid*. More information you can find [**here**](https://mpithemes.gitbook.io/shella-shopify-theme/collections/content#grid). --- # 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://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/collection-page.md?ask= ``` 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.