Skip to content
Docs

Keld · Product page

All pages
Docs
Contact support
On this page

Product page

The product page is built from the Product section and its blocks. You can reorder, hide or remove blocks in the theme editor. The section holds up to 24 blocks.

Section settings

Gallery

The gallery shows product media with thumbnails and loads the first image first.

  • Image fit: Fill the frame crops to a 4:3 aspect ratio, and shoppers can switch to the full image. Show the full image adds space around it.
  • Enable sticky gallery on desktop: the gallery stays in view while the shopper scrolls the buy box.
  • Show sticky buy bar on phones: shows the price and an Add to cart button at the bottom of the screen once the main button scrolls out of view. Doesn't show on screens wider than 880px.

"Fitted on car" tab: a second gallery tab appears when the product metafield custom.on_car_images (list of files) holds images. Use it for photos of the part fitted to a car.

A photo per finish: when a shopper picks a variant, the gallery switches to that variant's image. Assign a variant image in Shopify admin. For options with color swatches, you can instead put the value in the image's alt text (for example "Gunmetal").

Blocks

These are the blocks in the order the demo uses.

Shows above the gallery as Home / collection / current item.

  • Current item: SKU (product title when there's no SKU) or Product title.

Subheading

A small line above the product title.

  • Text: Product type, Vendor or First collection.
  • Add the series: adds the product metafield custom.series after a middle dot, when the product has one.

Title

The product title. No settings.

SKU and stock

  • Show SKU.
  • Low stock threshold (0–20): shows "Low stock" when the quantity is at or below this number; 0 turns it off. Applies only to variants that Shopify tracks and that stop selling at zero.
  • Show the remaining count with "Low stock".

Short text

A short summary under the title.

  • Source: Short description metafield or Description excerpt. The metafield is custom.short_description (multi-line text). When it's empty, Keld uses the first paragraph of the product description (up to 40 words).

Price

Shows the selected variant's price with sale and unit prices. A note from the product metafield custom.price_note (single line text, for example "per wheel") sits beside it. "Demo price" appears while Theme settings › Fitment › Show "Demo fitment" label is on.

Variant picker

Shows each option as a group of buttons.

  • Swatches: options whose values have Shopify swatches show a color or image dot. See Color swatches below.
  • Sold out and unavailable: these combinations look hatched but stay selectable, so the shopper sees why the button is off.
  • Without JavaScript, the picker shows a single variant list.

Quantity

  • Maximum quantity per add to cart (1–99). Quantity rules on the variant in Shopify take precedence.

Buy buttons

  • Show dynamic checkout buttons: shows Shop Pay, PayPal and similar buttons under Add to cart, as set up in your payment settings.

Sold-out options get no "Notify me" link. Back-in-stock alerts need an app; place its app block after this block.

Complete the kit

Suggests parts that go with this product. Each one is a checkbox with its price, and one button adds the selected variant plus the checked parts to the cart as a group.

  • Heading, Note (small text beside the heading, for example how you chose the pairing) and Products shown (1–6).
  • Products come from the product metafield custom.kit_products (list of products). Nothing shows while the metafield is empty.

Vehicle fitment

Compares the product's fitment list with the shopper's saved vehicle. It has no settings. Its states are:

  • No vehicle set: asks the shopper to set a vehicle.
  • Listed: the vehicle is in the product's fitment list.
  • Not listed: the vehicle isn't in the list.
  • Fitment not set: the product has no fitment data.

It never claims a verified lookup. It doesn't show on gift card products. See Vehicle fitment.

Pickup availability

Shows whether the selected variant can be picked up at your locations. Set up local pickup under Settings › Shipping and delivery.

Collapsible panel

A panel that opens and closes. Add as many as you need.

  • Heading.
  • Content:
    • Custom text: the text you enter in Custom text.
    • Product description.
    • Specifications (metafield custom.spec_sheet): a two-column table.
    • Listed platforms (metafield custom.fitment): the vehicles the part is listed for. Shows nothing when the product has no fitment data.
    • Other product metafield: enter a key under the custom namespace in Metafield key, for example in_the_box or fitting_notes. Rich text, multi-line text, single line text and lists of single line text work; other types are skipped.
    • Shop policies: links to your shipping and refund policies.
  • Open by default.

The demo uses six panels: Description, Specifications, Listed platforms, In the box, Fitting notes, and Shipping and returns.

Reviews

Holds a reviews app. App blocks placed directly after this block show inside it. Without a reviews app, the panel doesn't show, so it never shows empty or fake reviews.

  • Heading and Open by default.

Custom Liquid and app blocks

  • Custom Liquid: add Liquid or HTML to the buy box, for example an app's snippet.
  • App blocks: apps that support theme app blocks can be added here.

Color swatches

Keld shows color dots on the product page and on product cards when an option is linked to Shopify's Color category metafield.

  1. Open the product in Shopify admin and set a Category that has a Color attribute (most do).
  2. In Variants, click the option (for example "Finish").
  3. Click the connect metafield icon (top right of the option) and choose Color.
  4. For each value, create a color entry: Label, Color (hex) and Base color. Click Done, then Save.

Entries you create once can be reused on other products. If the dots don't show after saving, open the option, disconnect it, save, then connect it again.

Product cards show up to 6 dots, then "+n".

Gift cards

Gift card products use the same product page. Keld adds:

  • Send this as a gift: a checkbox that reveals recipient email, recipient name, a message (up to 200 characters) and a send date.
  • The Vehicle fitment block is hidden on gift card products.

To create one, go to Products › Gift cards › Add gift card product in Shopify admin and set the denominations.

Product cards

Product cards in collections, search and featured sections show:

  • the first image, and a second image on hover when the product has one
  • Sold out, Sale (when a variant's compare-at price is above its price) and New (products tagged New) tags
  • the SKU and product type, the full product name and a spec line from custom.spec_line
  • the price, color dots or the variant count, and a fitment badge once a vehicle is set
  • a quick add button for single-variant products in stock

Still stuck with Keld? Contact support with your store URL and the page where it happens.