Product Page and Quick View
This section includes settings to configure the product info page and the quick view popup.
Theme settings -> Product Page and Quick View
Here you can configure the elements for the product info page & the quick view popup.
Product Page
Quick View Popup
You may show or hide any element:
Product elements for product info page & quick view popup
Here you can choose a layout that suits best your product info page and a quick view popup. The theme includes five layouts:
Layout #1
Layout #2
Layout #3
Layout #4
Layout #5
Gallery with side thumbnails
Gallery with thumbnails below
Sheet gallery
Gallery by grid
Centered gallery and information
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.
Product Image Gallery
If you enable this option, the gallery images will be shown on mobile view:
Product Image Gallery
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.
Elements
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, 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, 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.
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:
Product labels
Here you can configure the product labels. You may disable labels for all store products.
Two conditions are required to show the product label:
- 1.Enable labels in theme settings.
- 2.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 "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 here.
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
The product reviews will be shown in the product information section, once you add the Reviews block in Products -> Product page.
Please note, the product reviews app needs to be installed! You can choose one of the proposed Reviews apps in Theme settings -> Reviews. Check this help page for more details.
The tab for reviews on the product page can be enabled in Products -> Product page -> Tabs. More information you can find here.
If you enable this option, only review stars will be shown. The number of reviews will be hidden.
To display the product information on product pages, the Details block should be added in Products -> Product page.
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.
This option is ticked by default. But will be active with the configured payment_terms. Learn more here. Deactivate the option if it is not necessary to display the “Shop pay installments” banner on your store.
In order to allow customers to subscribe to their favorite products for purchasing, enable the option.
Please note, 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 countdownThis 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 dateHere 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 weekHere 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 typed Saturday, Sunday then the system will show “Order in the next XX hours XX minutes to get it by Monday 04/05/2020 “.
To display the real-time visitors, make sure to add the corresponding block in Products -> Product page -> Visitors.
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.
The current popups will be displayed in the product information section if you add the Popups block in Products -> Product page.
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:
<div class="container container--sm px-0">
<p class="mb-50 text-center">This is an approximate conversion table to help you find your size. If you have already purchased an item by our brand, we recommend you select the same size as indicated on its label.</p>
</div>
<div class="row mt-60">
<div class="col-12 col-md-9">
<h4 class="mb-15 text-center">Women’s apparel sizing</h4>
<div class="table-wrap">
<table class="table-size-guide responsive-table table-center mb-35">
<tbody>
<tr>
<th>INTERNATIONAL</th>
<th>XS</th>
<th>S</th>
<th>M</th>
<th>L</th>
<th>XL</th>
<th>XXL</th>
<th>XXXL</th>
</tr>
<tr>
<td>EUROPE</td>
<td>32</td>
<td>34</td>
<td>36</td>
<td>38</td>
<td>40</td>
<td>42</td>
<td>44</td>
</tr>
<tr>
<td>US</td>
<td>0</td>
<td>2</td>
<td>4</td>
<td>6</td>
<td>8</td>
<td>10</td>
<td>12</td>
</tr>
<tr>
<td>CHEST FIT (INCHES)</td>
<td>28"</td>
<td>30"</td>
<td>32"</td>
<td>34"</td>
<td>36"</td>
<td>38"</td>
<td>40"</td>
</tr>
<tr>
<td>CHEST FIT (CM)</td>
<td>716</td>
<td>76</td>
<td>81</td>
<td>86</td>
<td>91.5</td>
<td>96.5</td>
<td>101.1</td>
</tr>
<tr>
<td>WAIST FIR (INCHES)</td>
<td>21"</td>
<td>23"</td>
<td>25"</td>
<td>27"</td>
<td>29"</td>
<td>31"</td>
<td>33"</td>
</tr>
<tr>
<td>WAIST FIR (CM)</td>
<td>53.5</td>
<td>58.5</td>
<td>63.5</td>
<td>68.5</td>
<td>74</td>
<td>79</td>
<td>84</td>
</tr>
<tr>
<td>HIPS FIR (INCHES)</td>
<td>33"</td>
<td>34"</td>
<td>36"</td>
<td>38"</td>
<td>40"</td>
<td>42"</td>
<td>44"</td>
</tr>
<tr>
<td>HIPS FIR (CM)</td>
<td>81.5</td>
<td>86.5</td>
<td>91.5</td>
<td>96.5</td>
<td>101</td>
<td>106.5</td>
<td>111.5</td>
</tr>
<tr>
<td>SKORT LENGTHS (SM)</td>
<td>36.5</td>
<td>38</td>
<td>39.5</td>
<td>41</td>
<td>42.5</td>
<td>44</td>
<td>45.5</td>
</tr>
</tbody>
</table>
</div>
<h4 class="mb-15 text-center">Men’s apparel sizing</h4>
<div class="table-wrap">
<table class="table-size-guide responsive-table table-center">
<tbody>
<tr>
<th>INTERNATIONAL</th>
<th>XS</th>
<th>S</th>
<th>M</th>
<th>L</th>
<th>XL</th>
<th>XXL</th>
<th>XXXL</th>
</tr>
<tr>
<td>EUROPE</td>
<td>32</td>
<td>34</td>
<td>36</td>
<td>38</td>
<td>40</td>
<td>42</td>
<td>44</td>
</tr>
<tr>
<td>US</td>
<td>0</td>
<td>2</td>
<td>4</td>
<td>6</td>
<td>8</td>
<td>10</td>
<td>12</td>
</tr>
<tr>
<td>CHEST FIT (INCHES)</td>
<td>33-35"</td>
<td>36-38"</td>
<td>39-41"</td>
<td>42-44"</td>
<td>45-47"</td>
<td>48-50"</td>
<td>51-53"</td>
</tr>
<tr>
<td>CHEST FIT (CM)</td>
<td>84-89</td>
<td>91-97</td>
<td>88-104</td>
<td>107-112</td>
<td>114-119</td>
<td>122-127</td>
<td>129-134</td>
</tr>
<tr>
<td>WAIST FIR (INCHES)</td>
<td>28"</td>
<td>30"</td>
<td>32"</td>
<td>34"</td>
<td>36"</td>
<td>38"</td>
<td>40"</td>
</tr>
<tr>
<td>WAIST FIR (CM)</td>
<td>71</td>
<td>76</td>
<td>81</td>
<td>86</td>
<td>91.5</td>
<td>96.5</td>
<td>101.5</td>
</tr>
<tr>
<td>SKORT LENGTHS (SM)</td>
<td>76</td>
<td>77.5</td>
<td>79</td>
<td>81</td>
<td>82.5</td>
<td>84</td>
<td>85.5</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-12 col-md-3 pt-40">
<img src="https://cdn.shopify.com/s/files/1/0026/2956/6516/files/size-guide.png?3075023775676419967" alt="Size Guide" />
<div class="mt-40 fs">
<h6 class="mb-0">CHEST:</h6>
<p class="m-0">Around the fullest part of the neck, at the base.</p>
<h6 class="mb-0">WAIST:</h6>
<p class="m-0">Around the narrowest part of the waist.</p>
<h6 class="mb-0">HIPS:</h6>
<p class="m-0">Around the widest point of the hips.</p>
<h6 class="mb-0">SKORT LENGTHS:</h6>
<p class="m-0">From the crotch to the anklebone on the inside of the leg.</p>
</div>
</div>
</div>
Please note, 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:
<h4 class="mb-10">Shipping</h4>
<ul class="list-sm mb-30">
<li>Complimentary ground shipping within 1 to 7 business days</li>
<li>In-store collection available within 1 to 7 business days</li>
<li>Next-day and Express delivery options also available</li>
<li>Purchases are delivered in an orange box tied with a Bolduc ribbon, with the exception of certain items</li>
<li>See the delivery FAQs for details on shipping methods, costs and delivery times</li>
</ul>
<h4 class="mb-10">Returns And Exchanges</h4>
<ul class="list-sm">
<li>Easy and complimentary, within 14 days</li>
<li>See conditions and procedure in our return FAQs</li>
</ul>
Shows the link to open a "contact us form" popup.
You may edit texts at Online Store, press the dotted [...] button next to "Customize" and hit the "Edit default theme content". It uses the same texts as on the contact us page. How to edit the contact form text you can read here.
Use the Buttons and quantity block in Products -> Product page to place the content described below.
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:
Layout #1
Layout #2
Layout #3
Layout #4
The button “Add to cart” will have a full width, the buttons “Add to wish list” and “Add to compare” will have a half-width (2 buttons in 1 row).
All buttons will have a full width (3 rows).
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
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 help page.
The recipient fields will be shown by hitting the "I want to send this as a gift" checkbox.
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 here.
If you disable this option, the customization will not be applied.
Please note, the app needs to be installed for the correct work of the Wishlist/Compare functionality! You can choose one of the proposed Reviews apps in Theme settings -> Wishlist & Compare. More about the Wishlist/Compare functionality you can read here.
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 complementary products will be shown on product pages by adding the appropriate block in Products -> Product page -> Complementary products.
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.
Show 'Share on Facebook', 'Share on Pinterest' buttons, etc. by adding the Social share buttons 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 here.
Select the social share buttons size: “Small” or “Large”:
Small
Large
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 here.
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:
To edit the product information and its visibility displayed in the Quick View popup, go to Products -> quick-view and use blocks in the Quick view section.
Last modified 1mo ago