Product page section

Product page section

Layout


  • Display or hide breadcrumbs

Product gallery (product images)


  • Zoom type (this controls the zoom over the main product image)
    • On hover
    • On click/touch
  • Display arrows (this displays arrows at the left and right of the main product image)
  • Display Thumbs arrows (this displays arrows at the top and bottom of the product thumbnail images)

Product properties (options)


  • Options style (for product variants)

    • Select dropdown list (default dropdown menu style)
    • Color swatches (visual clickable choices)

  • Display quantity selector

  • Display vendor

  • Display collections

  • Display tags

  • Display SKU

  • Display product type

  • Display share icons


Add Variant swatches (eg. for Color options)


You can add variant swatches instead of the usual dropdown menus for your product options. Swatches are visual clickable options that help customers see all the options at once, without the need of opening some dropdown lists. 

Variant swatches are by default for the variant "Color" (or "Colour"). You can make all your variant options to become swatches as well.

Go to Online Store > Theme > Customize Theme > General Settings > Variant Swatches

List option names separated by comma eg. Color, Material

Color swatches

As you can see in the video above, you can add different color swatches:
  • Basic color with color names like "blue" or "red"
  • Custom color using a color picker and/or hexadecimal codes like #000000
  • Custom image


Icons


Display some product icons for key infos to increase the trust factor and urgency to buy:
  • Inventory left
  • Shipping or Returns
  • Quality
  • Safety

Related products

Display related products at the bottom of each product page. Products will be displayed in a slider, and you can choose how many product you want to display. You can also move the Add to cart button on hover over the product image or simply disable it and don't show any button.



Learn how to manually select the related products in each product page. Click here.


Mobile tweaks

You can change the location of the variant options and the product description on mobile. You can also display less or more content by default using the Product description Excerpt dropdown. You can also show/hide the variant option label (eg. Color, Size...)


Content tabs

NEW TABS SYTEM - DETAILS HERE


Product reviews


Product reviews widget requires the Product Reviews app installed and enabled (see General Settings > Apps). You can display the Reviews widget below the product description or inside a content tab (if Tabs are enabled). In other words, if content tabs are disabled, product reviews will be displayed under the product description section. If tabs are enabled, product reviews will be inside the tab called Reviews. To re-order this Reviews tab, read at the bottom here.

*New* Konversion now integrates with Loox Photo Reviews and Yotpo. 

    • Related Articles

    • Product Page Upsell

      1) HOW DOES IT WORKS? Create a navigation menu called Product upsell. The handle needs to be: product-upsell 2) WHERE IS IT DISPLAYED? In a specific product page: Add a menu item and name it following this structure: products/product-handle And/Or In ...

    • Hide variant dropdown on the product page when there is only 1 option (1 variant)

      You can hide variant dropdown on the product page when there is only 1 option (1 variant) in the Konversion theme. Go to Customize Theme > Product Pages (section) > Scroll to Hide variants with only one option

    • How to add custom colors into the color swatches for variants/options on the product page

      When I add a single color name like red, green it works fine but when the color name is like dark grey, indigo blue it's not showing up any color? You need to create custom colors from theme settings. If you want to define the Dark grey color, please ...

    • Add a video instead of an image in the product page's main images slideshow

      We want to display our video intro in all the product pages right before the main image shows up. The video link is: https://youtu.be/DGGouJ4F_kU Sample product page: https://www.fadstop.com/products/2018-best-selling-adorable-talking-hamster How can ...

    • Cart page upsell

      1. Create a navigation menu called Cart upsell. The handle needs to be: cart-upsell 2. [Trigger product] Add a menu item and name it following this structure: "products/product-handle". This product will serve as the upsell trigger (the upsold ...