> ## Documentation Index > Fetch the complete documentation index at: https://docs.kwebby.com/llms.txt > Use this file to discover all available pages before exploring further. # Product information > The product page: a gallery with videos and 3D models, the buy box, and the details below it, built from blocks that show only when the product has the data behind them. ![Product information on the storefront](https://mintcdn.com/kwebby/tbWCv70mkhaUy_7w/images/kelvin/main-product.webp?fit=max\&auto=format\&n=tbWCv70mkhaUy_7w\&q=85\&s=a97802cca007d1f57f4d44a3a2187049) Product information, highlighted with the demo content ![The PC compatibility box on a part’s product page](https://mintcdn.com/kwebby/tbWCv70mkhaUy_7w/images/kelvin/guide-compatibility.webp?fit=max\&auto=format\&n=tbWCv70mkhaUy_7w\&q=85\&s=05911a1b9c7e830518c31b7b1a5126df) The PC compatibility box on a PC part, with Add to a PC build ![Frequently bought together](https://mintcdn.com/kwebby/QKNMzt7KPy_yk6ai/images/kelvin/guide-bought-together.webp?fit=max\&auto=format\&n=QKNMzt7KPy_yk6ai\&q=85\&s=5f4ffbb1c38013115a90f7d660bcc1cb) Below: bought together, with the complementary products from Search & Discovery ![The sticky add to cart bar on a phone](https://mintcdn.com/kwebby/tbWCv70mkhaUy_7w/images/kelvin/guide-sticky-bar-mobile.webp?fit=max\&auto=format\&n=tbWCv70mkhaUy_7w\&q=85\&s=c6f7abe0bb39eabb6e34c7b7d5d6fae3) The sticky add to cart bar on a phone, after the main button scrolls away ![Product information in dark mode](https://mintcdn.com/kwebby/tbWCv70mkhaUy_7w/images/kelvin/main-product-dark.webp?fit=max\&auto=format\&n=tbWCv70mkhaUy_7w\&q=85\&s=8e8824ec6d1d59cfd39b813de528b9c9) Product information in dark mode ![Product information on a phone](https://mintcdn.com/kwebby/tbWCv70mkhaUy_7w/images/kelvin/main-product-mobile.webp?fit=max\&auto=format\&n=tbWCv70mkhaUy_7w\&q=85\&s=687a57cabcdc755b2acab3a66a5645bb) Product information on a phone ## Where to find it Every product that uses the default product template, with Related products and Recently viewed under it. In the theme editor choose Products, then Default product, and select Product information. The gift-card product template uses the same section with gift card blocks and no sticky bar; assign it to your gift card product in the admin. ## How it works * Block types named Below: (page navigation, overview, specifications, in the box, works with, setup and manuals, materials, bought together, reviews, questions and question) always appear under the gallery and buy box, in their list order. Every other block type appears in the buy box. App blocks and Custom Liquid go wherever the block above them went, so an app block placed right after Below: reviews sits beside the score. * The gallery opens on the selected variant's media and follows the variant. Thumbnails, previous and next buttons, a counter, swiping on touch screens and the left and right arrow keys move through it, and photos open in a lightbox while Zoom photos in a lightbox is on. Wider than 900 px, the gallery stays in view while the buy box scrolls; narrower, it sits above the buy box. * Shopify videos either play muted on a loop while on screen, with a pause button and never for visitors who reduce motion or save data, or play with controls. YouTube and Vimeo videos load only after a click and stop when the shopper moves to another slide. 3D models use Shopify's model viewer, with a View in your space button on devices that support it. * Choosing an option updates the price, badges, SKU, stock, purchase options, add button, back in stock form, pickup, compatibility box and sticky bar without reloading, and adds ?variant= to the address. Sold-out values stay selectable and are marked; a combination you do not sell shows Unavailable. Option values that have Shopify swatches show as color swatches. * Stock follows real inventory only: Sold out, Pre-order, Only 3 left at or below Theme settings → Product cards → Show low stock at or below (10 on install), or In stock. Pre-order products (tagged with the Pre-order tag from Theme settings → Badges, or tracked at zero stock while selling continues) get a Pre-order button, the incoming date when Shopify has one, and a Pre-order line property in the cart. * Size and fit guide, Key specs, Protection plans, Purchase options, Gift card recipient, PC compatibility and Back in stock alert print nothing on products without their data, so one template serves every product. Protection plans and the quantity hide while the chosen variant is sold out, and Back in stock alert shows only then. * On gift cards, the Gift card recipient fields sit inside the buy buttons, above the quantity and add button: a Send it to someone as a gift checkbox, then the recipient's email, an optional name, a message of up to 200 characters and an optional send date up to 90 days ahead. The email and date are checked before the gift card is added, each error shows under its own field, and what the shopper typed stays when they pick another amount. * Delivery estimate is off on install. With a Shipping cutoff it counts down to it in your store's time zone (Order in the next 2 h 10 min and it ships today), refreshes every 30 seconds, and with Business days in transit adds an arrival date that skips weekends. It does not know public holidays. * With Details layout set to Sections with a navigation bar, an On this page bar sticks under the header, links only the parts below that have content, and marks the one in view. Tabs turns overview, specifications, in the box, works with, setup, materials and questions into tabs from 750 px wide and collapsible rows on phones, first one open; bought together and reviews stay as their own sections. * Below: bought together lists complementary products from the Search and Discovery app with checkboxes, a running total and one add button, with this product always included. When a product has none set, it can ask Shopify for suggestions instead. It hides on sold-out products and gift cards. * The sticky add to cart bar (photo, name, price, chosen options and the add button) appears on phones and desktop once the main add button scrolls off the top of the screen. It submits the main form, so the protection plan, purchase option and quantity still apply, and the page adds room at the bottom so the bar never covers content. * Every product page includes the product's structured data from Shopify (JSON-LD), which search engines read for rich product results. ![Product information in the theme editor](https://mintcdn.com/kwebby/QKNMzt7KPy_yk6ai/images/kelvin/editor-main-product.webp?fit=max\&auto=format\&n=QKNMzt7KPy_yk6ai\&q=85\&s=0744756fb44383ba6fdaffe6c23d4a2a) In the theme editor: 1 the section in the sidebar · 2 its settings · 3 the section in the preview ## Edit it * Drag blocks to reorder the buy box and the parts below it. Keep a Buy buttons block: the sticky bar appears only when the section has one. * Under Media, Photo fit is Show the whole photo on install, so every photo shows in full on the square stage. Fill the frame fills the stage and crops photos that are not square. * Fill the product metafields in the specs namespace to fill the page: highlights (overview), specifications and materials (one Label: value per line), in\_the\_box and compatibility (lists), setup (one step per line), manual and spec\_sheet (files) and size\_chart. The spec rows used by the table, Key specs and product cards are listed once in Theme settings → Product cards → Spec rows. * In Buy buttons choose the Quantity selector (Minus and plus buttons or Number box) and whether to Show dynamic checkout button. Both product templates have Gift card recipient on install; on gift cards its fields show inside Buy buttons, wherever the Gift card recipient block sits. * To turn on the delivery line, open Delivery estimate and fill Text, Shipping cutoff (24-hour time such as 15:00) and Business days in transit. Tick Ship on weekends only if you ship on Saturday and Sunday. * For PC parts, tag the product with the Parts tag from Theme settings → PC Builder (pc-part on install) and choose the PC Builder page there. PC compatibility then lists the specs the builder checks and shows Add to a PC build. * Choose Details layout: Sections with a navigation bar suits long pages with many parts, Tabs keeps the page short. Add Below: question blocks for questions you answer often; they become collapsible rows under Below: questions. * Set up protection plans, pickup and reviews with the guides [Care+ protection plans](https://docs.kwebby.com/kelvin/guides/care-plus-protection-plans.md), [Pickup in store](https://docs.kwebby.com/kelvin/guides/pickup-in-store.md) and [Product reviews and Verified purchase](https://docs.kwebby.com/kelvin/guides/product-reviews.md). * Add a reviews app or any other app from Add block → Apps, right after the block it belongs with. ## Settings | Setting | What it does | | - | - | | **Color scheme** | Color scheme for this area (edit the schemes in Theme settings → Colors). Default: Scheme 1. | | **Show breadcrumbs** | On or off. Default: on. | **Media** | Setting | What it does | | - | - | | **Photo fit** | Options: Show the whole photo, Fill the frame. Fill the frame crops photos that are not square. Default: Show the whole photo. | | **Zoom photos in a lightbox** | On or off. Default: on. | | **Show thumbnails** | On or off. Default: on. | | **Product videos** | Options: Play muted while on screen, Play with controls. Muted videos never play for visitors who reduce motion or save data, and always have a pause button. YouTube and Vimeo videos load only after a click. Default: Play muted while on screen. | **Details below the buy box** | Setting | What it does | | - | - | | **Details layout** | Options: Sections with a navigation bar, Tabs. Tabs group the overview, specifications, in the box, works with, setup, materials and questions. On phones they become collapsible rows. Default: Sections with a navigation bar. | **Sticky add to cart** | Setting | What it does | | - | - | | **Show the sticky add to cart bar** | On or off. Appears once the main add button scrolls out of view. Default: on. | ## Blocks Add a block with **Add block** under the section in the sidebar; drag blocks to reorder them. ### App blocks Blocks from apps you have installed, such as reviews or subscriptions. Click **Add block** and choose one from the Apps tab; its settings come from the app. ### Vendor (up to 1) | Setting | What it does | | - | - | | **Link to the vendor's products** | On or off. Default: off. | ### Title (up to 1) No settings: add or remove it, and drag it into place. ### Type and SKU (up to 1) | Setting | What it does | | - | - | | **Show product type** | On or off. Default: on. | | **Show SKU** | On or off. Default: on. | ### Rating (up to 1) > [!TIP] > > Shows the stars a reviews app writes to the reviews.rating and reviews.rating\_count metafields. Nothing shows without them. To use the app's own stars, add its app block instead. ### Price (up to 1) | Setting | What it does | | - | - | | **Show badges** | On or off. Sale, sold out, pre-order and new, from Theme settings, Badges. Default: on. | | **Show tax and shipping note** | On or off. Default: on. | ### Shop Pay Installments (up to 1) > [!TIP] > > Shows when Shop Pay Installments is on in Settings, Payments, and the price qualifies. ### Description (up to 1) No settings: add or remove it, and drag it into place. ### Variant picker (up to 1) | Setting | What it does | | - | - | | **Show color swatches** | On or off. For options whose values have swatches in the product's category metafields. Default: on. | ### Size and fit guide (up to 1) > [!TIP] > > A button that opens a side panel with the product's specs.size\_chart metafield (one Label: value per line, such as Case size: 45 mm) or, when the product has none, the page below. Hidden when neither exists. | Setting | What it does | | - | - | | **Button label** | Text. Default: Size and fit guide. | | **Page** | Choose a page. Used for products without a size chart metafield. | ### Purchase options (up to 1) > [!TIP] > > Subscriptions and other selling plans from a subscriptions app. Shows only on products that have them. ### Gift card recipient (up to 1) > [!TIP] > > Lets shoppers send a gift card to someone by email on a chosen date. Shows only on gift card products, inside the buy buttons. ### Stock (up to 1) | Setting | What it does | | - | - | | **Say In stock above the low stock level** | On or off. The low stock level is in Theme settings, Product cards. Default: on. | ### Key specs (up to 1) | Setting | What it does | | - | - | | **Specs to show** | Slider from 2 to 8. The first keys from Theme settings, Product cards, Spec rows that the product has. Default: 4. | ### Protection plans (up to 1) > [!TIP] > > Lists the plans in the product's custom.protection\_plans metafield (a list of products). A chosen plan is added as its own cart line that names the product it covers. | Setting | What it does | | - | - | | **Heading** | Text. Default: Protect it. | | **Link to what plans cover** | Link: a page, product, collection or web address. | | **Link text** | Text. Default: See what is covered. | | **Line under No thanks** | Text. Default: The maker's standard warranty. | ### Buy buttons (up to 1) | Setting | What it does | | - | - | | **Show quantity selector** | On or off. Default: on. | | **Quantity selector** | Options: Minus and plus buttons, Number box. Default: Minus and plus buttons. | | **Show dynamic checkout button** | On or off. Lets shoppers check out straight away with a payment method they have saved. Default: on. | ### Back in stock alert (up to 1) > [!TIP] > > Shows on sold-out variants. Requests arrive as contact form emails tagged back-in-stock. | Setting | What it does | | - | - | | **Heading** | Text. | | **Text** | Text. | ### Compare and share (up to 1) | Setting | What it does | | - | - | | **Show Compare** | On or off. Default: on. | | **Show Share** | On or off. Default: on. | ### Pickup availability (up to 1) > [!TIP] > > Shows stock at locations with local pickup turned on in Settings, Shipping and delivery. ### Delivery estimate (up to 1) | Setting | What it does | | - | - | | **Text** | Formatted text (one line). For example: Free delivery over \$50. | | **Shipping cutoff** | Text. 24-hour time in your store's time zone (Settings, General). Shows "Order in the next 2 h 10 min and it ships today". Leave empty to turn it off. | | **Business days in transit** | Slider from 0 to 10. Adds an arrival date when a cutoff is set. 0 turns it off. Default: 0. | | **Ship on weekends** | On or off. Default: off. | ### PC compatibility (up to 1) > [!TIP] > > For products with the parts tag from Theme settings, PC Builder: the specs the PC Builder checks, from the product's specs metafields. | Setting | What it does | | - | - | | **Show Add to a PC build** | On or off. Needs the PC Builder page in Theme settings. Default: on. | ### Trust badges (up to 2) > [!TIP] > > Up to four badges, each an icon and a short line. A badge with no text is hidden. **Warranty badge** | Setting | What it does | | - | - | | **Icon** | Options: Shield, Return, Card, Truck, Chat, Wrench, Leaf, Check, Pin, Bolt, Mail. Default: Shield. | | **Text** | Text. Default: Describe your warranty. | **Returns badge** | Setting | What it does | | - | - | | **Icon** | Options: Shield, Return, Card, Truck, Chat, Wrench, Leaf, Check, Pin, Bolt, Mail. Default: Return. | | **Text** | Text. Default: Describe your returns. | **Checkout badge** | Setting | What it does | | - | - | | **Icon** | Options: Shield, Return, Card, Truck, Chat, Wrench, Leaf, Check, Pin, Bolt, Mail. Default: Card. | | **Text** | Text. Default: Secure checkout. | **Extra badge** | Setting | What it does | | - | - | | **Icon** | Options: Shield, Return, Card, Truck, Chat, Wrench, Leaf, Check, Pin, Bolt, Mail. Default: Chat. | | **Text** | Text. | ### Text | Setting | What it does | | - | - | | **Text** | Formatted text. | ### Custom Liquid | Setting | What it does | | - | - | | **Liquid code** | Liquid code. Add app snippets or other code. Placed in the buy box or below it, after the block above it. | ### Below: page navigation (up to 1) > [!TIP] > > Links to the sections below the buy box that have content. Blocks named Below: show below the buy box in their order; buy box blocks stay in the buy box wherever they sit in the list. ### Below: overview (up to 1) > [!TIP] > > Highlights from the product's specs.highlights metafield (a list, or rich text). Hidden without it. | Setting | What it does | | - | - | | **Heading** | Text. Leave empty for Overview. | | **Media** | Options: Product video, or the second photo, None. Default: Product video, or the second photo. | | **Image** | Image: upload one or choose from Content → Files. Replaces the product media. Applies to every product that uses this template. | ### Below: specifications (up to 1) > [!TIP] > > Every spec row from Theme settings, Product cards, Spec rows that the product has, plus the lines of its specs.specifications metafield (Label: value, one per line). | Setting | What it does | | - | - | | **Heading** | Text. Leave empty for Specifications. | | **Show Compare with similar** | On or off. Needs the compare page in Theme settings. Compares the product with two related products. Default: on. | ### Below: in the box (up to 1) > [!TIP] > > From the product's specs.in\_the\_box metafield (a list). Hidden without it. | Setting | What it does | | - | - | | **Heading** | Text. Leave empty for In the box. | ### Below: works with (up to 1) > [!TIP] > > From the product's specs.compatibility metafield (a list). PC parts without it show their compatibility specs. | Setting | What it does | | - | - | | **Heading** | Text. Leave empty for Compatibility. | ### Below: setup and manuals (up to 1) > [!TIP] > > Steps from specs.setup (one per line) and links to the specs.manual and specs.spec\_sheet files. | Setting | What it does | | - | - | | **Heading** | Text. Leave empty for Setup and downloads. | ### Below: materials (up to 1) > [!TIP] > > From specs.materials, one Label: value pair per line. | Setting | What it does | | - | - | | **Heading** | Text. Leave empty for Materials and repair. | ### Below: bought together (up to 1) > [!TIP] > > Complementary products from the Search and Discovery app, with checkboxes and one add button. | Setting | What it does | | - | - | | **Heading** | Text. Leave empty for Frequently bought together. | | **Products besides this one** | Slider from 1 to 3. Default: 2. | | **Ask Shopify for complementary products when none are set** | On or off. Default: on. | ### Below: reviews (up to 1) > [!TIP] > > The rating score (a reviews app's rating metafields, or the average of the reviews listed here), the reviews in the product's Reviews metafield, and a Write a review form. To use a reviews app instead, add its block right after this one. | Setting | What it does | | - | - | | **Heading** | Text. Leave empty for Reviews. | | **Note under the heading** | Text. | | **Show the product's reviews** | On or off. Reads the product metafield custom.reviews: a list of Product review entries (metaobject) with the fields rating, title, body, author, date, verified and used\_for. Entries with verified checked show a Verified purchase badge. Default: on. | | **Reviews shown before Show all** | Slider from 2 to 12. Default: 4. | | **Show the Write a review form** | On or off. Signed-in customers send a review by contact form email, tagged product-review. When their orders include the product, the email is also tagged verified-purchase with the order number. Add the reviews you approve to the product's Reviews metafield. Default: on. | ### Below: questions (up to 1) > [!TIP] > > Question blocks become collapsible rows here. Questions sent from the form arrive as contact form emails tagged product-question, with the product's name. | Setting | What it does | | - | - | | **Heading** | Text. Leave empty for Questions and answers. | | **Show the Ask a question form** | On or off. Default: on. | | **Form heading** | Text. Leave empty for Ask a question. | ### Below: question | Setting | What it does | | - | - | | **Question** | Text. | | **Answer** | Formatted text. | > [!NOTE] > > Most blocks can be added once; Trust badges twice; Text, Custom Liquid, Below: question and app blocks as often as you need. > > The Trust badges block has a Warranty badge, Returns badge, Checkout badge and Extra badge, each with an Icon and a Text. On the default product template the texts read Describe your warranty, Describe your returns and Secure checkout, and the Extra badge is empty. Replace the first two with your real warranty and returns terms. A badge with no text is hidden. > > Back in stock alert and the Ask a question form send contact form emails with the product, a link and the tag back-in-stock or product-question. Kelvin does not email the shopper later: you reply yourself or from your email tool. > > The Rating block shows stars only from the reviews.rating and reviews.rating\_count metafields a reviews app writes. The Compare box (Compare and share) and Compare with similar (Below: specifications) show only when Theme settings → Compare → Compare page is set. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.