# Product page

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

{% hint style="info" %}
**Recommendation Size**\
Product image size: 1050x1300
{% endhint %}

## Customize product page <a href="#productpage" id="productpage"></a>

You can sell goods, digital downloads, services, and gift cards through the product page. In addition, you can add a product to Shopify by entering product details and uploading product images. If your product has options, like size or color, then you can add a variant for each combination of options.

You can view, add, update, and organize all of your products and their variants from the "**Products page**" in the Shopify admin.

<table><thead><tr><th width="230">Settings</th><th>Description</th></tr></thead><tbody><tr><td>Enable sticky content on desktop</td><td>You can make the content sticky on a desktop device by checking this checkbox.</td></tr><tr><td>Media</td><td><p><strong>Desktop layout</strong><br>Desktop layout customization setting is as follows:</p><ul><li>Stacked</li><li>Thumbnails</li><li>Thumbnail carousel</li></ul><p><strong>Desktop media size</strong><br>You will find customizations for adjusting the desktop media size within this section:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul><p></p><p><strong>Mobile layout</strong></p><p>Mobile layout customization setting is as follows:</p><ul><li>Show Thumbnails</li><li>Hide Thumbnails </li></ul><p><strong>Hide other variants</strong><br>By enabling this checkbox, you can hide other variants’ media after selecting a variant.</p><p><br><strong>Enable video looping</strong><br>Enabling "Play video on loop" will result in the video continuously looping. When the video finishes playing, it will automatically restart.<br><br><strong>Enable product review tab at bottom</strong><br>By Enabling this checkbox, you can set product review tab at bottom. </p></td></tr></tbody></table>

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FfmoBOmBto8NrOUxfIFwt%2Fproduct.png?alt=media&#x26;token=5cf5b9c2-f9eb-4e7e-948c-3633282b358d" alt=""><figcaption></figcaption></figure>

Following are the blocks you can add to your “Main product:”

<table><thead><tr><th width="181">Block</th><th>Settings</th></tr></thead><tbody><tr><td>Text</td><td>Enter text to display as a Discription on the "Text" block.</td></tr><tr><td>SKU</td><td>Show product "SKU" for your main product.</td></tr><tr><td>Product title</td><td><p><strong>Heading size:</strong> </p><p>Following is the font size customization of the heading of the section.</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Product meta</td><td><p>"Product meta" is for customizing product vendor, type, and tags which are as follows:</p><ul><li>Show vendor</li><li>Show type</li><li>Show tags</li></ul></td></tr><tr><td>Image</td><td><p>"Image" is taken into use to add an image banner in the product section.</p><p>Image link: Use the "Image link" to add a link to the image in the section.</p><p>Image alignment:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Stock countdown</td><td><p>"Stock countdown" is for customizing the product stock.</p><p>Maximum stock: Adjust maximum the stock for the stock countdown. Maximum product stock can be given up to "200".</p><p>Limit stock cut off: Adjust the limited stock cut-off for the stock countdown.</p><p>Limit stock message: Display limit stock message.</p><p>In stock message: Display the "In stock" message.</p></td></tr><tr><td>Price</td><td>This block has no customizable settings.</td></tr><tr><td>Quantity selector</td><td>This block has no customizable settings.</td></tr><tr><td>Variant picker</td><td><p>"Variant picker" is to customize the product variant.</p><p>Type: The variant type is given below. If type "Dropdown" then the variant would be dropdown. and if the type is "Pills" then the variant would be pills.</p><ul><li>Dropdown</li><li>Pills</li></ul><p>Enable color swatches: By enabling this checkbox you can show the "Variant color."</p></td></tr><tr><td>Buy buttons</td><td><p>Enable the Show dynamic checkout buttons box to display any dynamic checkout options enabled by you in your Payments settings.</p><p>Enable the Show recipient information form for gift card products box to display gift recipient form</p></td></tr><tr><td>Description</td><td><p>Display product description.</p><p>Title Enter text to display as a title on the "Description" block.</p></td></tr><tr><td>Share</td><td>Clickable text that allows customers to share the product on social media.</td></tr><tr><td>Custom Liquid</td><td>Add Apps.</td></tr><tr><td>Trust content</td><td><p>Payment &#x26; Security:</p><p>Heading: Enter text to display as a title on the "Trust content" block.</p><p>Payment methods:</p><p>Show payment icons: By enabling this checkbox you can show the “Payment icon.”</p><p>Heading: Enter text to display as a title on the section.</p><p>Description: Enter text to display as a "Description" in the section.</p><p>Security:</p><p>Heading: Enter text to display as a title on the section.</p><p>Image: Use "Image" to add the image to the section.</p></td></tr><tr><td>Collapsible tab</td><td><p>The section "Collapsible tab" is for adding collapsible tabs.</p><p><strong>Heading</strong></p><p>Enter text to display as a title on the "Collapsible tab" block.</p><p></p><p><strong>Row content</strong></p><p>Enter text to display as content on the tab.</p><p></p><p><strong>Row content from page</strong></p><p>Click here and select a page.</p><p></p><p><strong>Banner image</strong></p><p>Use "Banner Image" to add the image to the section.</p><p></p><p><strong>Icon</strong></p><ul><li>None</li><li>Apple</li><li>Banana</li><li>Bottle</li><li>Box</li><li>Carrot</li><li>Chat bubble</li><li>Check mark</li><li>Clipboard</li><li>Dairy</li><li>Dairy free</li><li>Dryer</li><li>Eye</li><li>Fire</li><li>Gluten free</li><li>Heart</li><li>Iron</li><li>Leaf</li><li>Leather</li><li>Lightning bolt</li><li>Lipstick</li><li>Lock</li><li>Map pin</li><li>Nut free</li><li>Pants</li><li>Paw print</li><li>Pepper</li><li>Perfume</li><li>Plane</li><li>Plant</li><li>Price tag</li><li>Question mark</li><li>Recycle</li><li>Return</li><li>Ruler</li><li>Serving dish</li><li>Shirt</li><li>Shoe</li><li>Silhouette</li><li>Snowflake</li><li>Star</li><li>Stopwatch</li><li>Truck</li><li>Washing</li></ul></td></tr><tr><td>Content</td><td><p><strong>Title:</strong> </p><p>Enter text to display as a title on the section.</p><p></p><p><strong>Content:</strong> </p><p>Enter text to display as a "Description" in the section.</p><p></p><p><strong>Content from the page:</strong> </p><p>"Select page" is for selecting a page in a section.</p></td></tr><tr><td>Complementary products</td><td><p>Heading: Enter text to display as a title on the "Complementary products" block.</p><p>Image ratio Product image customizations in a section are as follows:</p><ul><li>Adapt to image</li><li>Portrait</li><li>Square</li></ul><p>Show the second image on hover: By enabling this checkbox you can "Show the second image on hover."</p><p>Show as collapsible tab: By enabling this checkbox you can "Show collapsible tab."</p><p>Icon</p><ul><li>None</li><li>Apple</li><li>Banana</li><li>Bottle</li><li>Box</li><li>Carrot</li><li>Chat bubble</li><li>Check mark</li><li>Clipboard</li><li>Dairy</li><li>Dairy free</li><li>Dryer</li><li>Eye</li><li>Fire</li><li>Gluten free</li><li>Heart</li><li>Iron</li><li>Leaf</li><li>Leather</li><li>Lightning bolt</li><li>Lipstick</li><li>Lock</li><li>Map pin</li><li>Nut free</li><li>Pants</li><li>Paw print</li><li>Pepper</li><li>Perfume</li><li>Plane</li><li>Plant</li><li>Price tag</li><li>Question mark</li><li>Recycle</li><li>Return</li><li>Ruler</li><li>Serving dish</li><li>Shirt</li><li>Shoe</li><li>Silhouette</li><li>Snowflake</li><li>Star</li><li>Stopwatch</li><li>Truck</li><li>Washing</li></ul><p><strong>Maximum products to show</strong>: </p><p>"Maximum products to show" is to specify how many products to show in a section. You can show a minimum of “1” and a maximum of “10” products.</p><p></p><p><strong>Number of products per page</strong>: </p><p>"Number of products per page" is to customize the show of products per slide. You can show a minimum of "1" and a maximum of "4" products in "1" slide.</p></td></tr><tr><td>Product rating</td><td>Displays the average product rating in stars with the number of reviews in parenthesis</td></tr><tr><td>Personalize text</td><td><strong>Heading</strong><br>Enter text to display as a Personalize heading on the section.</td></tr></tbody></table>

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2Fm1LshokQx2Vk4ujZQxBM%2Fproduct-block.png?alt=media&#x26;token=ca6292b7-845d-4684-a91e-8f6df85c3238" alt=""><figcaption></figcaption></figure>

The new product page template is built with the new features introduced in Online Store 2.0. The use of JSON templates allows using dynamic sections to customize product pages according to your style.

You can move blocks from one block to another. Each block has six small dots that you can click and hold to drag and drop them between one another.

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FN6SWVimb1sTjMiTVtFQB%2Fproduct-drag.gif?alt=media&#x26;token=e743b368-7949-4ee1-aa73-cd00189050bc" alt=""><figcaption></figcaption></figure>

This “New feature” allows you to set images according to your style:

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FbGszQu0WT3zPEyY70Mac%2Fproductimg-position.gif?alt=media&#x26;token=b6efa9c2-3d7f-4405-aa0c-1aae5582ae60" alt=""><figcaption></figcaption></figure>

## Product media

Product media include images, 3D models, and videos. Using media like 3D models for your products provides your customer with a better understanding of the function and size of an item and increases sales of your products.

Customers that are browsing your online store prefer to see images on product pages. Using media like video, 3D models, and augmented reality on your product page can increase sales of your products, leading to a better customer experience and more sales. It’s important that the media you add about your products is of high quality and meet the requirements for them to display properly.

### **Images**

Use of product images is done for displaying products across Shopify’s sales channels, including on your online store and Shopify POS. The best file type for most product images is **PNG, JPEG, and GIF**.

Your product and collection images can be any size up to 4472 x 4472 px or 20 megapixels. Product and collection images need to have a file size smaller than 20 MB to be added to Shopify.

When you add an image, different sizes are automatically created for use in different areas of your online store theme.

### **3D models**

3D models are virtual representations of an object in three dimensions. 3D models can give your customers a better sense of your products' size, scale, and other details.

You need to make sure that your 3D model files meet the following requirements before you [add them to your online store](https://help.shopify.com/en/manual/products/product-media/add-media):

* File size: Up to 500 MB
* File type: **GLB, USDZ**

### **Videos**

You can add videos for your product in two ways: uploading a video file or embedding a YouTube or Vimeo video link. If you’re uploading video files, then make sure that they meet the following requirements:

* Video length: Up to 10 minutes
* Video size: Up to 1 GB
* Video resolution: Up to 4K (4096 x 2160 px)
* Video file type: **.mp4** or **.mov**

You don't need to meet these requirements for embedding YouTube or Vimeo videos.

In browsers that support streaming, videos display in either 480p, 720p, or 1080p, depending on the viewer’s connection speed and the resolution of the video. However, in browsers that do not support streaming, the video automatically display’s in the highest resolution available.

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FtQJkqoPNk0lau5APPggE%2Fvideo-file.png?alt=media&#x26;token=36f78a77-90e8-4393-ba51-f15119c3555d" alt=""><figcaption></figcaption></figure>

You can also add a video by embedding a YouTube video link. Click the **Add file from URL** link. Then, you can paste the YouTube URL of your video into the vital field.

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FvH6hINS8zJrAWhyLVCAH%2Fvideo-link.png?alt=media&#x26;token=cf5d5186-7917-4ff9-be17-26c6e0408e66" alt=""><figcaption></figcaption></figure>