Seventh > Pages > Product page
Product page
The Product page (short: PDP) shows a single product with its media, details, and purchase options.
What it does
The most important page on your store, it presents a single product with its media gallery, key details, and purchase actions. It’s designed to guide visitors from discovery to checkout with clear visuals and structured information.
Key elements include the product gallery, title and price, variant selection, and add‑to‑cart actions. Optional blocks like ratings, inventory availability, share links, and complementary products help answer questions and increase confidence before purchase.
Product gallery (product media)
Product page blocks
Product title
Displays the product name prominently so customers can identify the item immediately. The title is typically the first piece of information users scan after viewing the product media, and it establishes the visual hierarchy for the rest of the page.
Block options
- Typography: font, size, line height, case, weight, opacity, color
- SEO HTML tag for the heading
A clear, well-styled title improves scannability and helps anchor pricing, badges, and ratings around it for faster decision-making.
Product price
Shows the current selling price along with any compare-at price to communicate discounts clearly. Pricing is a major decision-making element and is often read alongside badges (“Sale”) or inventory notices to increase urgency and transparency.
Block options
- Typography: size, case, weight, opacity, color
When styled well, it supports both clarity and conversion.
Product description
Pulls in the product’s long-form description for additional detail and SEO value. Use it to explain benefits, materials, size/fabric info, and care instructions — anything that helps remove doubt and supports purchase confidence.
Block options
- Typography: size, line height, case, weight, opacity, color
Longer descriptions can also help with organic search performance.
Product variants
Lets customers choose options like size or color; it can be displayed as blocks or dropdowns depending on the selector style. This is required for products with multiple variants and controls which variant is added to cart.
Block options
- Variant selector type (blocks or dropdown)
- Unavailable variants (hide, disable, show)
- Swatch size and display mode
- Tooltip image for swatches
- Size guide text, page, and open behavior
Add to Cart (Buy Buttons)
Provides the main purchase action and can include quantity controls or dynamic checkout buttons.
Block options
- Show quantity selector
- Show price in the button area
- Pre‑order label
- Dynamic checkout buttons
- Gift card recipient form
This block handles pre-order states and gift-card recipient fields when applicable.
Product rating
Displays review stars and count when a reviews app is installed. Ratings add social proof and work well near the title and price.
Block options
- Text size
Product badges
Highlights labels such as sale, new, or custom badges for quick scanning.
Block options
- No block‑level options
Badges help communicate status at a glance and are effective when combined with pricing and imagery.
Product vendor
Shows the vendor or brand name for added context. Useful for multi-brand stores and can link to vendor collections.
SKU / Barcode
Displays product identifiers such as SKU or barcode. Useful for wholesale or inventory-focused workflows. This block is especially helpful for B2B or wholesale customers who rely on product codes.
Block options
- Typography: size, case, weight, opacity, color
Tax info
Communicates tax‑included or shipping policy messaging when configured. It reduces checkout surprises by clarifying pricing or linking to shipping policies.
Block options
- Text size
- Case
- Reduced opacity
Inventory availability
Shows stock status and low‑stock messaging when inventory tracking is enabled.
Block options
- Show quantities (below threshold or always)
- Low inventory threshold
- Colors for low, regular, and out‑of‑stock
- Text size and reduced opacity
It can create urgency for limited stock or clarify when items are unavailable.
Local availability
Indicates pickup availability by location when local pickup is enabled. This is useful for stores offering in‑store pickup and can improve conversion for local buyers.
Block options
- Text size
Product share
Adds social sharing links for the product page. Sharing helps drive organic visibility and can be placed near the CTA or below details.
Block options
- Typography: size, case, weight, opacity, color
Complementary products
Shows related add‑ons for upsells or cross‑sells. This block encourages larger cart sizes by suggesting items that pair well with the main product.
Block options
- Products number
- Heading text
- Heading typography: size, case, weight, opacity, color
Complementary products can be set up individually for each product, using the Shopify Search & Discovery app.