Product page

Live Chat Support | Webibazaar Template

Customize product page

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.

Settings	Description
Enable sticky content on desktop	You can make the content sticky on a desktop device by checking this checkbox.
Color scheme	In this section, you can change the background and foreground color of a section using the color scheme. Scheme 1 Scheme 2 Scheme 3 Scheme 4 Scheme 5
Media	Desktop media width You will find customizations for adjusting the desktop media width within this section: Small Medium Large Constrain media to screen height By enabling this checkbox, you can limit the height of media to the screen height. Media fit The Media fit customization setting is as follows: Original Fill Desktop layout Desktop layout customization setting is as follows: Stacked 2 columns Thumbnails Thumbnail carousel Thumbnail image ratio The Thumbnail image ratio customization setting is as follows: Adapt to image Portrait Square Desktop media position The desktop media position customization setting is as follows: Left Right Image zoom The Image zoom customization setting is as follows: Open lightbox Click and hover No zoom Hide other variants By enabling this checkbox, you can hide other variants’ media after selecting a variant. Enable video looping Enabling "Play video on loop" will result in the video continuously looping. When the video finishes playing, it will automatically restart.
Mobile layout	Mobile layout Mobile layout customization setting is as follows: 2 columns Show thumbnails Hide thumbnail

Add block

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

Block	Description
Custom badge	Add custom badge Enter text to display as a Badge in the "Text" block. Background color Enter a color code for Badge background color. Text color Enter a color code for Badge Text color.
Text	Text Enter text to display as a Discription in the "Text" block. Text style Customization of the "Text style" in the main product page is as follows: Body Subtitle Uppercase Text alignment Customization of the "Text alignment" in the main product page is as follows: Left Center Right
Title	Show product "Title" for your main product.
Product meta	"Product meta" is for customizing product vendor, type, and tags which are as follows: Show vendor Show type Show tags
Countdown timer	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. Timer ending text The entered text will be displayed as a timer expiration message. It will appear once the date has expired.
Image	Image "Image" is taken into use to add an image banner in the product section. Image link Use the "Image link" to add a link to the image in the section. Image alignment Left Center Right
Stock bar	"Stock countdown" is for customizing the product stock. Maximum stock Adjust maximum the stock for the stock countdown. Maximum product stock can be given up to "200". Limit stock cut off Adjust the limited stock cut-off for the stock countdown. Limit stock message Display limit stock message. In stock message Display the "In stock" message. Continue selling message Display the "Continue selling" message. Colors Customize the colors of Limited stock, In stock and Continue selling text.
Price	This block has no customizable settings. After adding this block, you will be able to view the product price.
SKU	Show product "SKU" for your main product. Text style Customization of the "Text style" in the main product page is as follows: Body Subtitle Uppercase
Inventory status	The inventory status, indicating whether the product is in stock or out of stock. Text style Customization of the "Text style" is as follows: Body Subtitle Uppercase Low inventory threshold 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. Show inventory count By enabling this checkbox, you can show inventory count.
Quantity selector	This block has no customizable settings. After adding this block, you will be able to view the quantity selector.
Variant picker	"Variant picker" is to customize the product variant. 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. Dropdown Pills Enable color swatches By enabling this checkbox you can show the "Variant color." Swatches source 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." Variant image Custom image Swatch type Following is the color swatches type customization of the section: Round Square
Buy buttons	Enable the Show dynamic checkout buttons box to display any dynamic checkout options enabled by you in your payments settings. Enable the Show recipient information form for gift card products box to display gift recipient form
Description	After adding this block, you will be able to view the product description.
Share	Clickable text that allows customers to share the product on social media.
Share button	Enabling the checkbox below will display the share button. Share on Facebook Tweet on Twitter Pin on Pinterest
Custom Liquid	Add Apps.
Content	Title Enter text to display as a title in the section. Content Enter text to display as a "Description" in the section. Content from the page "Select page" is for selecting a page in a section.
Trust content	Heading Enter text to display as a title in the "Trust content" block. Payment methods : Show payment icons: By enabling this checkbox you can show the “Payment icon”. Heading Enter text to display as a title in the section. Description Enter text to display as a "Description" in the section. Security : Heading Enter text to display as a heading in the section. Image Use "Image" to add the image to the section. Image width "Image width" is used to change the size of the section image. You can give the minimum width "100" and maximum width "600" of the image.
Collapsible row	The section "Collapsible row" is for adding collapsible rows. Heading Enter text to display as a title in the "Collapsible row" block. Icon None Flash sale Apple Banana Bottle Box Carrot Chat bubble Check mark Clipboard Dairy Dairy free Dryer Eye Fire Gluten free Heart Iron Leaf Leather Lightning bolt Lipstick Lock Map pin Nut free Pants Paw print Pepper Perfume Plane Plant Price tag Question mark Recycle Return Ruler Serving dish Shirt Shoe Silhouette Snowflake Star Stopwatch Truck Washing Open collapsible row By enabling this checkbox, you can show open collapsible row. Product description Use "Product description" to add the description of the product. Row content Enter text to display as content in the row. Row content from page By using these settings, the selected page will display its content like row content.
Offer	Heading Enter text to display as a title in the "Offer" block. Icon None Flash sale Apple Banana Bottle Box Carrot Chat bubble Check mark Clipboard Dairy Dairy free Dryer Eye Fire Gluten free Heart Iron Leaf Leather Lightning bolt Lipstick Lock Map pin Nut free Pants Paw print Pepper Perfume Plane Plant Price tag Question mark Recycle Return Ruler Serving dish Shirt Shoe Silhouette Snowflake Star Stopwatch Truck Washing Tag Content Enter text to display as a content in the section. Use of this feature you can share information about your brand with your customers. Customize the tag Icon color.
Pop-up	Link label Enter text to display as a title in the "Link label" block. Page By using these settings, the selected page will display its content in pop-up.
Product rating	Displays the average product rating in stars with the number of reviews in parenthesis
Complementary products	Heading Enter text to display as a title in the "Complementary products" block. Heading size Following is the font size customization of the heading of the section: Small Medium Large Show as collapsible row By enabling this checkbox you can show product as collapsible row. Icon None Flash sale Apple Banana Bottle Box Carrot Chat bubble Check mark Clipboard Dairy Dairy free Dryer Eye Fire Gluten free Heart Iron Leaf Leather Lightning bolt Lipstick Lock Map pin Nut free Pants Paw print Pepper Perfume Plane Plant Price tag Question mark Recycle Return Ruler Serving dish Shirt Shoe Silhouette Snowflake Star Stopwatch Truck Washing Maximum products to show: "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. Number of products per page: "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. Pagination style The style of the Complementary products that appears below the complementary product cards: Dots Counter Numbers Product card : Image ratio The customization of the image ratio in the product section are as follows: Portrait Square Show the second image on hover By enabling this checkbox you can "Show the second image on hover". Show product type By enabling this checkbox you can “Show product type”. Show vendor By enabling this checkbox you can display the “Product vendor”. Enable quick look button Enable this checkbox to display the "Quick look button".
Icon with text	In this block, you can change the background and foreground color of a section using the color scheme. Scheme 1 Scheme 2 Scheme 3 Scheme 4 Scheme 5 Background image You can add an image behind the content by using a background image. Layout Icon with text layout customizations in a page are as follows: Horizontal Vertical Content : First icon None Flash sale Apple Banana Bottle Box Carrot Chat bubble Check mark Clipboard Dairy Dairy free Dryer Eye Fire Gluten free Heart Iron Leaf Leather Lightning bolt Lipstick Lock Map pin Nut free Pants Paw print Pepper Perfume Plane Plant Price tag Question mark Recycle Return Ruler Serving dish Shirt Shoe Silhouette Snowflake Star Stopwatch Truck Support Washing First image Use the first image to add to the section. First heading To display the heading for the icon with text block, add text here.
Payment icons	Heading To display the heading for the payments icon, add text here.
Personalize label	Label Enter text to display as a Label in the "Text" block.

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.

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

---

Setting the Complementary products(Metafield)

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

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

1. To add products, click on Complementary products field.

2. Select products.

1. Select a product and click on Add.

1. Click Save to save your changes.

---

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 mediahttps://www.youtube.com/watch?v=O5jDlAR2avY&ab_channel=MotorOctanelike 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:

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

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.