# Quick View

**Quick View** allows your customers to see more details about a product and add it to their cart without having to go to the individual product page, leading to a more fluid checkout flow.

![](/files/COZoqxfHTUNykqXXjydj)

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Theme settings ->** **Quick view.**

### **Thumbnails**

<table><thead><tr><th width="284">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Layout</td><td>Select the layout for the quick view popup content.<br><br><mark style="color:orange;"><strong>Show thumbnails on the left</strong></mark><br><mark style="color:orange;"><strong>Show thumbnails on the right</strong></mark><br><mark style="color:orange;"><strong>Show thumbnails on the bottom</strong></mark><br><mark style="color:orange;"><strong>Hide thumbnails</strong></mark></td></tr><tr><td>Maximum thumbnails to show</td><td>Determine the number of thumbnail to visible at a time in the thumbnail slider.</td></tr></tbody></table>

### Image

<table><thead><tr><th width="285">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Image ratio</td><td>Select the ratio type of the product image. <br><br><mark style="color:orange;"><strong>Adapt to image</strong></mark><br><mark style="color:orange;"><strong>Portrait</strong></mark><br><mark style="color:orange;"><strong>Square</strong></mark></td></tr><tr><td>Portrait aspect ratio</td><td>Determine the ratio of the width / height of the image if the Portrait option of Product Image Ratio is selected.</td></tr><tr><td>Show zoomed image</td><td>Toggle the image zooming when hovered. </td></tr></tbody></table>

### Badge

<table><thead><tr><th width="285">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show product badges</td><td>Enable the product badges in the quick view.</td></tr></tbody></table>

### Title

<table><thead><tr><th width="285">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Font size</td><td>Set the font size of the title.</td></tr><tr><td>Title color</td><td>Set the text color of the title.</td></tr><tr><td>Show zoomed image</td><td>Enable the zoom functionaly of the main image.</td></tr></tbody></table>

### Sold in last period

<table><thead><tr><th width="285">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show sold in last period</td><td>Enable the Sold in last period functionality in the quick view.</td></tr><tr><td>Product quantity list</td><td>Fill in the product quantity list that will appear in the Sold in last period function.</td></tr><tr><td>Hours</td><td>Fill in the 'hours' list that will appear in the Sold in last period function.</td></tr><tr><td>Text color</td><td>Set the text color of the Sold in last period function.</td></tr></tbody></table>

### Short description

<table><thead><tr><th width="285">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show short description</td><td>Enable the short description in the quick view.</td></tr><tr><td>Short description word count</td><td>Set maximum number of words for the short description.</td></tr><tr><td>Font size</td><td>Set the font size of the short description.</td></tr><tr><td>Text color</td><td>Set the text color of the short description.</td></tr></tbody></table>

### Price

<table><thead><tr><th width="285">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Font size</td><td>Set the font size of the price.</td></tr></tbody></table>

### Information

<table><thead><tr><th width="285">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show vendor</td><td>Enable the vendor in the quick view.</td></tr><tr><td>Show SKU</td><td>Enable the SKU in the quick view.</td></tr><tr><td>Show barcode</td><td>Enable the barcode in the quick view.</td></tr><tr><td>Show availability</td><td>Enable the availability in the quick view.</td></tr><tr><td>Show type</td><td>Enable the type in the quick view.</td></tr><tr><td>Show stock levels</td><td>Enable the stock levels functionality in the quick view.</td></tr></tbody></table>

### Variant

<table><thead><tr><th width="285">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Type</td><td>Select the type for the product variant in the quick view:<br><br><mark style="color:orange;"><strong>Dropdown</strong></mark><br><mark style="color:orange;"><strong>Square / Rectangle / Swatch</strong></mark></td></tr><tr><td>Show variant image grouped</td><td>Enable the variant image grouped functionality in the quick view.</td></tr></tbody></table>

### Quantity

<table><thead><tr><th width="285">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show quantity</td><td>Enable the quantity in the quick view.</td></tr></tbody></table>

### Subtotal

<table><thead><tr><th width="285">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show subtotal</td><td>Enable the subtotal in the quick view.</td></tr></tbody></table>

### Size chart

<table><thead><tr><th width="285">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show size chart</td><td>Enable the size chart in the quick view.</td></tr><tr><td>Use different size charts for products by criteria</td><td>There are 5 options for the size chart:<br><br><mark style="color:orange;">Product type</mark><br><mark style="color:orange;">Product vendor</mark><br><mark style="color:orange;">Metafield</mark><br><mark style="color:orange;">Custom image</mark><br><mark style="color:orange;">Custom page</mark></td></tr><tr><td>Custom page</td><td>Select a page to display the size chart (only for the custom page option)</td></tr><tr><td>Image type</td><td>Select the image format to display the size chart (only for the product type or product vendor option)<br><br><mark style="color:orange;"><strong>Use image with PNG format</strong></mark><br><mark style="color:orange;"><strong>Use image with JPG format</strong></mark></td></tr><tr><td>Image</td><td>Select an image to display the size chart (only for the custom image option)</td></tr></tbody></table>

### Compare color

<table><thead><tr><th width="285">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show comparison color</td><td>Enable the comparison color functionality in the quick view.</td></tr><tr><td>Enable drag &#x26; drop on desktop</td><td>Enable the drag &#x26; drop in the quick view on the desktop.</td></tr></tbody></table>

### Dynamic checkout buttons

<table><thead><tr><th width="285">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show dynamic checkout buttons</td><td>Enable the dynamic checkout buttons in the quick view.</td></tr></tbody></table>

### Customer viewing function

<table><thead><tr><th width="285">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show customer viewing function</td><td>Enable the customer viewing function in the quick view.</td></tr><tr><td>List of customer viewing numbers</td><td>Fill in the list of customer viewing numbers that will appear in the Customer viewing function.</td></tr><tr><td>Swap time</td><td>Set time to change the number of customers viewing</td></tr></tbody></table>

### Trusted image

<table><thead><tr><th width="285">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show trusted image</td><td>Enable the trusted image in the quick view.</td></tr></tbody></table>

### Customization property

<table><thead><tr><th width="285">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show social share buttons</td><td>Enable the social share buttons in the quick view.</td></tr></tbody></table>

### Add to cart action

<table><thead><tr><th width="285">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Add to cart button</td><td>Settings for the color, background color, and border color of the add to cart button in the quick view.</td></tr></tbody></table>

### Buy it now action

<table><thead><tr><th width="285">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Buy it now button</td><td>Settings for the color, background color, and border color of the buy it now button in the quick view.</td></tr></tbody></table>


---

# 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://halosoft.gitbook.io/ella-documentation/theme-settings/quick-view.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.