Product page
The Product page section of Kingdom: the media gallery, its zoom and video options, and the blocks that show product details, variants and buy buttons.
Applies to: Kingdom 6.2.0 and later. Added in: Kingdom 2.0.0. Last checked: 2026-10-13 against Kingdom 6.2.0.
The Product page section shows one product: the media gallery on one side and the product details on the other. The section's own settings are the gallery settings. Everything in the details column, from the title to the buy buttons, is a block you add, remove and reorder.
Where to find it: Online Store → Themes → Customize → Products → Default product → Product page
The Product recommendations section under it has its own page: Product recommendations section.
Media gallery
- Gallery style chooses how the images show on desktop:
- Scroll (default): all images one under the other, and the product details stay in view while the customer scrolls.
- Slider: one image at a time, with arrows and pagination.
- On phones the gallery is always a slider.
- Scale slider images to fit the viewport shrinks each image so that it fits the height of the screen, without cropping. Use it when slider images are too large or cropped.
- Gallery pagination shows Dots or Thumbnails (small square previews) to move between the media.
- Add spacing between media adds a gap between the images.
- Enable image zoom lets customers select an image to open it full screen and move the mouse to look at the details.
- Enable video looping plays product videos again when they end.
Product videos, YouTube and Vimeo media and 3D models from Shopify admin show in the gallery too. A product with a 3D model also gets a View in your space button for augmented reality on supported phones.
Blocks
Every block below can be added with Add block in the Product page section. Most of them can be added once.
- Vendor, Title and Price show the product vendor (a link to all products of that vendor), the title and the price of the selected variant. Under the price, Shopify shows the Shop Pay installments message when Shop Pay Installments is on for your store.
- Text adds your own text. Text style shows it as Body, Subtitle (smaller) or Uppercase. It can be added several times.
- Show tax information shows "Tax included." when your prices include tax, and a link to your shipping policy when you have one.
- SKU / BARCODE shows the SKU and the barcode of the selected variant, when they are filled in.
- Variant picker shows one dropdown per product option. See Variant picker.
- Size guide shows a link to a size chart page. See the steps below.
- Back in stock alert shows an email form when the selected variant is sold out. See the steps below.
- Buy buttons shows the quantity selector, the Add to cart button and Shopify's dynamic checkout button. See Buy buttons.
- Description shows the product description. Truncate description shortens a long description to a small, medium or large excerpt with a Show more link.
- Collapsible tab adds a heading that opens to show text, the content of a page and an image. It can be added several times. See the steps below.
- Share adds a Share link that opens buttons for Facebook, X (Twitter), Pinterest and copying the link.
- Pickup availability shows whether the selected variant can be picked up in store, at the closest location, with a link to the other locations. It needs local pickup turned on in Shopify admin → Settings → Shipping and delivery.
- Complementary products shows a short list of products that go with this one. See the steps below.
- Product rating shows the average rating and the number of reviews from your review app. The app is chosen in Theme settings → Product card → Rating app, see Product card theme settings.
- Disclosures shows the product's regulatory notices from Shopify. See the steps below.
- Custom HTML / Liquid adds your own code. It can be added several times.
- App blocks from your installed apps can be added too.
Variant picker
- Show variant labels shows the option name, such as Size or Color, above each dropdown.
- Inventory notification shows a stock message under the picker:
- Don't show inventory information (default).
- Show a notice if inventory falls below 5: "There are 3 products left", "There is only one product left!", or a message when the variant is out of stock.
- Always show inventory: also "There are 12 products left" for larger stock.
- The notice needs inventory tracking on the variant in Shopify admin.
- Handle unavailable variants sets what happens to sold-out or non-existing combinations in the dropdowns: Hide removes them, Disable greys them out, Show (default) lists them normally.
Kingdom shows product options as dropdowns on the product page. It does not show color swatches in the variant picker; swatches are used in the collection filters.
Buy buttons
- Show quantity selector adds the quantity field next to Add to cart.
- Show dynamic checkout buttons adds Shopify's dynamic checkout button, such as Buy it now, Shop Pay or PayPal, under Add to cart. Shopify chooses the button from your payment methods and the customer's device.
- Show recipient information form for gift card products adds Shopify's recipient form on gift card products. See Gift card page.
When the selected variant is sold out, the button says "Sold out" and cannot be selected. When Cart type is Drawer, Add to cart opens the cart drawer; with Page, it goes to the cart page.
Setting up a size guide
One size guide for all products:
Create the size guide page
In Shopify admin, open Online Store → Pages and create a page, for example "Size guide", with your size table.
Add the block
In the theme editor, open Products → Default product, select the Product page section and select Add block → Size guide. Drag it under the Variant picker.
Choose the page and how it opens
Select the page in Size guide page. In Open options, choose Popup to show the page over the product, or Same window or New window to open it as a page. Change the link text in Text.
A different size guide per product:
Create a page metafield
In Shopify admin, open Settings → Metafields and metaobjects → Products and select Add definition. Name it, for example "Size guide", and choose the type Page.
Fill it on your products
Open each product that needs a size guide and choose its size guide page in the new metafield.
Connect the block to the metafield
In the Size guide block, select the dynamic source icon next to Size guide page and choose the metafield.
Hide the link on other products
Turn on Hide block if dynamic content is not present, so products without a size guide page show no link.
Setting up collapsible tabs from a metafield
A collapsible tab shows its Tab content, then the content of Tab content from page, then Tab image, all together when the customer opens it. Each of the three can come from a metafield, so every product can have its own tab text, for example care instructions.
Create the metafield
In Shopify admin, open Settings → Metafields and metaobjects → Products and select Add definition. Choose the type Rich text (or Multi-line text). For a shared text, choose the type Page.
Fill it on your products
Open each product and type the tab text into the new metafield.
Add the tab
In the Product page section, select Add block → Collapsible tab and set the Heading, for example "Care".
Connect the content
Select the dynamic source icon next to Tab content (or Tab content from page) and choose the metafield.
Hide empty tabs
Turn on Hide block if dynamic content is not present. The tab is then hidden on products where the text, the page and the image are all empty.
Setting up back in stock alerts
The Back in stock alert block shows an email form when the selected variant is sold out. It is a contact form: it sends you an email, it does not email the customer.
Add the block
In the Product page section, select Add block → Back in stock alert and drag it under Buy buttons. In the theme editor it is always visible, so you can edit it.
Edit the texts
Set Text, Button label and Success message. Email message is the line you receive in the email.
Check where the emails go
Shopify sends contact form emails to your store's sender email address. Check it in Shopify admin → Settings → Notifications → Sender email, and make sure it is an inbox you read.
Email the customers yourself
Each email holds the customer's email address, the product, the variant and its link. When the variant is back in stock, write to those customers.
Kingdom does not email customers when a variant is back in stock. For automatic back in stock emails, use a back in stock app instead. The form shows only for variants that track inventory and do not continue selling when out of stock.
Setting up product disclosures
The Disclosures block shows Shopify's Product Disclosures, such as safety warnings or Prop 65 notices, under one heading with their symbols. Customers open it to read the full notices.
Create the disclosures in Shopify
In Shopify admin, create your disclosures and assign them to the products, choosing to show them on the product page (and in the cart, if needed). See Product disclosures in the Shopify Help Center.
Add the block
In the Product page section, select Add block → Disclosures. Change the Heading if you want; the default is "Disclosures".
Add it to other product layouts
If you use the Featured product section or the Quick view popup, add the Disclosures block there too.
Products without a disclosure for the product page show nothing, not even the heading. Disclosures set to show in the cart appear next to the cart item, see Cart page.
Setting up complementary products
Complementary products are products you choose to sell together, such as a case for a phone. They show as a short list with small images, under the heading "Pairs well with".
Install Search & Discovery
Install Shopify's free Search & Discovery app from the Shopify App Store.
Choose the products
In the app, open Product recommendations, select the product and add its complementary products.
Add the block
In the Product page section, select Add block → Complementary products. Set the Heading and Maximum number of products shown, from 1 to 8.
A product without complementary products shows nothing. The products come from Shopify; Kingdom only displays them.
Product templates
Kingdom comes with several product templates. Assign one to a product in Shopify admin → Products → the product → Theme template.
- Default product (
product): the standard layout, with Pickup availability and Complementary products. - apparel: adds a Size guide and three Collapsible tabs, Rich text sections with icons, a Video: background section and Complementary products.
- gather: a long product story under the details, with Rich text, Video: background, Image and Gallery sections.
- gather-with-flex: the same as gather, plus a Flex grid section.
- gift-card: for gift card products, with the recipient form on and the dynamic checkout button off.
- quick-view: not a product page. It holds the blocks of the Quick view popup.
Should I use the Scroll or the Slider gallery?
Use Scroll for square or landscape images, and Slider for portrait images. Sliders also suit products with many images, because customers do not have to scroll far. If slider images look too large or cropped, turn on Scale slider images to fit the viewport. On phones both styles show a slider.
Why does the page reload when a customer picks another color?
Because the color is a separate product in a combined listing. With Shopify Plus combined listings, each option value can be its own product, and choosing it loads that product's page. Variants of the same product change without a reload.
Can I make the description wider than the gallery?
Not with theme settings. The width of the gallery and of the details column is fixed by Kingdom. It can be changed with custom CSS, which Krown support does not provide; see Custom CSS and code for developers.
All Product settings
Every setting in this group, with its type and default.
The same section is also on the alternate templates Products → apparel, Products → gather, Products → gather-with-flex, Products → gift-card.
Accepts these blocks: Size guide, Text, Vendor, Title, Price, Show tax information, SKU / BARCODE, Variant picker, Back in stock alert, Buy buttons, Description, Share, Custom HTML / Liquid, Collapsible tab, Pickup availability, Complementary products, Product rating, Disclosures and app blocks.
Product page section: Media
Where to find it: Products → Default product → Product page → Media
Gallery style (dropdown, default: Scroll): Sets how the media shows on desktop: Scroll shows all media one under the other while the product details stay in view, Slider shows one at a time. Phones always show a slider. Options: Scroll, Slider.
Scale slider images to fit the viewport (checkbox, default: on): Shrinks each image to fit the height of the screen without cropping, in the Slider gallery.
Gallery pagination (radio buttons, default: Dots): Sets how customers move between media: dots, or small square thumbnails. Options: Dots, Thumbnails.
Add spacing between media (checkbox, default: on): Adds a gap between the media in the gallery.
Enable image zoom (checkbox, default: on): Lets customers select an image to open it full screen and move the mouse to see the details.
Enable video looping (checkbox, default: off): Plays product videos again from the start when they end.
Size guide block
Where to find it: Products → Default product → Product page → Add block → Size guide
One Size guide block per section.
Text (text field, default: "View size chart"): Sets the text of the size guide link.
Show icon (checkbox, default: on): Shows a small size chart icon before the link text.
Size guide page (page picker): Sets the page with your size chart. Connect a page metafield here to use a different page per product.
Open options (dropdown, default: Popup): Sets how the size chart opens: Popup shows the page content over the product, Same window and New window open the page itself. Options: Popup, Same window, New window.
Size guide block: Dynamic content
Where to find it: Products → Default product → Product page → Add block → Size guide → Dynamic content
Hide block if dynamic content is not present (checkbox, default: off): Hides the size guide link on products where Size guide page is empty, for example when it is connected to a metafield that the product does not have.
Text block
Where to find it: Products → Default product → Product page → Add block → Text
Text (rich text, default: "Text block").
Text style (dropdown, default: Body): Sets the look of the text: Body, Subtitle (smaller text) or Uppercase (smaller, in capitals). Options: Body, Subtitle, Uppercase.
Vendor block
Where to find it: Products → Default product → Product page → Add block → Vendor
One Vendor block per section.
The Vendor block has no settings in Kingdom 6.2.0.
Title block
Where to find it: Products → Default product → Product page → Add block → Title
One Title block per section.
The Title block has no settings in Kingdom 6.2.0.
Price block
Where to find it: Products → Default product → Product page → Add block → Price
One Price block per section.
The Price block has no settings in Kingdom 6.2.0.
Show tax information block
Where to find it: Products → Default product → Product page → Add block → Show tax information
One Show tax information block per section.
The Show tax information block has no settings in Kingdom 6.2.0.
SKU / BARCODE block
Where to find it: Products → Default product → Product page → Add block → SKU / BARCODE
One SKU / BARCODE block per section.
The SKU / BARCODE block has no settings in Kingdom 6.2.0.
Variant picker block
Where to find it: Products → Default product → Product page → Add block → Variant picker
One Variant picker block per section.
Show variant labels (checkbox, default: on): Shows the option name, such as Size or Color, above each dropdown.
Inventory notification (dropdown, default: Don't show inventory information): Shows a stock message under the variant picker: only when 5 or fewer are left, or always. Variants need inventory tracking turned on in Shopify admin. Options: Don't show inventory information, Show a notice if inventory falls below 5, Always show inventory.
Handle unavailable variants (dropdown, default: Show): Sets what happens to sold-out or non-existing option combinations in the dropdowns: Hide removes them, Disable greys them out, Show lists them normally. Options: Hide, Disable, Show.
Back in stock alert block
Where to find it: Products → Default product → Product page → Add block → Back in stock alert
One Back in stock alert block per section.
This back in stock alert form will show up when the product is out of stock.
Store owner will receive an email when a customer fills in this form. Store owner must manually notify the customer once the product is back in stock.
Text (formatted text, default: "Enter your email address below to be notified when this product is back in stock."): Sets the text above the back in stock email field.
Button label (text field, default: "Notify me"): Sets the label of the submit button.
Success message (text field, default: "Thanks! We will notify you when this product becomes available!"): Sets the message the customer sees after sending the form.
Email message (text field, default: "I would like to be notified when this product is back in stock."): Sets the message line of the email you receive, together with the customer's email, the product, the variant and its link.
Buy buttons block
Where to find it: Products → Default product → Product page → Add block → Buy buttons
One Buy buttons block per section.
Show quantity selector (checkbox, default: on): Shows a quantity field next to the Add to cart button.
Show dynamic checkout buttons (checkbox, default: on): Shows Shopify's dynamic checkout button (for example Buy it now, Shop Pay or PayPal) under Add to cart. It is hidden on gift cards when the recipient form is on, and it is not locked by the cart's terms checkbox.
Show recipient information form for gift card products (checkbox, default: off): Shows Shopify's recipient form (email, name, message up to 200 characters, send date) on gift card products, so customers can send the card to someone else. The dynamic checkout button is hidden on those products.
Description block
Where to find it: Products → Default product → Product page → Add block → Description
One Description block per section.
Truncate description (dropdown, default: Truncate: Show a small excerpt): Shortens a long description to about 100, 150 or 200 px of text with a Show more link. Options: Don't truncate, Truncate: Show a small excerpt, Truncate: Show a medium excerpt, Truncate: Show a large excerpt.
Share block
Where to find it: Products → Default product → Product page → Add block → Share
One Share block per section.
If you include a link in social media posts, the page's featured image will be shown as the preview image. Shopify Help Center.
A store title and description are included with the preview image. Shopify Help Center.
Custom HTML / Liquid block
Where to find it: Products → Default product → Product page → Add block → Custom HTML / Liquid
Custom HTML / Liquid (Liquid).
Collapsible tab block
Where to find it: Products → Default product → Product page → Add block → Collapsible tab
Heading (text field, default: "Collapsible tab"): Sets the title that customers select to open the tab.
Tab content (rich text): Sets the text inside the tab. Connect a rich text metafield to give each product its own text.
Tab content from page (page picker): Adds the content of a page inside the tab, after Tab content.
Tab image (image): Adds an image inside the tab, after the text and the page content.
Collapsible tab block: Dynamic content
Where to find it: Products → Default product → Product page → Add block → Collapsible tab → Dynamic content
Hide block if dynamic content is not present (checkbox, default: off): Hides the tab on products where Tab content, Tab content from page and Tab image are all empty.
Pickup availability block
Where to find it: Products → Default product → Product page → Add block → Pickup availability
One Pickup availability block per section.
The Pickup availability block has no settings in Kingdom 6.2.0.
Complementary products block
Where to find it: Products → Default product → Product page → Add block → Complementary products
One Complementary products block per section.
To select complementary products, add the Search & Discovery app. Shopify Help Center.
Heading (text field, default: "Pairs well with"): Sets the heading above the complementary products.
Maximum number of products shown (slider 1 to 8, default: 3): Sets how many complementary products show, from 1 to 8. The products are chosen in Shopify's Search & Discovery app.
Product rating block
Where to find it: Products → Default product → Product page → Add block → Product rating
One Product rating block per section.
To display ratings, add a product rating app. Learn more.
Disclosures block
Where to find it: Products → Default product → Product page → Add block → Disclosures
Displays the disclosures attached to this product through Shopify's Product Disclosures. Shopify Help Center.
Heading (text field, default: "Disclosures"): Sets the heading above the product's disclosures. Products without a disclosure for the product page show nothing.
Product disclosures can be configured with metafields at product level.
Related pages
- Product recommendations section: related products under the product.
- Quick view popup: choose options from collection pages.
- Featured product section: a product on any page, with the same blocks.
- Recommended image sizes: image shapes for the gallery.
- Use dynamic sources for unique product pages: metafields in blocks.