# 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.

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FLLyV96YqPxymYJQeD3J2%2F19.gif?alt=media\&token=523a3813-d3fc-4f3c-b37f-c98ca92a408d)

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>