Product Page and Quick View
This section includes settings to configure the product info page and the quick view popup.
Last updated
Was this helpful?
This section includes settings to configure the product info page and the quick view popup.
Last updated
Was this helpful?
Here you can configure the elements for the product info page & the quick view popup.
You may show or hide any element:
Here you can choose a layout that suits best your product info page and a quick view popup. The theme includes five layouts:
Please note, the layout option applies to all products at your store.
You may have different product page layouts per product. Add gallery-layout-1 tag to the product in Shopify Admin -> Products, where 1 is the number of the layout from 1 to 5.
Example: Add the gallery-layout-3 tag to the product to enable Layout #3 for this product:
Here you can configure the product’s gallery.
Please note, the recommended size for the product’s image is 1300 x 1667 pixels.
If you enable this option, the gallery images will be shown on mobile view:
If you enable this option, the product images popup will be shown by clicking on an image, both on desktop and mobile view. This is how it may look on mobile:
If you enable this option, the zoom button under the main image will be shown. The button activates a full-screen popup.
Please note, the button will be activated only with the enabled option “Enable fullscreen gallery popup”.
If you enable this option, the “Video” button under the main image will be shown.
This button navigates to the first product video. The visitor may navigate to the video media using arrows or thumbnails.
If you enable this option, the product video will be played automatically. Disable this option, if you need to play a video on click.
This option enables zoom inside the main image container. The zoom will be activated by the mouse hovering on the main image.
This option enables you to determine the zoom ratio inside the main image container. Use the scale to change the parameters from 1.1 to 5.
Set image height and size from “Extend Collection Page settings” if you want to leave parameters applied in Theme settings -> Product -> Collection Page -> Image. Or choose “Set this section settings” to customize images on product pages regardless of the collection page settings.
Please note, that the product images should have the same proportion as the image container. If they have a different proportion, you will see a white space on the left/right or top/bottom.
Here you can set the proportion for the image container.
The default value is - 128
100 to show a square image container
50 to show the 'landscape' proportion
150 to show the 'portrait' proportion
Please note, that this option doesn't work for 'Image resize = Auto' which comes next.
Here you have 5 resize options for images:
Auto - if you choose this option, ignore the previous option of the image height (in % of the width). The image container and the image size are generated based on the source image dimensions.
Contain - CSS object-fit = contain. If you choose this option, the image will look like an object-fit demo.
Cover - CSS object-fit = cover. If you choose this option, the image will look like an object-fit demo.
Stretch by width - in this option, the image width fits the container width. It is centered vertically. If the image height is more than the container, cut the image from the top and the bottom. If the image height is less than the container, add white space at the top and the bottom of the image.
Stretch by height - in this option, the image height fits the container height. The image is centered horizontally.
Here you can decide if to resize product images automatically, by choosing the option "Auto".
Enable an option "Use settings like on desktop", if you want to apply this section settings for mobile view.
Decide on the product image zooming type on mobile using one of the options in the drop-down:
Theme zoom - the built-in theme zooming works in two clicks in the popup. Press a product main image to open the popup and then activate zooming by pressing on the image twice. Then, you can move the zoomed image to any side. To deactivate the image zooming, click twice on the image. Next, press the "X" button on the top right to close the popup.
Native browser zoom - select the option to use the default browser's zooming feature.
Disable - don't group images
Enable - group product images for all products at your store
Activate with tag 'group-gallery' - group product images only for tagged products. Add the group-gallery tag to products for which you need to group product images:
Step 1:
To group product images, navigate to your Shopify admin -> Products and select a product. Here you need to group images by color manually in the "Media". The first image is the main one of the corresponding color variant. So, all other images after the main image will be included in the color group:
Step 2:
After these changes are done, you need to assign the main image of a color group to each product variant in "Variants":
If you enable this option, the image of the product remains sticky, which means it will be shown while scrolling down the product page until the button “BUY IT NOW”:
If you disable this option, there will be a blank white space, instead of the product's gallery:
Here you can configure the product labels. You may disable labels for all store products.
Two conditions are required to show the product label:
Enable labels in theme settings.
Configure the product.
If you enable this option, the “In stock” label will be shown for products with enabled inventory tracking and quantity bigger than zero.
If you enable this option, the “Out of stock” label will be shown for products with enabled inventory tracking and zero quantity.
If you enable this option, the “Sale” label will be shown for products with configured "compare at" price in Shopify Admin -> Products.
Please note, you can configure “New” and “Hot” labels via Metafields.
If you enable this option, the “New” label will be shown for products with meta field labels.new = true
If you enable this option, the “Hot” label will be shown for products with meta field labels.hot = true
If you enable this option, only review stars will be shown. The number of reviews will be hidden.
If you enable this option, the product’s SKU will be shown.
If you enable this option, the product’s barcode will be shown.
If you enable this option, the product’s stock status will be shown.
If you enable this option, the product’s type will be shown.
If you enable this option, the product’s vendor will be shown.
If you enable this option, the “compare at” price will be shown.
If you enable this option, the tax text will be shown.
In order to allow customers to subscribe to their favorite products for purchasing, enable the option.
Please note, that the Subscription app needs to be installed!
If you enable this option, a range of the stock countdown for the product will be shown like this:
This option enables you to set the boundary value for 'Hurry! Only XX Left in Stock!'
Configure options for 'Order in the next XX hours to get it by YY date' block:
Hours of the day to reset delivery countdown
This option enables you to set hours of the day, till which the order should be done, to reset the delivery countdown.
Example:
If the current time is 10:45 AM and you set 15 hours, then the system will show “Order in the next 4 hours 15 minutes to get it by…”
Average delivery time of delivery countdown (days)
This option enables you to set the average number of days, at which the delivery will be done.
Example:
If today’s date is Thursday 30/04/2020, and you set 3 days, then the system will show “Order in the next XX hours XX minutes to get it by Sunday 03/05/2020 “.
Format of delivery countdown date
Here you can set the format of the delivery countdown date manually. A lot of options are available. Some of them are listed below.
Example:
If you set Day DD/MM/YYYY, the system will show Monday 04/05/2020.
If you set Day MM/YYYY, the system will show Monday 05/2020.
If you set Day YYYY, the system will show Monday 2020.
If you set Day, the system will show Monday.
If you set DD/MM/YYYY, the system will show 04/05/2020.
If you set Day DD/MM/YY, the system will show Monday 04/05/20.
If you set DD/MM/YYYY Day, the system will show 04/05/2020 Monday.
Exclude days of the week
Here you can type manually which days should be excluded from the delivery countdown date.
EXAMPLE:
If today’s date is Thursday 30/04/2020, you set 3 days for a delivery countdown date, and then in the field “Exclude days of the week” you type Saturday, Sunday then the system will show “Order in the next XX hours XX minutes to get it by Monday 04/05/2020 “.
Here you can set the minimum value of visitors, which can be shown in “Real-time XX visitor(s) right now”. You can choose a value from 1 to 50.
Here you can set the maximum value of visitors, which can be shown in “Real-time XX visitor(s) right now”. You can choose a value from 1 to 50.
Here you can set the maximum value stroke of visitors, shown in “Real-time XX visitor(s) right now”. You can choose a value from 1 to 20.
Here you can choose the minimum update interval in seconds, which changes the value of visitors at a particular time in seconds.
Here you can choose the maximum update interval in seconds, which changes the value of visitors at a particular time in seconds.
EXAMPLE for Configure options for 'Real-time XX visitor right now':
Visitors min value: 20 Visitors max value: 40 Visitors max value stroke: 10 Visitors min update interval: 3 Visitors max update interval: 6 Here the span of visitors in real-time is from 20 to 40, the value stroke is set for 10 and the visitor's update interval in seconds has a span from 3 to 6 seconds. These settings mean, that every 3-6 seconds the visitor’s minimum value will increase from 1 to 10 visitors, and the maximum will remain 40.
IMPORTANT! In order to avoid a span in the visitor’s update interval, the same value needs to be set both for the visitor's minimum and maximum update interval, e.g.: if you set 5 seconds both for the visitor's minimum and maximum update interval, the updates will be shown strictly every 5 seconds only.
If you enable this option, a “Size guide” popup will be shown.
Content for 'Size guide'
Here you can set content for the size guide popup. Add and edit page at Online Store -> Pages. If no page is selected for the content for “Size guide”, a page “Include Popup Size Guide” will be selected by default.
An HTML example of it you can find here:
Please note, that these settings work for all product pages. If you need a unique “Size chart” for an individual product, you can configure it via Metafields.
If you enable this option, a delivery information popup will be shown.
Content for 'Delivery return'
Here you can set content for the delivery info popup. Add and edit page at Online Store -> Pages. If no page is selected for the content for “Delivery return”, a page “Include Popup Delivery Return” will be selected by default.
An HTML example of it you can find here:
Shows the link to open a "contact us form" popup.
If you enable this option, the product’s quantity input will be shown.
Here you can set the layout of the buttons: “Add to cart” button, “Add to Wishlist”, “Add to compare” and quantity input. The theme includes 4 layouts:
If you enable this option, an “Add to cart” button will be shown.
In the “Button 'Add to cart' size”, one can choose the button's size: “Default” or “Large”.
If you enable this option, the button “BUY IT NOW” will be shown:
If you enable this option, the checkbox for the agreement with the terms and conditions will be shown:
The title of this checkbox can be changed in 3 steps:
Step 1: Edit default theme content
Go to “Edit default theme content”
Step 2: Products
Click on the tab “Products”:
Step 3: Product dynamic checkout
Scroll to the “Product dynamic checkout” block
The recipient fields will be shown by hitting the "I want to send this as a gift" checkbox.
If you disable this option, the customization will not be applied.
If you enable this option, an “Add to wish list” button will be shown.
If you enable this option, an “Add to compare” button will be shown.
If you need to show unavailable pickup availability, enable this option.
The number of products displayed in the product information section can vary from 1 to 10 depending on the value you set in the “Limit” slider.
To modify the button style of the complementary products from “Quick Buy” to “Add to cart”, use the “Show add to cart instead of quick view” option.
Select the social share buttons size: “Small” or “Large”:
If you enable this option, a footbar will be shown on a product page:
You can decide, what should be shown in the footbar simply by enabling or disabling the following information options for the product: title, price, reviews, options (variants), options type, quantity, and a button “Add to cart”.
In the “Layout”, you can decide if to use the same settings as for the product pages or choose one of the proposed layouts from the dropdown list.
Enable the “Show full details button” option, in case a “View full details” button should be shown in the Quick view popup:
Check the following for an example of how to group product images.
If you enable this option, the "Pre-order" label will be shown for products with enabled inventory tracking and zero quantity. How to configure the 'Pre order' feature you can read .
Check this for more details about the product meta fields.
The product reviews will be shown in the product information section, once you add the block in the Products -> Product page.
Please note, that the product reviews app needs to be installed! You can choose one of the proposed Review apps in Theme settings -> Reviews. Check this for more details. Or use any app from the Shopify App Store.
The tab for reviews on the product page can be enabled in Products -> Product page -> Tabs. More information, you can find .
To display the product information on product pages, the block should be added in Products -> Product page.
To display the product price on product pages, add the block in Products -> Product page.
This option is ticked by default. But will be active with the configured payment_terms. Learn more . Deactivate the option if it is not necessary to display the “Shop pay installments” banner on your store.
To use this functionality, add the block in Products -> Product page.
This feature requires adding the block in Products -> Product page.
To display the real-time visitors, make sure to add the corresponding block in Products -> Product page -> .
The current popups will be displayed in the product information section if you add the block in Products -> Product page.
Check this for more details about the product meta fields.
How to add and edit pages you can read .
You may edit texts at the Online Store by pressing the dotted [...] button next to "Customize" and hitting the "Edit default theme content". It uses the same text as on the Contact Us page. How to edit the contact form text you can read .
Use the block in Products -> Product page to place the content described below.
More information about dynamic checkout buttons you can find .
Once you have set up the Gift Card in your admin, you can activate the recipient form so customers can complete and send their custom message to someone else. Additionality customers can decide if to send the Gift Card immediately or to schedule a specific date. For more details, read the following .
If you enable this option, you can customize your dynamic checkout button. In our theme it is yellow, but you can easily change its color and the font to the ones you like. More information on how to apply color settings for the dynamic checkout button, you can find .
More information about how to customize your dynamic checkout button you can find .
Please note, that the app needs to be installed for the correct work of the Wishlist/Compare functionality! You can choose one of the proposed apps in Theme settings -> Wishlist and Compare. More about the Wishlist/Compare functionality, you can read .
We use the free app for our demo.
This functionality requires adding the block in Products -> Product page.
How to configure the pickup availability on your store, you can read .
The complementary products will be shown on product pages by adding the appropriate block in Products -> Product page -> .
Show 'Share on Facebook', 'Share on Pinterest' buttons, etc. by adding the block in Products -> Product page. You can select the list of icons that should be shown on your product pages in Theme settings -> Social Media - Social share buttons. Learn more .
If you enable this option, the usage information sidebar section will be added to the Sections list below the “Footer” section and shown on the right of the screen. In this sidebar, you can see how many people are viewing the item, how many people have added it to a cart, and how many people have already bought the item. You can configure content for the sidebar section in Products -> Usage information sidebar. More information about how to customize the sidebar you can find .
To edit the product information and its visibility displayed in the Quick View popup, go to Products -> quick-view and use blocks in the section.
