Product page
The Product page template of Split: the gallery on one half, the product blocks on the other, size guide, tabs, back in stock and recommendations.
Applies to: Split 5.1.0 and later. Added in: Split 1.0.0. Last checked: 2026-10-13 against Split 5.1.0.
The Product page template is the page of each product: the media gallery on one half of the screen, the product information on the other half, and product recommendations below. You build the information half from blocks, in the order you want.
Where to find it: Products → Default product → Product page
On screens wider than 1024 px the gallery takes the left half and the product information the right half. The information half stays pinned while the customer scrolls through the images. On phones and on tablets held upright, both halves are full width: the gallery comes first, the information below it. See How Split is built for the split-screen layout.
Product gallery
The settings at the top of the Product page section set the gallery.
- Gallery style: Scroll (default) shows the images one below the other, so the customer scrolls through them. Slider shows one image at a time, as tall as the screen.
- Scale slider images to fit the viewport shows each image whole inside the gallery half, with empty space around it if needed. Off (default), images are cropped to fill the half. On mobile, images always fit the screen.
- Gallery pagination: Dots (default) or Thumbnails, small 60 px wide images of each media with a badge on videos and 3D models. With Scroll, selecting a dot or thumbnail scrolls the page to that image.
- Enable image zoom (on by default) adds a zoom icon to each image. It opens the image full screen; the image follows the mouse so the customer can look at details.
- Enable video looping replays product videos when they end.
When the customer selects a variant that has its own image, the gallery shows that image. With Scroll, the variant image moves to the top of the gallery and the page scrolls back to it.
The images will display within a slider on phones and on tablets held upright anyway (768 px and narrower, or up to 1024 px in portrait).
For image sizes, see Image size recommendations.
Product content blocks
The product information half is made of blocks. Select Add block inside the Product page section to add one, and drag blocks to reorder them. In the editor's order:
- Size guide: a link to a size chart page. See Setting up a size guide.
- Product header: the title, price and the product details below.
- Text: a short rich text, as body text or as a smaller subtitle.
- Variant picker: the product options.
- Back in stock alert: an email form for sold out variants. See Setting up the back in stock alert.
- Buy buttons: quantity, Add to cart and the dynamic checkout buttons.
- Inventory level: a stock message and bar. See Showing the inventory level and pre-order label.
- Description: the product description from Shopify admin.
- Share: links to share the product on Facebook, X (Twitter) and Pinterest. The preview uses the product's featured image and your store title and description.
- Complementary products: products that go well with this one.
- Custom HTML / Liquid: your own code. Krown support does not help with custom code.
- Collapsible tab: a heading that opens to show text, a page or an image. See Showing metafield content in a collapsible tab.
- Pickup availability: whether the selected variant can be picked up in a store.
- Disclosures: Shopify product disclosures. See Showing product disclosures.
Apps can add their own blocks here too, for example a reviews widget.
Product header
- Show vendor, Show product badge, Show product rating, Show tax information, Show SKU and Show BARCODE turn each detail on or off.
- Show product badge shows the Sold out, Sale and Pre Order or New badges of the selected variant. The badge types and colors are set in Product card theme settings.
- Show product rating shows the rating from the review app chosen in Theme settings → Product card → Product rating. See Showing product ratings.
- Show tax information shows "Tax included." when your prices include tax, and a link to your shipping policy when you have one.
- Above the product gallery (on by default) moves the product header above the gallery on mobile, so customers see the title and price first.
Variant picker
- Variants selector type: Blocks (default) shows each option value as a button. Dropdown shows one list per option.
- Show color swatches (Blocks only) shows color options as swatches. An option becomes swatches when its name is in Theme settings → Product card → Color swatches labels, or when its values have Shopify swatches from a category metafield. See Setting up color swatches for how to set up swatches.
- Handle unavailable variants: Show (default) keeps sold out combinations visible and selectable, marked as unavailable. Disable greys them out so they can't be selected. Hide removes them; when every value of an option is hidden, "There are no products left" appears.
- Products with a single variant hide the variant picker automatically.
Buy buttons
- Show quantity selector adds a quantity field next to Add to cart.
- Show dynamic checkout buttons (on by default) adds Shopify's accelerated checkout buttons, such as Shop Pay, PayPal or Apple Pay.
- Show recipient information form for gift card products lets customers send a gift card product to someone else, with a name, a message and a send date. Gift card products with this form do not show the dynamic checkout buttons.
- Show "pre-order" button label: see Showing the inventory level and pre-order label.
With Theme settings → Cart → Cart type set to Drawer, Add to cart opens the cart drawer. With Page, it opens the cart page.
To use the Shopify Dynamic checkout button, keep Show dynamic checkout buttons turned on in the Buy buttons block. For more info about this feature, see Shopify's dynamic checkout buttons guide.
Complementary products
- Shows small product rows with image, title and price under Heading (default "Pairs well with").
- Maximum number of products shown: 1 to 8, default 3.
- Enable quick buy (on by default) adds the Quick view button to each product.
- You choose the complementary products in Shopify's Search & Discovery app. Without them, the block shows nothing.
Pickup availability
The block shows whether the selected variant is available for pickup and opens the store pickup drawer with the list of locations. Pickup locations are set by Shopify, in Shopify admin → Settings → Shipping and delivery → Local pickup. See Drawers.
Setting up a size guide
The Size guide block shows a "View size chart" link that opens a Shopify page with your size chart.
Create the size chart page
In Shopify admin, open Online Store → Pages and create a page with your size chart, for example a table or an image.
Add the Size guide block
In the theme editor, open the product template, select Add block in the Product page section and choose Size guide. Drag it where you want the link.
Pick the page
Select the page in Size guide page. Change the link text in Text (default "View size chart") and turn off Show icon if you do not want the ruler icon.
Choose how it opens
Set Open options: the default option (shown as "Popup" in the editor) shows the page title and content in a lightbox over the product. Same window and New window open the page itself.
For a different size chart per product, connect Size guide page to a product metafield of the type page reference, with the dynamic source icon next to the setting. Then turn on Hide block if dynamic content is not present: products whose metafield is empty show no size guide link.
Showing metafield content in a collapsible tab
The Collapsible tab block is a Heading that the customer selects to open the tab. Inside it shows, in this order, the Tab content text, the content of the Tab content from page page and the Tab image. You can add as many tabs as you need.
You can use this block for unique content such as size charts, which you can either set up with pages or metafields.
To show different content on each product:
Create a product metafield
In Shopify admin, open Settings → Metafields and metaobjects → Products and select Add definition. Choose Rich text for text, Page for a page, or File for an image.
Fill it on your products
Open each product in Shopify admin and fill the new metafield at the bottom of the page.
Connect it to the tab
In the theme editor, select the Collapsible tab block. Select the dynamic source icon next to Tab content, Tab content from page or Tab image and choose your metafield.
Hide empty tabs
Turn on Hide block if dynamic content is not present. A product with no text, no page and no image for this tab then shows no empty tab.
Setting up the back in stock alert
The Back in stock alert block shows an email form when the selected variant is sold out. In the theme editor it always shows, so you can style it. When a customer sends the form, you receive an email through Shopify's contact form with the customer's email, the product, the variant and its URL.
Add the block
Select Add block in the Product page section, choose Back in stock alert and drag it under Buy buttons.
Write the texts
Edit Text (above the form), Button label, Success message (shown after sending) and Email message (the message line of the email you receive).
Check where the emails go
Shopify sends contact form messages to your store's email. Check the address in Shopify admin → Settings → Notifications.
Split does not notify customers automatically. When the product is back in stock, email each customer yourself, or use a back in stock app instead of this block.
Showing the inventory level and pre-order label
The Inventory level block shows a stock message under the buy buttons, with an optional bar. It needs inventory tracking on the variant in Shopify admin.
- Inventory notification: Display always (default) shows a message for every tracked variant. Display only when inventory falls below threshold shows it only for low or no stock.
- Low inventory threshold: 1 to 20, default 5. At or below it, the message reads "There are 3 products left" (or "There is only one product left!").
- Show progress bar (on by default) shows a bar that is full at twice the threshold and shrinks as stock goes down.
- A sold out variant that continues selling shows "This product is out of stock, but you can still order it."
To sell products before they are in stock:
Create a pre-order product template
In the theme editor, open the product templates menu at the top and create a template from Default product, for example "pre-order".
Turn on the pre-order label
In the new template, select the Buy buttons block and turn on Show "pre-order" button label. The add to cart button now says "Pre-Order".
Assign the template to your pre-order products
In Shopify admin, open each pre-order product and set Theme template to the new template. To keep selling when stock is 0, turn on Continue selling when out of stock on the product's inventory.
Add the Pre Order badge
Add the tag preorder to the product. Split then shows the Pre Order badge on product cards and in the Product header.
Show "pre-order" button label changes the button of every available variant of every product that uses the template, whatever its stock. Use it only on a template for pre-order products.
Showing product disclosures
The Disclosures block shows the disclosures you attach to a product with Shopify's Product disclosures, for example safety or regulatory information. It shows a title (Title, default "Disclosures") and a collapsible list with each disclosure's symbol and title.
Disclosures are set by Shopify at product level, not by Split: see Shopify's Product disclosures guide. The block shows nothing for products without disclosures for the product page. The cart shows disclosures too, and so does the Quick view popup when its Show disclosures setting is on (see Quick view). Added in Split 5.1.0.
Product recommendations
The Product recommendations section below the product shows 4 products related to the one on the page: its Heading (default "You may also like") on one half and the products on the other half. Shopify chooses the products from your orders and product data. To choose them yourself, use Shopify's Search & Discovery app.
Per-product promotions in a small banner over the product page are set in the Promotional banner section, with three product metafields.
Why is the variant picker required?
Because customers choose the variant they add to the cart in the Variant picker. Without it, Buy buttons always add the first available variant. Keep the Variant picker block on every template of products with variants; products with one variant hide it automatically.
Why does the barcode show as ISBN?
Because the theme text in front of the barcode is "ISBN: ". To change it, open Shopify admin → Online Store → Themes → … → Edit default theme content and search for "ISBN". Show BARCODE shows the variant's barcode from Shopify admin, whatever its type.
Can I use a different layout for some products?
Yes. Create another product template in the theme editor (from the templates menu at the top), change its blocks, and assign it to products in Shopify admin → the product → Theme template. The Cuber preset includes one, product.jackets.
All Product settings
Every setting of each part, with its type and default.
The same section is also on the alternate template Products → jackets.
Accepts these blocks: Size guide, Product header, Text, Variant picker, Back in stock alert, Buy buttons, Inventory level, Description, Share, Complementary products, Custom HTML / Liquid, Collapsible tab, Pickup availability, 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 product media show on desktop: Scroll stacks them one below the other while the product information stays pinned beside them, Slider shows one at a time, as tall as the screen. Phones and tablets held upright always get a slider. Options: Scroll, Slider.
Scale slider images to fit the viewport (checkbox, default: off): Shows each image whole inside the gallery on desktop, with empty space around it when its shape differs from the gallery. Off, images are cropped to fill the gallery.
Gallery pagination (radio buttons, default: Dots): Sets the gallery navigation: dots, or 64 px thumbnails with a badge on videos and 3D models. With Scroll, selecting one scrolls the page to that media. Options: Dots, Thumbnails.
Enable image zoom (checkbox, default: on): Adds a zoom icon to each product image that opens it full screen; on desktop the image moves with the mouse so customers can look at details.
Enable video looping (checkbox, default: off): Replays product videos and YouTube or Vimeo media 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").
Show icon (checkbox, default: on).
Size guide page (page picker): The Shopify page with the size chart. Connect it to a page reference product metafield for a chart per product.
Open options (dropdown, default: Popup): Popup shows the page title and content in a lightbox over the product; Same window and New window open the page. 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 link when Size guide page is empty, for example when its metafield has no value on this product.
Product header block
Where to find it: Products → Default product → Product page → Add block → Product header
One Product header block per section.
Show vendor (checkbox, default: on).
Show product badge (checkbox, default: on): Shows the Sold out, Sale, Pre Order or New badge of the selected variant.
Show product rating (checkbox, default: on): Shows the rating from the app set in Theme settings → Product card → Product rating.
Show tax information (checkbox, default: off): Shows "Tax included." when your prices include tax, and a link to the shipping policy when you have one.
Show SKU (checkbox, default: off).
Show BARCODE (checkbox, default: off): Shows the barcode of the selected variant, after the theme text "ISBN: ".
Product header block: Position on mobile devices
Where to find it: Products → Default product → Product page → Add block → Product header → Position on mobile devices
Above the product gallery (checkbox, default: on): Moves the product header above the gallery on mobile.
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): Body uses the body text size; Subtitle uses a smaller size. Options: Body, Subtitle.
Variant picker block
Where to find it: Products → Default product → Product page → Add block → Variant picker
One Variant picker block per section.
Variants selector type (dropdown, default: Blocks). Options: Blocks, Dropdown.
Show color swatches (checkbox, default: on): Shows swatches for options named in Theme settings → Product card → Color swatches labels, and for options whose values have Shopify category metafield swatches. Shown only when Variants selector type is Blocks.
This theme also offers support for color swatches created with category metafields. Shopify Help Center.
Handle unavailable variants (dropdown, default: Show): Show keeps sold out combinations selectable and marks them; Disable greys them out; Hide removes them. Options: Disable, Hide, 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.").
Button label (text field, default: "Notify me").
Success message (text field, default: "Thanks! We will notify you when this product becomes available!").
Email message (text field, default: "I would like to be notified when this product is back in stock."): The message line of the contact form email you receive.
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).
Show "pre-order" button label (checkbox, default: off): Changes the add to cart text to "Pre-Order" for every available variant of products using this template, whatever their stock.
Show dynamic checkout buttons (checkbox, default: on): Using the payment methods available on your store, customers see their preferred option, like PayPal or Apple Pay. Shopify Help Center.
Show recipient information form for gift card products (checkbox, default: off): Adds the recipient form (email, name, message, send date) to gift card products and hides their dynamic checkout buttons.
Inventory level block
Where to find it: Products → Default product → Product page → Add block → Inventory level
One Inventory level block per section.
Inventory notification (dropdown, default: Display always): Display always shows a stock message for every tracked variant; the other option shows it only at or below Low inventory threshold. Options: Display always, Display only when inventory falls below threshold.
Low inventory threshold (slider 1 to 20, default: 5): The stock level at or below which the low stock message shows.
Show progress bar (checkbox, default: on): Shows a stock bar that is full at twice Low inventory threshold.
Description block
Where to find it: Products → Default product → Product page → Add block → Description
One Description block per section.
The Description block has no settings in Split 5.1.0.
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.
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").
Enable quick buy (checkbox, default: on): Adds the quick buy button to each complementary product.
Maximum number of products shown (slider 1 to 8, default: 3).
Custom HTML / Liquid block
Where to find it: Products → Default product → Product page → Add block → Custom HTML / Liquid
Custom Liquid (Liquid).
Collapsible tab block
Where to find it: Products → Default product → Product page → Add block → Collapsible tab
Heading (text field, default: "Collapsible tab"): Include a heading that explains the content.
Tab content (rich text).
Tab content from page (page picker).
Tab image (image).
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 when Tab content, Tab content from page and Tab image are all empty for this product.
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 Split 5.1.0.
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.
Title (text field, default: "Disclosures").
Product disclosures can be configured with metafields at product level.
Where to find it: Products → Default product → Product recommendations. The same section is also on the alternate template Products → jackets.
Product recommendations section: Product recommendations
Where to find it: Products → Default product → Product recommendations → Product recommendations
Heading (text field, default: "You may also like"): The title of the section, shown on one half beside 4 products that Shopify recommends for this product.
Related pages
- Featured product section: the same gallery and blocks in a section on any page.
- Quick view: the Quick view popup that opens from quick buy on product cards.
- Product card theme settings: color swatches, badges and ratings.
- Promotional banner section: per-product promotions.
- Using dynamic sources for unique product pages: connect metafields to blocks.