# Split banner

<figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FbrSctMJFMuTeMjf7fCN9%2FPrimavera%20Precision%20%C2%B7%20Customize%20primavera-1-0-0%20%C2%B7%20Shopify%202025-04-03%20at%2012.56.51%20pm.jpg?alt=media&#x26;token=79a0e490-eae4-474f-98f3-3bf95ee610a4" alt=""><figcaption><p>Split banner with image banner and shoppable banner blocks</p></figcaption></figure>

### Settings

* **Borders**:&#x20;
  * **Show top/bottom borders**
  * **Show divider border:**  When enabled, a divider border is added between the two blocks. The border takes on the color of the first color scheme border. <mark style="background-color:green;">Available in version 1.1.0 and later</mark>
* **Transparent heade**r: Only applies when transparent header is also enabled in the header

### Blocks

Mix and match two of the following blocks:

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><a href="../blocks/section-blocks/image-banner"><strong>Image banner</strong></a></td><td>An image with <a href="../blocks">theme blocks</a> overlaid</td><td><a href="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FlG8Jq9OMiGO2NzlSewGw%2FPrimavera%20Precision%20%C2%B7%20Customize%20primavera-1-0-0%20%C2%B7%20Shopify%202025-04-03%20at%2010.58.42%20am.jpg?alt=media&#x26;token=80fa1ede-ed51-4a73-855f-0dd138c466ae">Primavera Precision · Customize primavera-1-0-0 · Shopify 2025-04-03 at 10.58.42 am.jpg</a></td><td><a href="../blocks/section-blocks/image-banner">image-banner</a></td></tr><tr><td><a href="../blocks/section-blocks/video-banner"><strong>Video banner</strong></a></td><td>A video with <a href="../blocks">theme blocks</a> overlaid</td><td><a href="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FiTZTOCM65I18pSA6H6Ke%2FPrimavera%20Precision%20%C2%B7%20Customize%20primavera-1-0-0%20%C2%B7%20Shopify%202025-04-03%20at%2011.03.44%20am.jpg?alt=media&#x26;token=a51b8538-719f-45df-8ff6-7ad5b4ad25be">Primavera Precision · Customize primavera-1-0-0 · Shopify 2025-04-03 at 11.03.44 am.jpg</a></td><td><a href="../blocks/section-blocks/video-banner">video-banner</a></td></tr><tr><td><a href="../blocks/section-blocks/shoppable-banner"><strong>Shoppable banner</strong></a></td><td>An image or video with <a href="../blocks/mini-product">mini product</a> blocks</td><td><a href="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FvSFMFl9HDVD1ESDL3cet%2FPrimavera%20Precision%20%C2%B7%20Customize%20primavera-1-0-0%20%C2%B7%20Shopify%202025-04-03%20at%2011.09.04%20am.jpg?alt=media&#x26;token=4ad4d09a-8adb-4426-a6eb-54a96e6950ea">Primavera Precision · Customize primavera-1-0-0 · Shopify 2025-04-03 at 11.09.04 am.jpg</a></td><td><a href="../blocks/section-blocks/shoppable-banner">shoppable-banner</a></td></tr><tr><td><a href="../blocks/section-blocks/product-banner"><strong>Product banner</strong></a></td><td>Features a single product</td><td><a href="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FA4hlxP1mbVYWUrNplUam%2FPrimavera%20Precision%20%C2%B7%20Customize%20primavera-1-0-0%20%C2%B7%20Shopify%202025-04-03%20at%2012.38.47%20pm.jpg?alt=media&#x26;token=b090ef60-1fc8-4968-a497-924bacbd135e">Primavera Precision · Customize primavera-1-0-0 · Shopify 2025-04-03 at 12.38.47 pm.jpg</a></td><td><a href="../blocks/section-blocks/product-banner">product-banner</a></td></tr><tr><td><strong>Collapsible content</strong></td><td><a href="../blocks/section-blocks/rich-text">Rich text</a> with <a href="../blocks/collapsible">collapsible</a> blocks</td><td><a href="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2F82yyw2w9zhKTLapHnttX%2FPrimavera%20Precision%20%C2%B7%20Customize%20primavera-1-0-0%20%C2%B7%20Shopify%202025-04-03%20at%2012.41.10%20pm.jpg?alt=media&#x26;token=565202c3-e7c8-4a51-9f1a-42ba03248392">Primavera Precision · Customize primavera-1-0-0 · Shopify 2025-04-03 at 12.41.10 pm.jpg</a></td><td></td></tr><tr><td><strong>Countdown timer</strong></td><td><a href="../blocks/section-blocks/rich-text">Rich text</a> with a <a href="../blocks/section-blocks/countdown-timer">countdown timer</a> block</td><td><a href="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FUeorFOA4Ng2MEsP3Os7j%2FPrimavera%20Precision%20%C2%B7%20Customize%20primavera-1-0-0%20%C2%B7%20Shopify%202025-04-03%20at%2012.42.34%20pm.jpg?alt=media&#x26;token=ebc63134-03cc-4830-acd5-8cf90b81db62">Primavera Precision · Customize primavera-1-0-0 · Shopify 2025-04-03 at 12.42.34 pm.jpg</a></td><td></td></tr><tr><td><strong>Newsletter</strong></td><td><a href="../blocks/section-blocks/rich-text">Rich text</a> with a <a href="../blocks/section-blocks/newsletter">newsletter</a> block</td><td><a href="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FE0fZtQjshrMp3sYBS6Zf%2FPrimavera%20Precision%20%C2%B7%20Customize%20primavera-1-0-0%20%C2%B7%20Shopify%202025-04-03%20at%2012.43.14%20pm.jpg?alt=media&#x26;token=412361f4-abbe-4a28-a295-f4a214edf398">Primavera Precision · Customize primavera-1-0-0 · Shopify 2025-04-03 at 12.43.14 pm.jpg</a></td><td></td></tr><tr><td><a href="../blocks/section-blocks/rich-text"><strong>Rich text</strong></a></td><td>Simple <a href="../blocks/section-blocks/rich-text">rich text</a> block </td><td><a href="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2Flg8KpZkqsxQ23XGQPmyF%2FPrimavera%20Precision%20%C2%B7%20Customize%20primavera-1-0-0%20%C2%B7%20Shopify%202025-04-03%20at%2012.44.13%20pm.jpg?alt=media&#x26;token=d71a9b69-6410-481d-9aa1-9204c0c4f822">Primavera Precision · Customize primavera-1-0-0 · Shopify 2025-04-03 at 12.44.13 pm.jpg</a></td><td></td></tr></tbody></table>

### Examples & inspiration

<div><figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FREfCbgUfBDNXVlGdb1Km%2Fsplit-banner-savoir.webp?alt=media&#x26;token=97060909-6e0c-4ba1-a04f-2823d4d54305" alt=""><figcaption><p>The Savoir preset features an image  banner with no text next to collapsible content.</p></figcaption></figure> <figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2F1WpmiP3oOISlU3QELbR7%2Fsplit-banner-gloss.webp?alt=media&#x26;token=9b5f4d01-96ea-44dc-bc5a-0bacdbfe899a" alt=""><figcaption><p>The Gloss preset features an image banner with text next to a countdown timer.</p></figcaption></figure> <figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FNDr6brAGzs34Et9e3wcu%2Fsplit-banner-gloss-2.webp?alt=media&#x26;token=12c98310-6566-4756-a017-a0acf29b6aaf" alt=""><figcaption><p>The Gloss preset features an image banner next to a product banner.</p></figcaption></figure></div>

<div><figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2F3mv0XR7nib6YgFe2muMt%2Fsplit-banner-primavera-2.webp?alt=media&#x26;token=b2e43d89-438a-4aae-a634-634feac6fd21" alt=""><figcaption><p>The Primavera preset features an image banner with an image in it next to a product banner.</p></figcaption></figure> <figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FyEKHdgcj88JU8lmgY2F2%2Fsplit-banner-primavera.webp?alt=media&#x26;token=e7f78dd0-b439-4850-9639-68c60666f2f8" alt=""><figcaption><p>The Primavera preset features an image banner next to a video banner.</p></figcaption></figure> <figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2F1bxqB4bTFJwm4ldiAi1h%2Fsplit-banner-gaia-2.webp?alt=media&#x26;token=c6b38cdf-1e27-4e6b-96af-da9cf347a933" alt=""><figcaption><p>The Gaia preset features an image banner next to a product banner.</p></figcaption></figure></div>

<div><figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FC6ZaksPI0cEwnpCuL9fk%2Fsplit-banner-composition.webp?alt=media&#x26;token=67831dbe-b92e-44ac-894d-ee78bb9f6d37" alt=""><figcaption><p>The composition preset features a video banner next to an image banner with a shoppable image within in. </p></figcaption></figure> <figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FZsCbLupSX1urmyLvGFpe%2Fsplit-banner-composition-3.webp?alt=media&#x26;token=88cf1666-33ea-4525-b395-8a1aeab64d6d" alt=""><figcaption><p>The composition preset features an image banner with a rich text block that has a product card in it.</p></figcaption></figure></div>

### Similar sections

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>The <a href="split-card">split card</a> section allows you to place any two blocks side by side with spacing on either side.</td><td><a href="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2Fs9lbv7b4FMzdMmYya6tX%2Fsplit-card-savoir-2.webp?alt=media&#x26;token=b754bf81-31e2-4d86-b1ac-c7558a5fcc0e">split-card-savoir-2.webp</a></td></tr><tr><td>The <a href="rich-text-columns">richtext columns </a>section allows you place blocks beside eachother without stretching the images to be equal height</td><td><a href="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FoM9OPJhFqDr8EPlFw6OK%2FPrimavera%20Gloss%202025-04-02%20at%205.07.07%20pm.jpg?alt=media&#x26;token=6b2fb78d-6a79-4140-8894-c15d3b7fd74c">Primavera Gloss 2025-04-02 at 5.07.07 pm.jpg</a></td></tr></tbody></table>