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

# Product page

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

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

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

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>Choose image gallery width</strong><br>You will find customizations for adjusting the desktop media width within this section:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul><p><strong>Images layout</strong><br>Images layout customization setting is as follows:</p><ul><li>Two image with thumbnail</li><li>One image with thumbnail</li><li>Collage style</li><li>Two image without thumbnail</li><li>Three image in full screen</li></ul><p><strong>Enable thumbnail slider</strong><br>By enabling this checkbox, show thumbnail slider.</p><p></p><p><strong>Thumbnail image ratio</strong><br>The Thumbnail image ratio customization setting is as follows:</p><ul><li>Adapt to image</li><li>Portrait</li><li>Square</li></ul><p><strong>Choose image position</strong></p><p>The Choose image position customization setting is as follows:</p><ul><li>Left</li><li>Right</li></ul><p><strong>Image zoom</strong></p><p>The Image zoom customization setting is as follows:</p><ul><li>Open light box</li><li>Click and hover</li><li>No zoom</li></ul><p><strong>Show taxes included</strong><br>By enabling this checkbox, you can show taxes included text.<br></p><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.</p></td></tr></tbody></table>

## Add product info

<table><thead><tr><th width="195">Block</th><th>Description</th></tr></thead><tbody><tr><td>SKU</td><td>By enabling this checkbox , you can show SKU.</td></tr><tr><td>Type</td><td>By enabling this checkbox, you can show product type.</td></tr><tr><td>Show title</td><td>By enabling this checkbox, you can show product title.</td></tr><tr><td>Show description</td><td>By enabling this checkbox, you can show product detail or description.</td></tr><tr><td>Show price</td><td>By enabling this checkbox, you can show product price.</td></tr><tr><td>Show inventory</td><td>By enabling this checkbox, you can show product inventory.</td></tr><tr><td>Short description</td><td>By enabling this checkbox, you can show Short description. <br>A metafield needs to be added, following the steps : <a href="https://webibazaar.gitbook.io/piano-documentation/product-page/short-description">Short desciption</a></td></tr></tbody></table>

## Add block

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

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Text</td><td><p><strong>Text</strong><br>Enter text to display as a Description in the "Text" block.<br></p><p><strong>Text alignment</strong></p><p>Customization of the "Text alignment" in the main product page is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Title</td><td>Show product "Title" for your main product.</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 tags</li></ul></td></tr><tr><td>Countdown timer</td><td>This block does not have customizable settings. After adding this block, you will be able to display the product countdown timer using a specific metafield.</td></tr><tr><td>Image</td><td><p><strong>Image</strong><br>"Image" is taken into use to add an image banner in the product section.<br></p><p><strong>Image link</strong></p><p>Use the "Image link" to add a link to the image in the section.</p><p></p><p><strong>Image alignment</strong></p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Price</td><td>This block has no customizable settings. After adding this block, you will be able to view the product price.</td></tr><tr><td>SKU</td><td><p>Show product "SKU" for your main product.</p><p></p><p><strong>Text style</strong></p><p>Customization of the "Text style" in the main product page is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr><tr><td>Inventory status</td><td><p>The inventory status, indicating whether the product is in stock or out of stock.<br><br><strong>Maximum stock</strong><br>Adjust maximum stock for stock countdown. <br>minimum "0" and maximum "200".<br><br><strong>Limit stock cut off</strong><br>Adjust limited stock cut off for stock countdown. minimum "0" and maximum "200".</p><p></p><p><strong>Limit stock message</strong><br>Enter limit of stock message.<br><br><strong>In stock message</strong><br>Enter In stock message.<br><br><strong>Continue selling message</strong><br>Show continue selling message.<br><br><strong>Limited stock</strong><br>choose limited stock color.<br><br><strong>In stock</strong><br>choose In stock color.<br><br><strong>Continue selling</strong><br>choose continue selling color.</p></td></tr><tr><td>Quantity selector</td><td>This block has no customizable settings. After adding this block, you will be able to view the quantity selector.</td></tr><tr><td>Variant picker</td><td><p>"Variant picker" is to customize the product variant.<br></p><p><strong>Type</strong><br>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><strong>Enable color swatches</strong><br>By enabling this checkbox you can show the "Variant color."<br></p><p><strong>Swatches source</strong><br>The Swatches source is given below. When a variant image is selected, the corresponding variant's image will be displayed. If a custom image is selected, the color from the swatches will be shown."</p><ul><li>Variant image</li><li>Custom image</li></ul><p></p><h4>Size chart Settings</h4><p></p><p><a href="/piano-documentation/product-page/creating-a-size-chart-page.md"><mark style="color:$primary;">How to create Size chart Page</mark></a></p><h4> </h4><p></p><p><strong>Link label</strong>       </p><p>The <strong>Link Label</strong> setting allows you to customize the text displayed below the product variants.</p><p>This text acts as the clickable link that opens the Size Chart popup. </p><p></p><p><strong>Image</strong> </p><p>Upload an image that visually explains how customers should measure themselves.</p><p>This image appears at the top of the Size Chart popup and can include measurement illustrations, body diagrams, or sizing references.</p><blockquote><p><strong>Recommended:</strong> Use a high-resolution image with clear labels for measurements such as Chest, Bust, Waist, Hip, Inseam, or Sleeve Length. </p></blockquote><p><strong>Page</strong> </p><p>Select a Shopify <strong>Page</strong> containing your complete size chart information. </p><p>The page content is displayed inside the popup below the size chart image.</p><blockquote><p><strong>Note:</strong> Create and manage your Size Chart page from <strong>Shopify Admin → Content → Pages</strong>, then select it using this setting.</p></blockquote><h4>  </h4></td></tr><tr><td>Buy buttons and quality</td><td><p><strong>Enable cart animation</strong> <br>When this setting is enabled, an animation effect will be displayed on the cart button, making cart interactions more visually engaging for users. When disabled, the cart button will appear without any animation.<br><strong>Show dynamic checkout buttons</strong> box to display any dynamic checkout options enabled by you in your payments settings.<br></p><p><strong>Show recipient information form for gift card products</strong> box to display gift recipient form</p></td></tr><tr><td>Diamond &#x26; Gemstones</td><td><strong>Heading</strong><br>Enter text for heading.<br><br><strong>Icon</strong> <br>Set icon with given list.<br><br><strong>Open collapsible row</strong><br>By selecting this checkbox , you can set default open row.<br><br><strong>Tab content</strong><br>Enter detail description to tab content.<br><br><strong>Tab content from page</strong><br>Select page to fetch content.</td></tr><tr><td>Description</td><td>After adding this block, you will be able to view the product description.</td></tr><tr><td>Share</td><td>Clickable text that allows customers to share the product on social media.</td></tr><tr><td>Share button</td><td><p>Enabling the checkbox below will display the share button.</p><ul><li>Share on Facebook</li><li>Tweet on Twitter</li><li>Show pinterest<br></li></ul><p><strong>Whatsapp number</strong><br>Add whatsapp number with show hide option <br><br><strong>Email</strong><br>Enter email id , subject and select to hide or show emails.<br><br><strong>Messenger</strong><br>Enter number and show messenger detail.</p></td></tr><tr><td>Custom Liquid</td><td>Add Apps.</td></tr><tr><td>Content</td><td><p><strong>Title</strong></p><p>Enter text to display as a title in the section.<br></p><p><strong>Content</strong></p><p>Enter text to display as a "Description" in the section.<br></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>Collapsible row</td><td><p>The section "Collapsible row" is for adding collapsible rows.<br></p><p><strong>Heading</strong></p><p>Enter text to display as a title in the "Collapsible row" block.</p><p></p><p><strong>Icon</strong></p><ul><li>None</li><li>Flash sale</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>Open collapsible row</strong><br>By enabling this checkbox, you can show open collapsible row.<br></p><p><strong>Tab content</strong></p><p>Enter text to display as content in the row. <br></p><p><strong>Tab content from page</strong><br>By using these settings, the selected page will display its content like row content.</p></td></tr><tr><td>Offer</td><td><p><strong>Heading</strong><br>Enter text to display as a title in the "Offer" block.<br><br><strong>Icon</strong></p><ul><li>None</li><li>Flash sale</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><li>Tag</li></ul><p><strong>Content</strong><br>Enter text to display as a content in the section. Use of this feature you can share information about your brand with your customers.<br><br>Customize the tag Icon color.</p></td></tr><tr><td>Pop-up</td><td><strong>Link label</strong><br>Enter text to display as a title in the "Link label" block.<br><br><strong>Page</strong><br>By using these settings, the selected page will display its content in pop-up.</td></tr><tr><td>Complementary products</td><td><p><strong>Heading</strong><br>Enter text to display as a title in the "Complementary products" block.<br><br><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><p><strong>Show as collapsible row</strong><br>By enabling this checkbox you can show product as collapsible row.</p><p></p><p><strong>Icon</strong></p><ul><li>None</li><li>Flash sale</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.<br></p><p><strong>Pagination style</strong></p><p>The style of the Complementary products that appears below the complementary  product cards:</p><ul><li>Dots</li><li>Counter</li><li>Numbers</li></ul><h4>Product card : </h4><p><strong>Image ratio</strong><br>The customization of the image ratio in the product section are as follows:</p><ul><li>Portrait</li><li>Square</li></ul><p><strong>Show the second image on hover</strong><br>By enabling this checkbox you can "Show the second image on hover".<br><br><strong>Show product type</strong></p><p>By enabling this checkbox you can “Show product type”.<br><br><strong>Show vendor</strong><br>By enabling this checkbox you can display the “Product vendor”.<br><br><strong>Enable quick view</strong><br>By enabling this checkbox you can display the “Product quick view”.</p></td></tr><tr><td>Icon with text</td><td><p><strong>Content :</strong> <br><strong>First 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>Support</li><li>Washing</li></ul><p><strong>First image</strong><br>Use the first image to add to the section.<br><br><strong>First heading</strong><br>To display the heading for the icon with text block, add text here.<br><br><strong>Icon position</strong><br>Use "Icon position" to set icon direction</p><ul><li>Left</li><li>Right</li></ul><p><strong>Icon size</strong><br>You can adjust the font size and set it to the minimum size of “20px” and a maximum size of “50px.”</p></td></tr><tr><td>Payment icons</td><td><strong>Heading</strong><br>To display the heading for the payments icon, add text here.</td></tr></tbody></table>

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.

{% embed url="<https://youtu.be/0j8ddcohCVY>" %}

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

{% embed url="<https://youtu.be/FTq6f7LZ0Do>" %}

***

## Setting the Complementary products (Metafield)

1. In your admin, within **Products**, click on the product you want to add the Complementary products.

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FKXjnswLno8OPWQeW5Q7j%2Fset1.png?alt=media&amp;token=5306e206-c92c-44be-902a-ff4e65edfbf1" alt=""><figcaption></figcaption></figure>

2. Scroll down to the **Metafields.** You should see the **Complementary products** here.

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2F5Ok7iCVDnfl78ejQWOyP%2Fproduct_page1.png?alt=media&amp;token=ef096794-a669-4250-bc36-eea993714f39" alt=""><figcaption></figcaption></figure>

3. To add products, click on **Complementary products** field.
4. Select products.

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FrkeS3J0NgIBtiEoZ9cwa%2Fproduct_page2.png?alt=media&amp;token=c0d2f835-8027-4260-8c91-0faae95fd6da" alt=""><figcaption></figcaption></figure>

5. Select a product and click on **Add**.

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FLeYXTthxtzyDZLbUpTVn%2Fproduct_page3.png?alt=media&amp;token=5f26b54d-c269-46b6-b212-6c151d42acb6" alt=""><figcaption></figcaption></figure>

6. Click **Save** to save your changes.

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FpXPNwu8C64BqygbP8vWi%2Fproduct_page4.png?alt=media&amp;token=2b6f7eac-d4a6-44fd-8cf1-144df54206da" 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<https://www.youtube.com/watch?v=O5jDlAR2avY&ab_channel=MotorOctane>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://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FbsT8M30FGlJKH80OQzCA%2Fmedia_img.png?alt=media&amp;token=cf2f337a-a5f5-4860-9575-874087696886" 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://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FihYHCwA3eygnAp0BqQSJ%2Fmedia_3.png?alt=media&amp;token=a5ae678e-9dbe-4900-b948-6b7e735b2c99" alt=""><figcaption></figcaption></figure>