How Split is built

Applies to: Split 5.1.0 and later. Added in: Split 1.0.0. Last checked: 2026-10-13 against Split 5.1.0.

Split builds every page from boxes measured in fractions of the screen: halves, quarters and full screens. This page explains that split-screen layout once, plus the parts you work with in the theme editor: section groups, sections, blocks, theme blocks and templates.

Where to find it: Shopify admin → Online Store → Themes → Customize. The theme editor sidebar lists the Header group, the sections of the current template, the Footer group and the Overlay group.

The split-screen layoutCopy Anchor Link

On screens wider than 1024 px, Split places content in boxes sized from the screen, not from the content:

• A half is 50 % of the screen width and at least one screen tall. Most Split sections are two halves side by side: text on one half, an image on the other.
• A full-width box is 100 % of the screen width and at least one screen tall.
• Smaller boxes are a quarter of the width and half a screen tall, or half the width and half a screen tall. Product grids, collection tiles and blog posts use them.
• One screen tall means the browser window height minus the Header group (announcement bar, header and breadcrumb). A full-height section fills exactly the space under the header. Split measures it again when the window is resized.

Thin lines divide the boxes. Their opacity is Borders opacity in Colors theme settings.

The sticky halfCopy Anchor Link

In many two-half layouts, one half stays in place while the other half scrolls. This happens on screens wider than 1024 px (and on tablets held sideways) only:

• Regular page: the page title stays on the left while the content scrolls on the right.
• Blog posts, Collection list, Collection slider and Contact Form sections: the title half stays while the other half scrolls.
• Collection page without a collection image: the collection title stays while the products scroll.
• Product page: the product information stays beside the gallery while the customer scrolls through the images. With Gallery style set to Slider, the gallery stays in place too.

Phones and tablets held uprightCopy Anchor Link

On phones and on tablets held upright (768 px and narrower, or up to 1024 px in portrait), every half becomes full width and the boxes stack. Heights follow the content instead of the screen, except where a section has its own mobile height setting (for example Slider height in the Slideshow section). Product grids show 2 products per row.

Sections with a desktop layout choiceCopy Anchor Link

Four places let you choose between two halves and one full-width box on desktop. On mobile devices the layout is always full width.

Which sections are halves and which are full widthCopy Anchor Link

• Two halves, image left or right (with Image position): Rich text, Shop the look, and the Slideshow in Split screen.
• Always two halves: Testimonials (title left, quotes right), Collection list, Blog posts, Collection slider, FAQ, Contact Form and the Product page (gallery left, product information right).
• Full width: Heading, Image, Image with hotspots, Map, Video: background, Video: popup, Scrolling text, Scrolling images, Countdown banner, Images with text (1 to 4 columns), Gallery, Flex cards and Flex grid.

Section groups: header, footer and overlaysCopy Anchor Link

Split has three section groups. A section group is a set of sections that shows on every page. You edit it once, from any template. Section groups arrived in Split 4.0.0.

• Header group: Announcement bar, Header and Breadcrumb. You can also add a Scrolling text section here. The Header section can be only in this group. See Header group.
• Footer group: Text columns with icons, Email signup and the Footer. Most content sections can be added here too.
• Overlay group: the Popup and Cookies sections, which open over the page. The Promotional banner can be added only to this group. See Overlay group.

The Header group height counts in the "one screen tall" measure: a taller header area (for example an announcement bar plus a breadcrumb) leaves less height for the sections below it.

Sections and their blocksCopy Anchor Link

• You add a section with Add section in a template or a section group. Split has 29 content sections, listed on Sections.
• Most sections have their own blocks: a Slide in the Slideshow, a Testimonial in Testimonials, a FAQ in the FAQ section, the product blocks on the product page. Each section page documents its blocks.
• The theme sets each section's block limit. For example, the Slideshow takes up to 8 slides and Shop the look up to 4 products.

Theme blocks in the Flex sectionsCopy Anchor Link

Split 5.0.0 added two sections built from cards and theme blocks:

• The Flex cards section holds Flex cards side by side on a 12-column grid.
• The Flex grid section holds Media cards and Text cards that span columns and rows.
• The Card and the Text card hold theme blocks: Heading, Text, Button, Image, Caption, Divider, Empty space, Star rating, Custom Liquid and Content group.
• Theme blocks work only inside these cards. The other Split sections use their own blocks.

TemplatesCopy Anchor Link

A template sets which sections a page type shows. Split has one template for each Shopify page type: home page, product, collection, collections list, search, blog, article, page, cart, 404, password, gift card and the customer account pages. It also has the Quick view template, used by quick buy on product cards.

Each preset also installs alternate templates with demo content, for example a lookbook page or a product template with extra sections. To use one, open the product, collection or page in Shopify admin and choose it under Theme template. The list for each preset is on Cuber preset, Jagger preset and Looker preset.

Why does my full-height section look short and wide on a laptop?Copy Anchor Link

Because a full-height box is as tall as the browser window minus the header. On a short laptop screen that height is small, while the width stays 50 % or 100 % of the screen. The image in the box is then cropped at the top and bottom. Use images with the subject in the center, at the sizes in Image size recommendations.

Can I turn off the split-screen layout?Copy Anchor Link

Only in the four places with a desktop layout choice: Slideshow, Collection page, Regular page and Collection navigation. Split does not support a full-width version of the other two-half sections. Use a full-width section instead, for example Images with text in place of Rich text.

Related pagesCopy Anchor Link

• Image size recommendations: image sizes for the split and full width boxes.
• Sections: every section you can add.
• Theme blocks: the blocks of the Flex sections.
• What is Split: the theme at a glance.