# 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: 1920x434
{% 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>Layout</td><td><p>Customization of the "Layout" in Product information is as follows:</p><ul><li>Wide</li><li>Grid</li></ul></td></tr><tr><td>Enable secondary background on info</td><td>Adds a different background behind the product information area to visually separate it from the media.</td></tr><tr><td>Secondary background color scheme</td><td><p>Selects the color scheme used for the secondary background area.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6</li></ul></td></tr><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>Color scheme</td><td><p>Applies a color scheme to the product section’s main content area.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6</li></ul></td></tr><tr><td>Media</td><td><p><strong>Desktop media 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></p><p><strong>Constrain media to screen height</strong><br>By enabling this checkbox, you can limit the height of media to the screen height.<br><br><strong>Media fit</strong></p><p>The Media fit customization setting is as follows:</p><ul><li>Original</li><li>Fill</li></ul><p></p><p><strong>Desktop layout</strong><br>Desktop layout customization setting is as follows:</p><ul><li>Stacked</li><li>2 columns</li><li>Thumbnails</li><li>Thumbnail carousel</li><li>Columns with thumbnail</li></ul><p></p><p><strong>Hide thumbnail</strong> </p><p>Hides the thumbnail previews for the media gallery.</p><p></p><p><strong>Desktop thumbnail position</strong></p><p>The desktop thumbnail position customization setting is as follows:</p><ul><li>On image</li><li>Below image</li></ul><p></p><p><strong>Desktop media position</strong></p><p>The desktop media position customization setting is as follows:</p><ul><li>Left</li><li>Right</li></ul><p></p><p><strong>Image view</strong></p><p>The Image view customization setting is as follows:</p><ul><li>Open lightbox</li><li>Click and hover</li><li>No zoom</li></ul><p></p><p><strong>Horizontal gap</strong></p><p>Adjust the horizontal gap between media.</p><p></p><p><strong>Mobile layout</strong><br>Mobile layout customization setting is as follows:</p><ul><li>2 columns</li><li>Show thumbnails</li><li>Hide thumbnail</li></ul><p></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>

<figure><img src="/files/H4gLWFoyhptqwwAD7ZsE" alt=""><figcaption></figcaption></figure>

## 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>Title</td><td>Show product "Title" for your main product.</td></tr><tr><td>Text</td><td><p><strong>Text</strong><br>Enter text to display as a Discription in the "Text" block.<br><br><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>Description</td><td>After adding this block, you will be able to view the product description.</td></tr><tr><td>Variant picker</td><td><p>"Variant picker" is to customize the product variant.<br></p><p><strong>Style</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></p><p><strong>Swatch type</strong></p><p>Following is the swatche type customization of the section:</p><ul><li>Color swatch</li><li>Variant image</li><li>Pills</li></ul><p>Variant image mode requires that all variants have an associated image.</p><p></p><p><strong>Color swatch style</strong><br>Following is the color swatches style customization of the section:</p><ul><li>Rounded</li><li>Oval</li></ul><p></p><p><strong>Pills style</strong> </p><p>Following is the color swatches style customization of the section:</p><ul><li>Outline</li><li>Fill</li></ul></td></tr><tr><td>Pop-up</td><td><p><strong>Link label</strong><br>Enter text to display as a label in the block.<br><br><strong>Page</strong><br>By using these settings, the selected page will display its content.</p><p></p><p><strong>Image</strong></p><p>Use this settings to add image to the popup block. </p><p></p><p><strong>Link</strong><br>Use "Link" to add a link to the image.</p><p><br><a href="https://webibazaar.gitbook.io/flute-documentation/product-page/size-guide"><strong>Size Guide HTML</strong></a></p></td></tr><tr><td>Size &#x26; Fit</td><td><p><strong>Heading</strong> </p><p>Enter text to display as a heaing of Size &#x26; Fit block. </p><p></p><p><strong>Row content</strong> </p><p>Use this to add row content in this block.</p></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>Buy buttons</td><td><p><strong>Enable the Show dynamic checkout buttons</strong> box to display any dynamic checkout options enabled by you in your payments settings.<br></p><p><strong>Enable the Show recipient information form for gift card products</strong> box to display gift recipient form.<br><br><strong>Pickup availability</strong><br>Enable this to Show pickup availability in the product page.</p></td></tr><tr><td>Inventory status</td><td><p>The inventory status, indicating whether the product is in stock or out of stock. </p><p></p><p><strong>Text style</strong></p><p>Customization of the "Text style" is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul><p></p><p><strong>Low inventory threshold</strong> </p><p>This feature defines that if the number of products in stock falls below a certain threshold in the product range, a 'low stock' text will be displayed. </p><p></p><p><strong>Show inventory count</strong> </p><p>By enabling this checkbox, you can show inventory count.</p></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>Share</td><td>Clickable text that allows customers to share the product on social media.<br><br><strong>Text</strong><br>Input the text to be displayed in this section.</td></tr><tr><td>Custom Liquid</td><td>Add Apps.</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>Row content</strong></p><p>Enter text to display as content in the row. <br></p><p><strong>Row content from page</strong><br>By using these settings, the selected page will display its content like row content.</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>Complementary products</td><td><p><strong>Heading</strong><br>Enter text to display as a title in the "Complementary products" block.<br></p><p><strong>Show as collapsible row</strong><br>By enabling this checkbox you can show product as collapsible row.</p><p></p><p><strong>Product display limit</strong> </p><p>"<strong>Product display limit</strong>" 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>Products per page limit</strong>: </p><p>"Products per page limit" is to customize the show of products per slide. You can show a 2 or 3 columns in "1" slide.<br><br><strong>Product card</strong><br>Customization of the "Product card" in image height is as follows:</p><ul><li>Portrait</li><li>Square</li></ul></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/lNIz3EHPgiw>" %}

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

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

***

## Setting the Product details(Metafield)

1. From your Shopify admin, go to **Settings** > **Metafields and metaobjects** > **Products**

<figure><img src="/files/BLIUkca3QLuBekvyN02N" alt=""><figcaption></figcaption></figure>

2. Click **Add definition**
3. &#x20;Enter your desired name in the **Name** field and click **Select type** then select **Single line text.**

<figure><img src="/files/yyf7CfdW3j92hPdCPnx6" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/CIOO1mSdaUZPyvbDEbLQ" alt=""><figcaption></figcaption></figure>

4. You should see the **metafiled** in the list of definitions by now.

<figure><img src="/files/oQQG5jM3ZxOu8tlEoYcI" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/EJjlgClwlWjvFOqZHc9q" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/VJhZf62xbeXMdHDawEfD" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/ghnoCDsYL8l01guwI8gv" alt=""><figcaption></figcaption></figure>

***

## 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="/files/FbYaxOARlsjvNZy5KgHe" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/sgwSFuXioHzNWmaa2X7F" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/tzcAQMPo0bKqhcwGsKFc" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/MN9jBaPCi3ZOQlaDP4f6" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/WJCnGrT01Z88reCSCuDI" 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="/files/v7jBdJrMtfE95mHUYjvJ" 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="/files/nGrH68VPo9o3vz7w5Vn5" alt=""><figcaption></figcaption></figure>


---

# 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://webibazaar.gitbook.io/flute-documentation/product-page.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.