Product Page Template (Block-Based Product Page)

The product page is block-based in every store; every section is a block you can drag, reorder, hide and style. The template ships ready and cannot be…

Where to find: Theme Editor → page selector menu → Product Page Who it's for: Anyone who wants to decide the order, position and styling of every section on the product page In short: The product page is block-based in every store; every section is a block you can drag, reorder, hide and style. The template ships ready and cannot be deleted; you can reset it to a default layout at any time.

What is it for?

Until now the product detail layout was chosen from four presets under Theme Settings → Product → Page Layout. You could not reorder anything, so a request like "put reviews above the description" was impossible.

With the Product Page Template the product page is built from blocks, just like the home page:

You decide whether the gallery sits on the left or the right.
You order reviews, FAQ and Q&A however you like.
You remove sections you do not want.
Every block can get a background, spacing, border, section divider and entry animation.
Every block can get conditional visibility (time · audience · language · device).

The template is shared by all products — you do not design a page per product. The content (price, images, description, reviews) is filled in automatically from each product's own data.

1. The template and choosing a layout

Every store ships with a Product Page template — you do not have to create one. Pick Product Page from the page selector menu and the template opens with its blocks on the canvas.

If for any reason your store does not have the template (for example, your store was created before this feature shipped), it is created automatically — already published — the moment you open the theme editor, using the default Classic two columns layout. You do not have to do anything; Product Page simply appears in the page selector. Nothing changes in the storefront — your product pages were already rendering with that same default layout before the template existed.

ℹCreating it is a write operation, so it only runs for users with the Theme · write permission. For staff who open the editor with read-only access no template is created and the editor opens as usual.

The template cannot be deleted (it is protected, like the Home page and the Top/Bottom Structure). Instead, the Reset to default (↺) button in the top toolbar takes you back to a ready-made layout.

The layouts are presented in a wide picker split into tabbed categories (Classic · Gallery-focused · Editorial · Compact), and each layout shows both a desktop and a mobile preview side by side. Choosing one places the matching blocks automatically:

Layout	What it offers
Classic two columns	Gallery on the left, product info + variant + cart on the right. Tabs, reviews, Q&A and related products below. General purpose.
Gallery first	Full-width gallery on top with product info in a centered narrow column. For clean, single-product pages.
Sticky sidebar	A mosaic gallery on the left and a purchase panel on the right that stays on screen while the page scrolls.
Full screen	A large hero gallery with the product name over the image; info and purchase in a centered column below.
Specs first	A compact gallery + a wide info column, with a spec table below. For electronics, books and technical products.
Wide gallery	A wide gallery (2/3) with product info in a narrow column. Prioritizes visuals.
Editorial (right gallery)	Text and purchase panel on the left, a large gallery on the right. On mobile the gallery leads. For brand / DTC stores.
Gallery on top	Full-width gallery on top; product info and the purchase panel side by side below.
Showcase	A full-width hero gallery + a purchase row + a three-column detail strip below. For lifestyle brands with rich imagery.
Long flow	Single column, no tabs. Every section stacks vertically — for clean, long pages.
Compact (tabs)	Classic top area; description, reviews and Q&A grouped into tabs to keep the page short. For mobile and large catalogs.

Every layout comes responsive out of the box: the multi-column desktop layout narrows on tablet and collapses to a single column on mobile, with the gallery always first — you never have to set breakpoints by hand. The layout you choose is only a starting point: delete blocks, reorder them, and insert general blocks (text, image, FAQ, …) between them. (The layouts use only the existing product-page blocks, the Grid and Tabs systems.)

Changing / resetting the layout later

The Layout button in the top-right of the canvas and the Reset to default (↺) button in the top toolbar open the same wide, tabbed picker so you can switch to another ready-made layout at any time. If the template already has blocks, the new layout replaces the current blocks, so a confirmation dialog first tells you how many blocks will change. If you applied one by accident, press Ctrl+Z to undo.

It is lost if you leave without saving. The applied layout is a draft; press Publish before refreshing the page or switching to another template. The browser warns you if you try to leave with unsaved changes. If you still leave without saving, the layout is lost — reopening the template simply shows the layout picker again; nothing is permanently broken.

Nothing changes in the storefront until you publish. The new template starts as a draft; your customers keep seeing the old product page until you press Publish.

2. Product page blocks

These blocks appear only while you are editing the Product Page template, under the Product Page heading in the left panel. They are not listed on other pages because there is no product data there, and saving them onto another page type (home page, custom page, header/footer structure) is blocked on the server as well. The only exception is the Shipping & Returns Card, which does not depend on product data at all and lives in the Trust category; it can be used on any page.

Because there are many of them, the Product Page category is split into sub-groups: Media & Breadcrumb · Product Identity · Purchase · Detail & Content · Social Proof · Recommendations · Combined (legacy).

Block	What it shows
Product Breadcrumb	Home › category › product trail
Product Gallery	Product images/videos; follows the selected variant. Layout options: Thumbnails · Carousel · Grid · Filmstrip · Full Width · Mosaic. Turning on Text over image puts the product name and short description on a dark gradient layer pinned to the bottom of the image

Product Identity — every field is its own block

Title, brand, rating and friends can now be placed individually: one above the gallery, another in the right column, another at the very bottom of the page.

Block	What it shows
Product Title	Product name. The heading tag is selectable (H1 · H2 · H3 · Paragraph); for SEO the page should contain a single H1
Product Brand	Name of the brand assigned to the product
Rating Summary	Star average and review count
Short Description	Short description text defined on the product
Stock Code (SKU)	The product stock code; the prefix text is configurable
Product Tags	Tags assigned to the product

Purchase

Block	What it shows
Product Price	Sale price, discount badge, struck-through list price, tax note
Discount Countdown	Discount countdown timer from store settings
Stock Status	In stock / low stock / out of stock badge
Live Viewers	How many visitors are viewing this product right now
Variant Selector	Colour/size selection (bundle contents and customization are separate blocks now)
Bundle Contents	Content and variant selection for bundle products
Customization	Customization fields defined on the product
Quantity Selector	Plus/minus box that sets the quantity added to the cart
Add to Cart Button	Only the button itself; independent of quantity and favourite. The pre-order box also comes from this block
Sticky Cart Bar	Add to cart bar pinned to the screen while the page scrolls. Can be shown on phone and/or desktop; it takes no space in the page flow
Add to Favorites	Button that adds the product to the favourites list

Block	What it shows
Product Description	Description and extra contents (tabs or accordion)
Additional Info	Additional info rows defined on the product
Product FAQ	Frequently asked questions defined on the product
Delivery Info Rows	Icon rows such as shipping, returns and delivery
Share	WhatsApp, X, Facebook and copy-link buttons
Product Call To Action	Image-based call to action sections defined on the product
Product Reviews	Rating breakdown and customer reviews
Questions & Answers	Customer questions and store replies
Cross Sell	Cross sell offer defined on the product
Related Products	Recommendation groups linked to the product
Recently Viewed	Products the visitor viewed earlier

Combined (legacy) blocks

Block	What it shows
Product Info	Brand, title, rating, price, countdown, stock, short description, SKU, tags, share, info rows — all in one block
Add To Cart	Quantity selector + Add To Cart button + favourite — all in one block
Product Badge Strip	Stock, discount, pre-order, live viewers and tags in a single row

These three blocks keep working and your existing templates do not change at all; the built-in layouts no longer use them, because the fields inside them cannot be placed individually.

The same information is never printed twice. As soon as you add the atomic block for a field, the combined block hides that field by itself. For example, adding Product Price stops Product Info from printing the price; adding Add to Cart Button leaves Add To Cart with only the quantity and favourite parts. The rule always resolves as the atomic block wins.

Empty blocks do not appear in the storefront. If a product has no reviews, the Product Reviews block renders nothing for the customer — in the editor you see a grey placeholder saying the product has no reviews. This is intentional: the template is shared by all products, so missing data must not leave a gap. The same holds for the new atomic blocks: Product Brand takes no space on a product without a brand, and neither does Product Tags on a product without tags.

Besides the core sections above, the same category also lists the size guide, brand story, specification table, shop the look, bundle savings, badge strip, favorite button, share, delivery info rows, bundle contents and customization blocks. See Product Page Specialty Blocks for details.

2.1. Required blocks

A product page template cannot be published without the five pieces of information a customer needs to see and buy the product:

Required	Any one of these blocks satisfies it
Product Images	Product Gallery
Product Title	Product Title or Product Info
Product Price	Product Price or Product Info
Variant Selector	Variant Selector
Add to Cart	Add to Cart Button or Add To Cart

While something is missing, a "N required blocks missing" badge stays visible in the top toolbar; hovering it lists exactly what is missing.
Pressing Publish opens a dialog listing the gaps and stops the publish. The Add missing blocks button appends them to the end of the template; you can then move them anywhere.
Save shows the same dialog but lets you continue (Save anyway). Drafts never reach the storefront, so they are not blocked.
The same check also runs on the server: an incomplete template cannot be published through the API either.
Only active blocks count; a hidden (eye off) block is ignored. Blocks inside grid columns, tabs and carousel slides are counted too.
An empty template cannot be published. The product page is always block-based now, so there is no "empty the blocks to go back to the classic layout" route; deleting the blocks simply triggers the same rule and lists what is missing.
On products without variants the Variant Selector block prints nothing in the storefront; it is still required so that the page is ready the moment a variant product is added.

The same rule applies to product-specific product pages (see Per-Product Detail Page).

2.2. Changing a block's design

Most product blocks can present the same data in several visual languages. Stock status, for example, can be a badge, a coloured dot with text, a progress bar, a quiet info line, or a red urgency box. These are all the same block type; only the Design setting differs.

Picking a design straight from the library

To the right of each block row in the left panel there is a small button showing the number of designs (e.g. 5 ). Clicking it opens every design for that block as a small preview card. Drag a card onto the canvas (or click it) and the block is added with that design.

The search box at the top of the panel matches both block names and design names. Type "mosaic" and only the Product Gallery block and its Mosaic design are listed; type "urgency" and Stock Status → Urgency box appears. Clearing the search restores the full list.

Changing it later — your settings are kept

With a block selected on the canvas, the Properties panel on the right shows a Design field. When you switch to another design:

the block's position (which grid column, which order),
spacing, background, border, shadow, container width,
visibility rules (device, date range, audience, language),
entry animation and section dividers

all stay exactly as they were. This is the main reason designs are built as "one block + a design setting" rather than as separate block types: with separate types you would have to delete the block and add a new one, and redo all of those settings.

Which blocks have designs?

Block	Designs
Product Gallery	Store setting · Thumbnails · Carousel · Filmstrip · Grid · Full width · Mosaic · Editorial flow · Scroll snap
Breadcrumb	Standard · Chips · Slash · Back link
Product Title	Standard · Editorial · Compact · Underlined · Uppercase
Product Brand	Standard · Badge · Plain text
Short Description	Paragraph · Lead text · Quote · Collapsible
Product Price	Standard · Hero · Single line · Savings first · Boxed
Rating Summary	Stars + count · Single line · Badge · Precise fill · Average circle · Score distribution
Stock Status	Badge · Dot + text · Remaining bar · Quiet · Urgency box
Variant Selector	Standard · Card · Compact · Divided
Quantity Selector	Standard · Compact · Labelled · Quick pick · Full width
Add to Cart Button	Standard · Stacked · Compact · Pill · Boxed panel
Product Badge Strip	Row · Stacked · Soft tone · Framed

The first design of every block is today's look; if you choose nothing, your page does not change at all.

Every gallery design ships with a navigation set that suits its own language. All of them support the keyboard (← →, Home/End, Esc) and touch swiping; controls only appear when the product has more than one image.

Design	Navigation controls
Thumbnails	Thumbnail rail (vertical on desktop, horizontal on mobile) + edge arrows over the image + counter
Carousel	Thumbnail strip + previous/next buttons on either side of the strip + counter
Filmstrip	Edge arrows over the image + filmstrip below + counter
Grid	2×2 tiles; clicking a tile opens the full-screen preview. With more than four images the last tile shows a +N badge and the remaining images are browsed from the preview
Full width	Large edge arrows + dot indicator centred at the bottom + counter
Mosaic	Clicking any tile opens the full-screen preview (arrows, dots, keyboard)
Editorial flow	Clicking any image opens the full-screen preview (arrows, dots, keyboard)
Scroll snap	Edge arrows + dot indicator + finger swiping; a fade hint appears at the edges when the strip overflows

In the full-screen preview Esc closes and ← → move between images. Thumbnail rails take a single Tab stop; you move inside the rail with the arrow keys.

The Mosaic design now also honours the Zoom and Autoplay video settings: with zoom on, tiles magnify on hover; with autoplay on, the video in the full-screen preview starts muted on its own.

Design-specific extra settings. Some designs have their own setting, shown only while that design is selected. For example, Stock Status → Remaining bar reveals a Bar target field (the quantity the bar treats as 100%; leave it at 0 to use twice the store low-stock threshold). Quantity Selector → Quick pick reveals a Quick quantities list.

3. The preview product

While editing the Product Page template, the preview product picker appears in the top-right corner of the canvas. Opening it shows two sections:

Ready-made sample products — three built-in products so you can design the template even when your catalogue has nothing suitable:

Sample	What it demonstrates
Simple product	Single-price product; sale price, personalisation fields, extra info rows, cross-sell, call-to-action
Product with variants	Colour + size options; the gallery follows the colour, sold-out combinations are disabled, the size guide is filled in
Bundle product	Three-component bundle; bundle contents, customer-selected variant, bundle savings

Pick a product from my store… — selects a real product from your own catalogue. The blocks fill with that product's real data: real price, real images, real variants.

A product from your store is selected automatically the first time you open the template. If your store has no products yet, the Simple product sample is selected, so you never have to design against an empty canvas.

Changing the product does not reload the canvas; the preview updates instantly. When no product is selected (for example after you clear it), the blocks show "select a product for preview" placeholders.

Sample products are never saved to your store. They do not appear in your catalogue, storefront, search, product feeds or sitemap, and they cannot be ordered. They exist only inside the theme editor preview.

Store settings are representative under a sample product too. While a sample is selected, settings such as the discount countdown, stock visibility and live viewer count are treated as enabled so you can see how those blocks look. To see the effect of your own store settings, pick a real product — with a setting turned off the block falls back to its "disabled in store settings" placeholder.

Blocks whose data is created at runtime

Some blocks only get data on the live site, from real visitor activity. In the preview these show a representative value with a sample tag next to it:

Live Viewer Count — on the live site it appears only while at least 2 visitors are on the page at the same time; in the preview it prints a representative number.
Recently Viewed — on the live site it fills from the visitor's browsing history; in the preview it shows a framed set of sample products.

These representative values exist only in the editor. Live behaviour is unchanged: with no data, the block prints nothing.

Variant selection is turned off in this picker; the product's main variant is shown automatically. Check several product types to make sure the template looks right in every case.

4. Relationship with store settings

The product detail page layout now comes from blocks only. These settings under Theme Settings → Product were therefore removed and replaced by blocks:

Removed setting	What replaced it
Product Detail Layout (Classic Split · Gallery Top · Sticky Sidebar · Immersive)	The ready-made layouts (section 1)
Show Breadcrumb	Whether the Product Breadcrumb block exists (delete or deactivate it if you do not want it)
Sticky Add to Cart (Desktop)	Sticky Cart Bar block → Show on Desktop
Content Layout (Tab / Accordion)	Product Description block → Layout

No storefront changed during the migration: your old setting values were carried into the matching layout and block settings the first time your template was created.

Image Ratio was not removed — it is also used by product cards, so it moved to the Theme Settings → Product → Gallery dialog.

Other product settings keep working. While a block's setting is Store setting, the store preference applies; you can override it per block:

Store setting	Which block can override it?
Gallery type	Product Gallery → Gallery Layout
Gallery zoom	Product Gallery → Zoom
Image ratio	(no block setting — shared by the gallery and product cards)
Recently viewed	Recently Viewed → Visibility
Related products count	Related Products → Products Per Group

The following stay outside blocks and are managed only from store settings: image aspect ratio, discount badge/countdown rules, live viewer count.

5. Resetting to a default

The Product Page template cannot be deleted — the storefront is always block-based, so deleting it would leave product pages empty. Resetting takes its place:

Press the Reset to default (↺) button in the top toolbar.
Pick a ready-made layout in the dialog that opens.
The confirmation dialog tells you how many blocks will change; confirming replaces the template contents with the layout you picked.
Press Publish to make it permanent. (Applied one by accident? Ctrl+Z undoes it.)

Product-specific pages can still be deleted. Removing the custom page you opened for a single product returns that product to the shared Product Page template. See Urune Ozel Detay Sayfasi.en.

6. What never changes

Even after switching to the template these are preserved; deleting a block cannot break them:

Page title and description (SEO meta tags) — taken from the product.
Product data for Google (Product structured data: price, availability, rating).
Product view tracking (analytics).
Sticky add-to-cart bar (mobile and desktop) — now comes from the Sticky Cart Bar block, present in every ready-made layout.
Variant selection written to the address (?color=soft-red) — sharing the link opens the same variant.

FAQ

Can I build a separate template per product? No. The template is shared by all products. Product-specific differences (description, FAQ, cross sell) come from each product's own records.

I changed the template but nothing happened in the storefront. The change is still a draft. You need to press Publish.

I cannot delete the product page template. That is correct — the product page is block-based in every store now, so the template is protected. Use the Reset to default (↺) button to switch to the layout you want.

Product Page is not showing in the page selector. Close and reopen the theme editor: if the template is missing it is created automatically on open and appears in the selector. If it still does not show up, your user may not have the Theme · write permission — ask the store owner to grant it.

I want to switch a block on at a specific date. Select the block → Visibility tab → set a time range. See Kosullu Blok Gorunurlugu.en for details.

My product page looks too wide, or edge to edge. The block-based product page follows your store's general Content Width (Container) setting (under Theme Settings → General: Default · Wide · Full). With "Full" selected the page spans the whole screen; choose Default or Wide if you want side margins. A small gutter (including on mobile) is always kept regardless of the setting.