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

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>Color scheme</td><td><p>In this section, you can change the background and foreground color of a section using the color scheme. We provide total scheme 13. User can select any color scheme out of scheme 13.<br></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 and so on.</li></ul></td></tr><tr><td>Media</td><td><p><strong>Show separate line</strong><br>By enabling this, you can see separator between<br><br><strong>Desktop media width</strong><br>You will find customizations for adjusting the desktop media width  in range of "40%" to "50%" within this section.</p><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 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>Desktop layout</strong><br>Desktop layout customization setting is as follows:</p><ul><li>2 columns</li><li>Thumbnail top/bottom carousel</li><li>Thumbnail bottom carousel</li></ul><p></p><p><strong>Thumbnail top carousel color</strong><br>Select color scheme to add thumbnail top carousel layout.</p><p></p><p><strong>Thumbnail image ratio</strong></p><p> The Thumbnail image ratio customization setting is as follows: </p><ul><li>Adapt to image</li><li>Portrait</li><li>Square</li></ul><p></p><p><strong>Image zoom</strong></p><p>The Image zoom 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>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><p></p><p><strong>Enable sticky content on desktop</strong><br> You can make the content sticky on a desktop device by checking this checkbox.</p></td></tr><tr><td>Mobile layout</td><td><p><strong>Mobile layout</strong><br>Mobile layout customization setting is as follows:</p><ul><li>2 columns</li><li>Thumbnail carousel</li><li>Hide thumbnails</li></ul></td></tr></tbody></table>

<figure><img src="https://697656745-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5NvthjEku1DrzU4mKb74%2Fuploads%2FB5ay2kHZVqk8PyaXSwr3%2Fproduct_page_section.png?alt=media&#x26;token=3549ca03-273f-4d56-9eb0-641273c5e26e" 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>Text</td><td><p><strong>Text</strong><br>Enter text to display as a caption text in the "Text" block.</p><p></p><p><strong>Uppercase text</strong></p><p>Enable this checkbox to transform text into uppercase.</p><p></p><p><strong>Size</strong></p><p>Customization of the "Text size" in the product page section is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Title</td><td><p><strong>Uppercase title</strong> </p><p>Enable this checkbox to transform title text into uppercase.</p><p></p><p><strong>Size</strong></p><p>Following is the font size customization of the product title of the section:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul><p></p><p><strong>Label metafield</strong> </p><p>Enter the text to add metafield namespace and key for eg. food_type. Enter "<strong>Veg</strong>" or "<strong>Non-veg</strong>" accordingly in product page metafield.<br><br>With food_type metafield use content "<strong>Veg</strong>" or "<strong>Non-veg</strong>".<br><br>"<a href="create-custom-metafield">Learn about how to create metafield</a>"<br><br>Steps to show metafield badge<br>- Create metafield and add metafield content.<br>- Add metafield namespace and key that you created on text block.</p></td></tr><tr><td>Price/Quantity/Buy Buttons</td><td><p><strong>Color scheme</strong></p><p>In this section, you can change the background and foreground color of a this block main color using the color scheme.<br><br><strong>Spacing around block</strong><br>"Spacing around block" is to customize of the spacing to show on the desktop screen. You can set a minimum of “0” and a maximum of “20” spacing around block. <br></p><p><strong>--> Quantity</strong></p><p><br><strong>Color scheme</strong><br>In this section, you can change the background and foreground color of a this block using the color scheme.<br><br><strong>Corner radius</strong><br>"Radius" is to customize of the corner of quantity box to show on screen. You can set a minimum of “0” and a maximum of “10” spacing around block. </p><p></p><p><strong>--> Price</strong><br><br><strong>Badge radius</strong><br>"Radius" is to customize of the corner of quantity box to show on screen. You can set a minimum of “0” and a maximum of “10” spacing around block. <br><br><strong>--> Sale or soldout badge</strong><br><br><strong>Show badge</strong><br>By using these settings, you can see sale or soldout badge.<br><br><strong>Background color</strong><br>Select color to show badge background color.</p><p></p><p><strong>Text color</strong><br>Select color to show text color on badge.<br><br><strong>--> Percentage badge</strong><br><br><strong>Show badge</strong><br>By using these settings, you can see percentage badge.<br><br><strong>Background color</strong><br>Select color to show badge background color.</p><p></p><p><strong>Text color</strong><br>Select color to show text color on badge.<br><br><strong>--></strong> <strong>Buy Buttons</strong><br><br><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>Cart icon type</strong><br>Select icon to show with add to cart button. There is 2 icon given below: </p><ul><li>Cart</li><li>Bag</li></ul><h4>Additional text     </h4></td></tr><tr><td>Inventory status with size guide</td><td><p><strong>Uppercase text</strong><br>Uppercase text, indicating whether the inventory text in uppercase or not.<br></p><p><strong>Low inventory threshold</strong><br>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.<br><br><strong>Show inventory count</strong><br>By enabling this checkbox, you can show inventory count.<br><br><strong>Select size chart</strong><br>Select page to show size chart.<br><br><strong>Label</strong><br>Enter text to show size guide title or heading of this block.</p></td></tr><tr><td>SKU</td><td><p>Show product "SKU" for your main product.</p><p></p><p><strong>Uppercase text</strong></p><p>Enable this checkbox to transform SKU text into uppercase</p><p></p><p><strong>Text size</strong></p><p>Customization of the "Text size" in the main product page is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Variant picker</td><td><p>"Variant picker" is to customize the product variant.</p><p></p><p><strong>Hide sold out variant</strong></p><p>Enable this checkbox to hide soldout varinats of this product.<br><br>Separate options by border<br>Enable this checkbox to show top border as a divider on variant picker block.<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></p><p><strong>Corner radius</strong></p><p>Customization of variant pills border radius using this settings. You can set a minimum of “0px” and a maximum of “20px” variant pills radius. </p><p></p><p><strong>Label size</strong></p><p>Following is the variant label customization of the block:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul><p></p><p><strong>Label color</strong><br>Select color to show label highlighted.</p><p></p><p><strong>Swatch type</strong></p><p>Following is the color swatches type customization of the section:</p><ul><li>Color swatch</li><li>Variant image</li><li>Pills</li><li></li></ul><p><strong>Swatch size</strong></p><p>Following is the swatch variant size customization of the block:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul><p></p><p><strong>Pills style</strong> </p><p>Following is the Pills style customization of the section:</p><ul><li>Outline</li><li>Fill</li></ul><p></p><p><strong>Pills size</strong></p><p>Following is the variant pills size customization of the block:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Variant picker Pills discount badge</td><td><strong>Show badge</strong><br>Enable this to show pills discount badge.<br><br><strong>Option name</strong><br>Add option name separated with comma for eg. Color, Size etc.<br><br><strong>Background , text , border color</strong><br>Select color to display discount badge background, text and border.</td></tr><tr><td>Description</td><td><p>After adding this block, you will be able to view the product description.   </p><p></p><p><strong>Separate by border</strong></p><p>Enable this checkbox to show top border as a divider on description block.</p></td></tr><tr><td>Share button</td><td><p><strong>Title</strong></p><p>Enter text to display as a title of this block.</p><p></p><p>Enabling the checkbox below will display the share button.</p><ul><li>Share on Facebook</li><li>Tweet on Twitter</li><li>Pin on Pinterest</li></ul></td></tr><tr><td>Share</td><td><p>Enter share title in text field.<br><br>If you include a link in social media posts, the page’s featured image will be shown as the preview image. <a href="https://help.shopify.com/manual/online-store/images/showing-social-media-thumbnail-images">Learn more</a>.<br></p><p>A store title and description are included with the preview image. <a href="https://help.shopify.com/manual/promoting-marketing/seo/adding-keywords#set-a-title-and-description-for-your-online-store">Learn more</a>.</p></td></tr><tr><td>Payment Method</td><td><p><strong>Text</strong></p><p>To display the heading for the payment method block, add text here.<br><br><strong>Show payment icons</strong><br>By enabling this checkbox you can show the “Payment icons”.</p></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>Icon</strong></p><p>In the block, the icons are given to select.</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.<br><br><strong>Open collapsible row</strong><br>By enabling this checkbox, you can show open collapsible row.</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>Icon</strong></p><p>In the block, the icons are given to select.</p><p></p><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 2 or 3 products per page.</p></td></tr><tr><td>Icon with text</td><td><p>Separate by border<br>Enable this checkbox to show border as a divider on icon with text block.<br><br><strong>Number of columns on desktop</strong> </p><p>"number of columns on desktop" is to specify how many block of icon with text to show in a section. You can show a minimum of “2” and a maximum of “5” products.</p><p><br><strong>--> First</strong> </p><p><br><strong>First icon</strong></p><p>In the block, the icons are given to select.<br><br>Select icon color to show icon highlighted.</p><p></p><p><strong>First image</strong><br>Use the first image to add to the section.<br><br><strong>First image size</strong><br>Set image size between 16px to 50px.<br><br><strong>Caption</strong><br>Enter text for caption in icon with text block.<br><br><strong>First heading</strong><br>To display the heading for the icon with text block, add text here.<br><br>Here is same settings till <strong>five</strong> times user can maximum <strong>five</strong> icon with text block at single block.</p></td></tr><tr><td>Pickup avaibility</td><td>Use this block to show pickup store details.</td></tr><tr><td>Banner with scrolling bar</td><td><p>Color scheme</p><p>In this section, you can change the background and foreground color of a section using the color scheme. We provide total scheme 13. User can select any color scheme out of scheme 13.<br></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 and so on.</li></ul><p><br><strong>Image</strong><br>Select image for banner block in product page.<br><br><strong>Banner height</strong><br></p><ul><li>Adapt to image</li><li>Small</li><li>Medium</li><li>Large<br></li></ul><p><strong>Clickable image</strong><br>Enable this checkbox and then click on banner image it will redirect to the page.<br><br><strong>--> Heading</strong></p><p></p><p><strong>Text</strong>  </p><p>Enter text to defines the main heading of the section. </p><p></p><p><strong>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><li>Extra large</li></ul><p></p><p><strong>--> Button</strong></p><p></p><p><strong>Label</strong></p><p>Use "Button label" to add a label to the Button in the section. </p><p></p><p><strong>Link</strong> </p><p>Use "Button link" to add a link to the Button in the section. </p><p></p><p><strong>Style</strong> </p><p>Customization of the button style in the banner block is as follows:</p><ul><li>Link</li><li>Outline </li><li>Solid</li></ul></td></tr><tr><td>Banner desktop content position</td><td><p>To change the position of the content on the banner, utilize the "Desktop content position" setting. Customization of the "Desktop content position" in the section is as follows:</p><ul><li>Top left</li><li>Top center</li><li>Top right</li><li>Middle left</li><li>Middle center</li><li>Middle right</li><li>Bottom left</li><li>Bottom center</li><li>Bottom right</li></ul></td></tr><tr><td>Desktop content alignment</td><td><p>Customization of "Desktop content alignment" in desktop devices is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Color scheme</td><td><p>In this section, you can change the background and foreground color of a section using the color scheme. We provide total scheme 13. User can select any color scheme out of scheme 13.<br></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 and so on.</li></ul></td></tr><tr><td><p>Banner with scrolling bar </p><p>[ Marquee top ]</p></td><td><p><strong>Text</strong><br>Enter text to display top scrolling bar on banner.<br><br><strong>Uppercase text</strong><br>Enable this checkbox, you can see text style in uppercase.</p><p></p><p><strong>Bold text</strong><br>Enable this checkbox, you can see text style in bold.<br></p><p><strong>Space between blocks</strong></p><p>"Space between blocks" is to give left and right side spacing to the text of the section. You can adjust the spacing and set it to the minimum spacing of “20px” and a maximum spacing of “100px.”</p><p></p><p><strong>Speed</strong></p><p>Speed is used to customize the scrolling speed of the text in the section.</p><p></p><p><strong>Direction</strong></p><p>Use of "Direction" allows the rotation of the "Text" from 'left to right' and 'right to left'.</p><p></p><p><strong>Pause on hover</strong></p><p>By enable this checkbox to pause the scrolling bar on hover on it.</p></td></tr><tr><td><p>Banner with scrolling bar </p><p>[ Marquee bottom ]</p></td><td><p><strong>Text</strong><br>Enter text to display top scrolling bar on banner.<br><br><strong>Uppercase text</strong><br>Enable this checkbox, you can see text style in uppercase.</p><p></p><p><strong>Bold text</strong><br>Enable this checkbox, you can see text style in bold.<br></p><p><strong>Space between blocks</strong></p><p>"Space between blocks" is to give left and right side spacing to the text of the section. You can adjust the spacing and set it to the minimum spacing of “20px” and a maximum spacing of “100px.”</p><p></p><p><strong>Speed</strong></p><p>Speed is used to customize the scrolling speed of the text in the section.</p><p></p><p><strong>Direction</strong></p><p>Use of "Direction" allows the rotation of the "Text" from 'left to right' and 'right to left'.</p><p></p><p><strong>Pause on hover</strong></p><p>By enable this checkbox to pause the scrolling bar on hover on it.</p></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 and set your layout.

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

This “**New feature**” allows you to set product page layout according to your style:

{% embed url="<https://www.youtube.com/watch?v=lCyJcEYR1PE>" %}

***

## 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://697656745-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5NvthjEku1DrzU4mKb74%2Fuploads%2FhbiFFj9jh69Z201V8xe5%2Fproduct.png?alt=media&#x26;token=a7a0269d-f217-450b-a196-eb277e9119ba" alt=""><figcaption></figcaption></figure>

2. Scroll down to the **Metafields.** You should see the **Complementary products** here.\
   \
   To create [complementary products metafield](https://webibazaar.gitbook.io/poco-documentation/create-custom-metafield) click on link to show how to create.

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/VmDzptgS4cqdkz0fc38x/complementary-prdt-meta2.png" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://697656745-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5NvthjEku1DrzU4mKb74%2Fuploads%2FN3b4YzCB6NausmOer4w1%2Fproduct_2.png?alt=media&#x26;token=9fb792e8-0b76-4454-97e3-569fd557e5ae" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://697656745-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5NvthjEku1DrzU4mKb74%2Fuploads%2FXpsCREIHTTddjZoFBoYl%2Fproduct_3.png?alt=media&#x26;token=3ce505a2-c522-4e35-8c26-d8c2e595ee61" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://697656745-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5NvthjEku1DrzU4mKb74%2Fuploads%2FQKEfPW9m4R8Qtblb8Xom%2Fproduct_4.png?alt=media&#x26;token=0deaa52c-7972-4104-8f9b-75050d855e4e" 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://697656745-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5NvthjEku1DrzU4mKb74%2Fuploads%2FPIRCLODUejMrNSVDb6rD%2Fproduct_5.png?alt=media&#x26;token=d3a85e41-72e2-4ada-b685-edc0e87fa443" 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.&#x20;

<figure><img src="https://697656745-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5NvthjEku1DrzU4mKb74%2Fuploads%2FPxuVCuLLWDmUilwZ0JY9%2Fproduct_6.png?alt=media&#x26;token=d57333db-6e03-4374-a825-a106ee979199" alt=""><figcaption></figcaption></figure>