Kingdom > Product page

For your product pages, Kingdom lets you change the gallery style, tweak the image aspect ratio, enable various features such as zoom, related products and product sharing.

To tweak the layout of your product pages:

1. Navigate to a product page in the theme editor.
2. Click the Sections tab.
3. Click Product page / Product information.
4. You will see a list of checkboxes to show or hide various information from the product page.
5. Under the Gallery options, you can edit the design of the gallery. 
   1. Sliders work very well for tall, portrait or square images. They also work well if you have many images and don't want your users to scroll a lot.
   2. Scroll galleries work well for square or landscape images. But they will always turn into sliders on mobile devices.
6. Pagination - you can choose between dots or thumbnails.
7. Three more checkboxes for spacing, image zoom and video looping. 

Product recommendations

Product recommendations are handled by Shopify's algorithms, which you can read more about here: https://help.shopify.com/en/themes/development/recommended-products

Customize product page content display (desktop screens)

How to increase the product description width?

If you don't have a store focused on large images but on lots of content for the product page, you might want to increase the width of the product's description text area on desktop screens, while decreasing the width of the gallery.

For this purpose, please add the following CSS snippet at the end of the theme's main stylesheet file -  assets/theme.css (or assets/theme.scss.liquid file in older theme versions):

@media all and (min-width: 1025px) {
 .template-product .product__text {
    width: 50% !important;
    max-width: unset !important;
 }
.template-product .product-gallery.flickity-enabled:not(.product-gallery--fill) .product-gallery__item img {
    width: 50% !important;
 }
}

If needed, you can edit the values in the code.

How to swap product description and product gallery position?

Again at the end of the assets/theme.css you can use this CSS code to swap the original product description text and gallery on desktop screens:

@media all and (min-width: 1024px) {
  .product { flex-direction: row-reverse; }
  .product-gallery--scroll ~ .product-gallery__thumbnails.product-gallery__thumbnails--thumbnails {
    position: sticky !important;
  }
}

If you are using these custom CSS codes, please select the "Slider" product gallery option for the navigation to display correctly - screenshot.