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

Video manual list

Here you can configure the elements for the product info page & the quick view popup.

You may show or hide any element:

Layout

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:

Gallery

Here you can configure the product’s gallery.

Please note, the recommended size for the product’s image is 1300 x 1667 pixels.

Show thumbnails on mobile

If you enable this option, the gallery images will be shown on mobile view:

Enable Fullscreen gallery popup

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:

Show button 'Fullscreen gallery'

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

Show button 'Video'

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.

Enable autoplay video

If you enable this option, the product video will be played automatically. Disable this option, if you need to play a video on click.

Enable zoom with mouse

This option enables zoom inside the main image container. The zoom will be activated by the mouse hovering on the main image.

Zoom scale coefficient

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

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.

Gallery images height

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.

Image resize

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.

Image resize on mobile

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.

Group gallery by options

VIEW DEMO

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:

Group product feature requires the product media configurations:

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":

Check the following video tutorial for an example of how to group product images.

Enable sticky gallery

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:

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.

Show label 'In stock'

If you enable this option, the “In stock” label will be shown for products with enabled inventory tracking and quantity bigger than zero.

Show label 'Pre order'

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.

Show label 'Out of stock'

If you enable this option, the “Out of stock” label will be shown for products with enabled inventory tracking and zero quantity.

Show label 'Sale'

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.

Check this help page for more details about the product meta fields.

Show label 'New'

If you enable this option, the “New” label will be shown for products with meta field labels.new = true

Show label ''Hot''

If you enable this option, the “Hot” label will be shown for products with meta field labels.hot = true

Reviews

The product reviews will be shown in the product information section, once you add the Reviews 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 help page 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 here.

Hide reviews counter

If you enable this option, only review stars will be shown. The number of reviews will be hidden.

Product details

To display the product information on product pages, the Details block should be added in Products -> Product page.

Show product SKU

If you enable this option, the product’s SKU will be shown.

Show product barcode

If you enable this option, the product’s barcode will be shown.

Show product stock status

If you enable this option, the product’s stock status will be shown.

Show product type

If you enable this option, the product’s type will be shown.

Show product vendor

If you enable this option, the product’s vendor will be shown.

Price

To display the product price on product pages, add the Price block in Products -> Product page.

Show sale price details

If you enable this option, the “compare at” price will be shown.

Show taxes text

If you enable this option, the tax text will be shown.

Show payment terms

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.

Selling plan

Show selling plan select

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!

Stock countdown

To use this functionality, add the Stock countdown block in Products -> Product page.

Show range of stock countdown

If you enable this option, a range of the stock countdown for the product will be shown like this:

Stock countdown min value

This option enables you to set the boundary value for 'Hurry! Only XX Left in Stock!'

Delivery countdown

This feature requires adding the block Delivery countdown in Products -> Product page.

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

Visitors

To display the real-time visitors, make sure to add the corresponding block in Products -> Product page -> Visitors.

Configure options for 'Real-time XX visitor right now'

Min value

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.

Max value

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.

Max value stroke

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.

Min update interval

Here you can choose the minimum update interval in seconds, which changes the value of visitors at a particular time in seconds.

Max update interval

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.

Popups

The current popups will be displayed in the product information section if you add the Popups block in Products -> Product page.

Show button 'Size guide'

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

Check this help page for more details about the product meta fields.

Show button 'Delivery return'

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>

How to add and edit pages you can read here.

Show button 'Message'

Shows the link to open a "contact us form" popup.

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

Buttons & inputs

Use the Buttons and quantity block in Products -> Product page to place the content described below.

Show quantity

If you enable this option, the product’s quantity input will be shown.

Buttons layout

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:

Show button 'Add to cart'

If you enable this option, an “Add to cart” button will be shown.

Button 'Add to cart' size

In the “Button 'Add to cart' size”, one can choose the button's size: “Default” or “Large”.

Show dynamic checkout button

If you enable this option, the button “BUY IT NOW” will be shown:

More information about dynamic checkout buttons you can find here.

Show dynamic checkout confirmation checkbox

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

Show recipient information form for gift card products

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.

Custom style for dynamic checkout button

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.

More information about how to customize your dynamic checkout button you can find here.

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

We use the free Wishlist app for our demo.

Show button 'Add to wishlist'

If you enable this option, an “Add to wish list” button will be shown.

Show button 'Add to compare'

If you enable this option, an “Add to compare” button will be shown.

Pickup availability

This functionality requires adding the block Pickup availability in Products -> Product page.

How to configure the pickup availability on your store, you can read here.

VIEW DEMO

Show unavailable pickup availability

If you need to show unavailable pickup availability, enable this option.

Complementary products

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.

Social share buttons

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.

Social share buttons type

Select the social share buttons size: “Small” or “Large”:

Usage information sidebar

Show 'Usage information sidebar' section

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.

Footbar

Enable footbar

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

Quick View Only

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.

PreviousProduct -> Collection PageNextSearch

Last updated