# Broadcast theme documentation

These docs are here to guide you as your store evolves. We aim to keep things intuitive and require as little documentation as possible, but when complexity arises, we provide clear, experience-backed guidance.

Our team has spent over a decade building Shopify themes and working with startups and global brands alike. That insight is built into Broadcast and into these documents.

If it’s here, it’s likely worth your time, whether you're just getting started or optimizing a mature store.\
From the team at Presidio Creative, we hope you enjoy using Broadcast as much as we enjoyed creating it.

## Explore Broadcast demonstration stores

Explore our demonstration stores to see design elements and features included in Broadcast. These Broadcast presets are available in the *Shopify Theme store*:

{% columns %}
{% column %}

<div data-with-frame="true"><figure><img src="/files/d8hs4ECRJMsfvNM5M1bn" alt=""><figcaption></figcaption></figure></div>
{% endcolumn %}

{% column %}

### Airwave

Experience our **Food and Drink** preset with a clean layout and promotions to help shoppers find product and brand information. Airwave features a clean, modern design with easy-to-choose product variants and upsell promotions.&#x20;

[Click to view](https://themes.shopify.com/themes/broadcast/presets/airwave)
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column %}

<figure><img src="/files/id0BC58FbToptWwTLslh" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

### Stellar

We showcase **Beauty** products in Stellar, with video elements throughout the preset and playful design elements to make the shopping experience a joy. Explore the numerous subtle advantages that Broadcast offers to different demographic groups:

[Click to view](https://themes.shopify.com/themes/broadcast/presets/stellar)
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column %}

<div data-with-frame="true"><figure><img src="/files/pB58i3bCODJNf2PfFErq" alt=""><figcaption></figcaption></figure></div>
{% endcolumn %}

{% column %}

### Broadcast

Our primary **Jewelry and Accessories** demo preset. Find easy-to-use product pages with multiple upsell promotions. Beautifully designed product cards and promotions.&#x20;

[Click to view](https://themes.shopify.com/themes/broadcast/presets/broadcast)

{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column %}

<div data-with-frame="true"><figure><img src="/files/B1SLsA8XiRYTKvqzFzyR" alt=""><figcaption></figcaption></figure></div>
{% endcolumn %}

{% column %}

### Relay

Bring the wonderful world of **Kids**' products to life. A fun and colorful demo preset to demonstrate the many customization options in Broadcast, including colors and typography. Timed promotions help shoppers take advantage of sale events.

[Click to view](https://themes.shopify.com/themes/broadcast/presets/relay)

{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column %}

<div data-with-frame="true"><figure><img src="/files/YSx91PwgxX2jTa2Vxx8k" alt=""><figcaption></figcaption></figure></div>
{% endcolumn %}

{% column %}

### Signal

Broadcast excels for **Clothing** stores. Merchandise with our large library of professionally designed and coded sections and blocks. Standing out from other stores, Signal showcases a bold shopping experience with information that helps shoppers find the right product for their cart.

[Click to view](https://themes.shopify.com/themes/broadcast/presets/signal)

{% endcolumn %}
{% endcolumns %}

> ✔️ Our Broadcast demonstration stores utilize only the features included with the theme, without using any third-party apps, except for Shopify's free apps, to show how we integrate with Shopify's tools.  &#x20;

## View the premium sections available in Broadcast:

{% content-ref url="/pages/9ctqrg5lLfCu7HriS7Tg" %}
[Sections](/sections/sections)
{% endcontent-ref %}

Watch our video overview of the sections used in the **Modern demo store**:

{% content-ref url="/pages/f2TcXCEnh6yqRH5v49oJ" %}
[Demo store sections](/sections/demo-store-sections)
{% endcontent-ref %}

## Find out more about our latest release

> **Broadcast 8.0** is now out in the Shopify Theme Store. Download the latest version of Broadcast from the [Shopify theme store](https://themes.shopify.com/themes/broadcast/styles/clean)
>
> All licensed customers can download the latest version for free to their store. Continue running your current version and publish only when you've set up the latest.&#x20;

What's New Articles:

{% content-ref url="/pages/C5BuoMFozXFxKoj8Du8v" %}
[About v8.0 release](/updates/whats-new-in-broadcast/about-v8.0-release)
{% endcontent-ref %}

Changelog:

{% content-ref url="/pages/-MciaahXBy1At2WseKmd" %}
[Release Notes](/updates/whats-new-in-broadcast/release-notes)
{% endcontent-ref %}

## Experience Broadcast for Free

If you're new to Broadcast, you can easily download a free trial version from Shopify's Theme Store. With Broadcast, you can create a store that perfectly fits your brand, products, and services. You can use it as a draft theme for as long as you need without any time constraints. Only pay when you're ready to publish your store.

#### [Free unlimited trial available from the Shopify Theme Store - Click here](https://themes.shopify.com/themes/broadcast/presets/broadcast)

## Broadcast Theme Support

If you have questions or need additional assistance with using the theme, our support staff is here to help you by email. We offer free theme-related support by email to all our customers with no extra fees. You can also inquire about features or ask us questions about the theme before your purchase:

{% content-ref url="/pages/-Mh\_0pthzvHn7ngZ8sIy" %}
[Contacting support](/support/contacting-support)
{% endcontent-ref %}

## Earlier versions of Broadcast

Broadcast has grown with Shopify over the years. We are currently on the sixth generation of the theme. To change the version, click the version toggle at the top of the page next to the logo.


# Feature requests

Help shape the future of Broadcast: Share your feature requests.

We're committed to continuously improving Broadcast and providing the best possible experience for our customers. We believe that our customers are the key to our success, and we want to hear from you!

We understand that everyone has unique needs and requirements for their online store. That's why we're providing this page to give you the opportunity to request new features for Broadcast that will enhance your experience. Whether it's a minor adjustment or a significant change, we want to hear your ideas.

To submit your feature request, please click the link below and fill out the form with as much detail as possible. Tell us what you need, why it's important to you, and how it will help your business. We review all requests and use them to prioritize updates and improvements to Broadcast.

Thank you for choosing Broadcast and for taking the time to share your feedback with us. We're excited to work together to make our theme even better!

<a href="https://invisible-themes.upvoty.com/b/broadcast/" class="button primary">Submit your feature request</a>


# What's new in Broadcast

New features and updates in Broadcast


# Release Notes

Broadcast theme updates

### Version 8.1.0 - February 27, 2026

#### Added <a href="#id-467894b3-af18-4c73-b13d-a67530ffe564" id="id-467894b3-af18-4c73-b13d-a67530ffe564"></a>

* New Stellar demo store

#### Fixes and other improvements <a href="#b90bc833-b220-42d0-ae5c-d727893a8bdc" id="b90bc833-b220-42d0-ae5c-d727893a8bdc"></a>

* Resolved an issue where Slideshow and Banner mobile images failed to render when image quality did not meet minimum requirements

***

### Version 8.1.0 - February 27, 2026

#### Added

**New features, sections, presets, or capabilities added**

* New Motif Preset
* New section: Shop the look: Gallery
* New section: Dynamic content
* Highlights section - new block settings

***

#### Changed

**Enhancements, updates, optimizations, UX improvements, or structural refinements**

* Mobile menu - Remove “pin to bottom” functionality from most blocks
* Overlay in color schemes
* Update demos
* Update theme listing folder
* Updates (general maintenance updates)
* Performance updates
* Finish CSS structure and improvements for Quick view modal
* Article title - heading improvements

***

#### Fixes and other improvements

**Bug fixes, regressions, display issues, accessibility fixes, and broken functionality**

#### Product / Variant / Pricing

* Buy It Now adds incorrect variant
* Sibling swatches not rendered correctly on product grid
* Sale price showing twice for variants with discount
* Sale Badge “money” showing wrong value
* Variant ID missing via search
* Product grid content flickering when hovering swatches
* Products with image bug (full width padded)
* Cart bar feature - Add to cart button not working

#### Sections & Blocks

* Featured Image - Overlay type option doesn’t work
* Advanced text block issue in Scrolling text section
* Scrolling text section overlap issue
* Product section - Buy Buttons display issue
* Custom content - Video block overflow
* Rich text with columns section limited to one button block
* Reverse block placement not working in Product/Custom sections
* Multi-column extra spacing under images

#### Cart / Cart Drawer

* Cart drawer display issues (Safari + Chrome height shift)
* Quantity dropdown issue on Cart page (desktop)
* Dynamic Checkout Button not appearing on fresh version

#### Menu / Header / Layout

* Mobile menu height static across dropdown layers
* Header CTA button overflow
* Visual problems when moving sections

#### Forms / Customer / Orders

* Notify Me When Out of Stock form issue
* Incorrect order details when clicking "Buy Now" button
* Incorrect order information (“Sale type: Pre-order”)
* Missing text/button on customer reset password page
* Product form shipping policy appearing automatically

#### Accessibility & UX

* Accessibility issue - drawer menu
* Voiceover issues (A11y)
* Newsletter popup unresponsive on iOS

#### Media / Quick View / Display

* Quick view image container broken
* Recently Viewed additional images option not working properly

### Version 8.0.0 - October 8, 2025

#### Added

* New section: **Collection links: Spotlight**
* New section: **Social video**
* New section: **Banner with video** (overlay)
* Added support for high-variant products. Performance improvements for variants over 250.&#x20;

#### Changed

* Quickadd Button: Reintroduced the original button style, giving users a choice between two styles
* Scrolling Text: Improved the animation when hovering over the text element

#### Fixes and other improvements

* Resolved an issue where the Product Badge font size was not being applied correctly

***

### Version 7.1.1 - August 4, 2025

#### Fixes and other improvements

* The Main Broadcast preset was missing the Product template file.

***

### v7.1.0 - July 31, 2025

#### Added

* Color Opacity Controls: Fine-tune the transparency of your theme's colors.
* Collection Page Infinite Scroll: An optional pagination style for a seamless browsing experience.
* Multicolumn: New "Image with Text Overlay" block.
* Collection List: New "Collection with Text Overlay" block.
* Slideshow & Banner Image: Bottom padding options between blocks for greater control over text spacing.
* Variant-Level Pre-Order Styles: Apply distinct pre-order styles to individual product variants.
* Product Template Accordion Style: Choose an optional "drawer" style for your accordion blocks.
* Product Template Estimated Delivery Date: A new block to easily display estimated delivery dates.
* New Standard Product Section: A dedicated section to showcase product images and forms with direct add-to-cart functionality.
* Product Recommendations: Customize the number of products displayed per row in your recommendations.
* Cart and Cart Drawer Discount Code: A new block allowing customers to enter their discount codes before checkout.

#### Changed

* Product Pop-up Text: Now opens in a drawer for improved style consistency.
* Mobile Header Menu: Mobile menu styles now utilize the dedicated "Mobile Menu" section design.

#### Fixes and other improvements

* Out-of-Stock Notification: Resolved an issue where product titles were truncated in emails.
* Press Logos: Fixed autorotation not working correctly on mobile devices.

***

### v7.0.0 - June 9, 2025

#### Fixes and other improvements

* Restructured theme files for theme store redesign.

***

### v6.2.0 - April 30, 2025

#### Added

* Quick add button: Refined the visual style for both desktop and mobile interfaces.
* Cart and Cart drawer: Expanded text size controls.
* Slideshow buttons: Introduced a "Side-by-side" button style option
* Slideshow video block: Enabled video integration within slideshow blocks
* Button size controls: Added size adjustment options for all button elements: small, medium, large.
* Add to cart button: Implemented an option to display the product price directly on the ATC button.
* Rich text columns: Introduced a divider block for enhanced layout control.
* Product form: Added the ability to assign descriptions to color variants for improved product clarity.

#### Changed

* Button hover animation: Improved the button hover animation style for a more polished user experience.
* Variant selection and hover: Refined variant selection and hover styles for enhanced visual feedback.

#### Fixes and other improvements

* Header search: Removed the forced bold font style from the header search input.
* Recently viewed: Corrected an issue where the "Recently Viewed" tab was displayed even when no products were present.

***

### v6.1.0 - February 12, 2025

#### Added

* New section called "Slideshow (Nested)" introduces nested blocks for greater control over content layout. "Slideshow (Legacy)" remains to ensure a smooth upgrade process.
* Quantity field styles within the product form and cart to choose between -/+ or a dropdown.
* Upsell and complimentary products slider style.
* Product grid badge alignment options.
* Control over the width of your content on the "Slideshow" and "Banner" sections.
* New "Check" icon.

#### Changed

* Improved "Slideshow" full image linking. &#x20;

#### Fixes and other improvements

* "Text columns with image" was missing the image shape feature.
* "Blog" pagination content was not updating.

***

### v6.0.0 - December 16, 2024

#### Added

* There is a new section called "**Mobile menu**" (under the "**Header**") that utilizes blocks for flexible design options.
* Scrolling text - A New "**Collection**" block
* Shop the look - Header setting

#### Changed

* New color palettes are here. Broadcast now uses Shopify's Color Palettes to manage color schemes.&#x20;
* New typography styles and settings! Another significant change in Broadcast is the management of typography settings.&#x20;
* <mark style="background-color:yellow;">**Important**</mark><mark style="background-color:yellow;">: If upgrading from an earlier version of Broadcast, you will be required to reset your color and typography settings.</mark>

#### Fixes and other improvements

* Removed the "Cookies" popup. Please use the built-in Shopify version instead.

***

### v5.8.4 - November 19, 2024

#### Added

* New demo preset called "Groove"

#### Changed

* Updated "Bright" demo preset colors and fonts to match new design

#### Demo Store

* View the new [Groove demo store > ](https://themes.shopify.com/themes/broadcast/styles/groove/preview)

***

### v5.8.2 - October 2, 2024

#### Fixes and other improvements

* Updated style presets to match the Clean demo store upon initial installation, including colors and default sections.&#x20;
* Accordion - If enabled, the "read more" button was not appearing on iOS devices

***

### v5.8.1 - September 3, 2024

#### Added

* Multicolumn - Product block that automatically pulls in product grid image and content
* Option to have Collection "filter" accordions open by default
* Input HTML into Slideshow header to bold, italicize, or include a CSS class for further design customization.

#### Fixes and other improvements

* "More payment options" text was missing below the Dynamic Checkout Button (Paypal, Shop Pay, etc.)
* The header "circle" cart icon option was showing an underline on hover
* Predictive search was showing the secondary product image instead of the first one
* Footer content would show as a broken accordion if there were no "Heading" entered
* Prevent drastic size adjustments by the browser if the chosen font size is too small

***

### v5.8 - July 11, 2024

#### Added

* New section - Image with scrolling text
* New section - Image with product
* New design element: A theme-wide optional "Superscript" design that shows the number of products in a collection for multiple sections.
* Image banner and Slideshow sections - Top and bottom padding settings added.
* Blog articles - A product list option was added to link multiple products easily.&#x20;

#### Changed

* Improved the "Show secondary image on hover" setting to include tablet and mobile functionality. Added the ability to scroll through product images (max 5 for speed load)

#### Fixes and other improvements

* Final sale text was not appearing in the quick add

***

## v5.7 - June 4, 2024

#### Added

* A new section called “Rich text columns.”
* Optional accordion style for the Footer blocks on mobile
* Added a “hide” tag to products to prevent them from showing on search results, collection pages, recommended and recently viewed (use case: samples)
* Sold out badge

#### Changed

* Additional size and spacing options were added to the text and button blocks in the "Before and after" section.  The image will be forced to full-width image size if no blocks are present.
* Timeline dots are clickable on mobile.
* Moved the “Remove” text in the cart to underneath quantity for an improved user experience

#### Fixes and other improvements

* Editions ’24 taxonomy and filter updates
* Cart text was missing the zero if no products were in the cart
* Out-of-stock notification form will appear on the sticky cart for no variant products

***

## v5.6.1 - April 19, 2024

#### Fixes and other improvements

* Fixed an issue where the Out of stock notification form was always choosing the first available variant combination.

{% hint style="info" %}
If you upgraded to 5.6.0 and have already configured your new theme, please contact our customer support. We will manually add the fix for the notify form. Or update your theme to 5.6.1, which has corrected the issue.&#x20;
{% endhint %}

***

## v5.6 - April 15, 2024

#### Added

* "Back in stock" notification feature for out-of-stock products&#x20;
* 4 new styles for the collection color swatches
* "Fit guide", "Countdown timer" and "SKU" block to the Product template
* New blocks for the cart drawer: "Payment icons", "Icon", "Product list", and "Custom code"
* Final sale shoutout on the product page to call out products that cannot be returned or exchanged&#x20;
* Connect images to your product variant boxes
* Show "Recently viewed" products in your empty cart
* Automatically add a "New" badge based on when a product was created. Disappears after a set number of days
* Important: Separated "Accordion", "Tabs" and "Description" styles on the product page into individual blocks for greater control. If upgrading, your description will automatically convert to the "Tabs" style

#### Changed

* Hide default banner images on the product page if you are using metafields for some products and not others
* Option to hide sold-out upsell products

#### Fixes and other improvements

* "Cart drawer - Note" not saving in certain circumstances&#x20;
* "Popup" was not closing if you clicked outside of the area
* Product grid images appeared blurry for some merchants

***

## v5.5 - February 5, 2024

#### Added

* Implemented blocks on the "Cart" template and "Cart drawer" section. Please note you may need to reconfigure these sections if you decide to upgrade.
* Image with text - Introduced "Product" and "Collection" blocks
* Announcement bar - New "Countdown timer" block
* Rich text - Added an "Image" block
* Collection - Added the ability to add more than one "Featured image" block

#### Changed

* Added the option to show the product grid badges (sale, pre-order, custom) on the product page
* Updated the design for the "Timeline" section on mobile screen sizes
* Accordions - Option to show "open by default"
* Image with text and Rich text - Customize spacing between blocks with the new "bottom spacing" setting
* Added the number of items in the cart beside the cart header for a better user experience

#### Fixes and other improvements

* Removed "Reviews" from the product page as the Shopify app is no longer available
* Toolbar - Fixed a mobile issue that was causing the "Gift card" link to get cut off
* Fixed an issue where the cart notes were not being saved if you selected "View cart"

***

## v5.4.1 - December 14, 2023

#### Added

* Added an optional icon setting to the Product page "Popup" block
* Recommended products and Recently viewed products - New alignment and size settings
* Products with image - New background color setting
* Implement Shopify's new swatch collection filter
* Introduced a "Swatch size" setting allowing for greater visibility for patterned swatches (new sizes: regular and large)

#### Changed

* Countdown timer - Implemented new "height" setting to control desktop and mobile height separately.
* Twitter - Updated icon to "X"

#### Fixes and other improvements

* Product grid - Fixed a bug that was preventing the color swatch from showing on hover
* Search - Closing icon was missing
* Product page - The sticky cart bar was covering content on mobile
* Collection - Additional white space appeared when filters were disabled

***

## v5.4 - November 15, 2023

#### Added

* New section - Text with products
* Image with text - Added "Image" and "Video" blocks
* Product page - Introduced a transparent header using product images. We recommend using the "Stretch" image size with this one!
* Implemented "Subheading" styles for greater control over typography
* Scrolling text - Added an option to choose the font family: heading or body

#### Fixes and other improvements

* Quick view drawer - Fixed an issue where the focal point of the image was not centered
* Collection "sort by" improved to work when filters are disabled
* Removed "Upsell" product title when a product did not have an upsell associated with it

***

## v5.3 - October 20, 2023

#### Added

* New section - Timeline
* New section - Countdown timer
* Added icon options to the accordions
* New “Popup” block on the product page
* Ability to choose up to 3 upsell products (instead of just one)

#### Changed

* Text columns with images/icons - New image per row setting
* Updated design layout for the “Article” template

#### Fixes and other improvements

* Fixed an issue with the toolbar content on mobile

***

## v5.2 - September 18, 2023

Major release 🎉

{% content-ref url="/pages/3TvXslZIsjTYNpzGnhRR" %}
[About v5.2 release](/updates/whats-new-in-broadcast/about-v5.2-release)
{% endcontent-ref %}

#### Added <a href="#ad62659d-7a1a-4780-9123-ef0a956466ad" id="ad62659d-7a1a-4780-9123-ef0a956466ad"></a>

* Header - New block available: Toolbar; Additional currency styles
* Image with text - New block: Accordion
* Tabbed collections - New option: Mobile grid layout
* Accordion group - New option: Show accordions in 2 columns
* Multicolumn - New option: Image styles (set your images into circles)
* Footer group - New block & section: Divider
* Introduced more size chart styles

#### Changed <a href="#id-8a603b0c-54a2-42eb-84a0-21c4ce4a7882" id="id-8a603b0c-54a2-42eb-84a0-21c4ce4a7882"></a>

* Custom content - Ensured the width options were consistent with the rest of the sections
* Announcement bar - Arrows appear by default if enabled (instead of on hover)

#### Fixes and other improvements <a href="#id-0abea527-cd30-4bb5-b69d-cc92f1e38e22" id="id-0abea527-cd30-4bb5-b69d-cc92f1e38e22"></a>

* Removed additional padding that was occurring on the product form for "Pre-order" products
* Collection list - Linked the header to the collection
* Search - The second product image was showing instead of the first one
* Header - Fixed an issue with the mobile logo sizes not applying properly

***

## v5.13 - July 19, 2023

Minor release

#### Fixes and other improvements

* Fixed a liquid error coming from the `preload_tag` URL filter on `swatches.css.liquid` file

***

## v5.1 - June 28, 2023

Major release 🎉

{% content-ref url="/pages/FXY8LI4JKmPw2oqP0wRX" %}
[About v5.1 release](/updates/whats-new-in-broadcast/about-v5.1-release)
{% endcontent-ref %}

#### ADDED

* New section - Image with text slider
* Gift card - Added a date picker
* Header - Added a mobile logo width option
* Header - Introduced the option to enable a bottom border
* Cart - Added a "Terms and conditions" checkbox

#### CHANGED

* Improved color swatch implementation and introduced sibling color swatch options
* Featured product - New design 🎉
* Scrolling text - Added background image and image blocks
* Featured collection - Introduced a width setting

#### FIXES AND IMPROVEMENTS

* Slideshow - Fixed a linking issue that was preventing the entire slide from linking out to another page
* Fixed a quick add bug that was causing problems in Firefox

***

## v5.0 - May 1, 2023

Major release 🎉

{% content-ref url="/pages/S0R5Os7fIKWxT6y1JwgF" %}
[About v5.0 release](/updates/whats-new-in-broadcast/about-v5.0-release)
{% endcontent-ref %}

#### NEW

* Gift card - Send directly to the recipient and include a message
* Add a product to upsell in an empty cart
* Multicolumn - New mobile aspect ratio setting
* Shop the Look - New products per row (1 - 2) setting
* Collection list - New mobile style options

#### CHANGED

* Removed underline style when buttons set to "Text" with arrow enabled
* Merged "Custom Liquid" and "Custom HTML" into one section called "Custom Code"
* Updated "Upsell" functionality to work with one product and meta fields

#### FIXES AND IMPROVEMENTS

* Cart.js optimizations

***

## v4.0 - March 15, 2023

Major release 🎉

This release introduces two new sections: collection list hover and text with products. We've also updated to include Shopify section groups and the new Shopify query suggestions for predictive search plus a few other improvements.

{% content-ref url="/pages/32AINoI5DAI5nrVRIAW0" %}
[About v4.0 release](/updates/whats-new-in-broadcast/about-v4.0-release)
{% endcontent-ref %}

#### NEW

* New section: Collection list hover
* New section: Text with products
* Implemented Shopify's new search functionality
* Page templates can use the transparent header option

#### CHANGED

* Improved the Inventory Counter on the product form
* Added more icon options
* Included the "Divider" block into more sections
* Modified secondary button styles – Buttons will now appear side-by-side instead of below

#### FIXES AND IMPROVEMENTS

* Brought back the previous product form style as a design option
* Improved video functionality and fixed button icon shift

*Learn more about the update:*

## v3.8 - January 24, 2023

Major release 🎉

This release includes a significant update to the product form and shop the look section, improves button styles and functionality throughout the theme, and builds upon UX best practices.

#### NEW

* Product form features have been separated into blocks.
* Image with text – New secondary image style added.
* Multi-column (previous "Text columns with images" and "Text columns with icons") – Added a "Menu" option with the ability to customize block widths
* Focal points – This Shopify feature replaces our existing "position" setting.

#### CHANGED

* Product form design.
* Shop the look design and improvements to the mobile functionality of Shop the look.
* Improved button functionality theme-wide.
* Merge existing sections together for greater visibility\*
  * The Split images section and Image Banner sections have been merged together as **Image banner**
  * The Text columns with images section and Text columns with icons section have both been merged into a new section called: **Multi-column**.
  * The Collection carousel section and Featured collection sections have both been merged into a new section called: **Featured collection**

**\*Note**: You will need to reconfigure these sections when updating. Existing section settings will not migrate as they have been replaced by new sections. We recommend you manually add the new sections and configure them with the new options and controls.&#x20;

#### FIXES AND IMPROVEMENTS

* General consistency improvements for arrows, buttons, and underline styles.

## v3.7 - November 9, 2022

Major release 🎉

In this release, we've introduced a new icon set, mobile height settings for all sections, and general improvements throughout.

#### NEW

* Mobile height setting for all sections to improve the mobile experience
* New "Image with text" section
* New "Features" block on the product page
* New mobile slider style for product images on the product template
* Customize the width of each Footer block for unique layouts

#### CHANGED

* New icon set!
* Connected the "Size chart" to the "Size" variant
* Modified the "Image banner" section to utilize blocks – If you are currently using this section, you will need to rebuild it to accommodate this new functionality
* Cart drawer and upsell product popup animations have been improved
* The free shipping design has been updated and appears in empty carts to market free shipping minimums

#### FIXES AND IMPROVEMENTS

* Improved cart circle style for larger screen sizes
* Optimized forms and newsletters for Google reCAPTCHA
* Added color settings for the mega menu images to improve visibility

## v3.6 - October 19, 2022

Minor release 🎉

#### NEW

* **New** password page design
* **New** predictive search results for blog, pages, and collections heading terms

#### UPDATED

* Enhanced the responsive design for product pages
* Introduced blocks for the "Rich text" section. This will require you to reconfigure your "Rich text" sections.

#### FIXES AND IMPROVEMENTS

* Improved sibling functionality on Quick Add

## v3.5 - October 6, 2022

Major release 🎉

This release adds support for product siblings, updates the collection page filters, and improves accessibility across the theme.

#### NEW

* [**Product siblings**](/siblings/product-siblings) - Link multiple products together as swatches. [Learn more](/siblings/product-siblings)
* Collection filters - New design and usability improvements

#### UPDATED

* All new Quick Add design and functionality added with slide-out drawer
* Introduced better cart animations

#### FIXES AND IMPROVEMENTS

* Accessibility improvements
* Product search and close icon sizing

## v3.4.1 - September 15, 2022

Major release 🎉

#### NEW

* **New** section called Highlights to showcase collections and text content
* **New** metafield option to customize the text below product images on collection pages
* **New** circle option for the Cart icon
* **New** Newsletter section in the Footer which appears above the main Footer content
* **New** an option to include an arrow on buttons and text links
* **New** text alignment setting for the Tab Collections section
* Ability to increase or decrease the padding between the product images on the collection
* Ability to add a Linklist menu to an Empty cart
* Italian language translations

#### UPDATED

* The upsell design, now allows customers to choose their variants 🎉 - [Learn how](/promotions/upselling/upselling)
* An all new Testimonials section with refreshed design
* Improved linked variants for sold out products
* Added support for multi-currencies in the free shipping message

#### FIXED

* Refined collection pagination when a Featured Product block was used
* 3.4.1 Release fixes a hamburger menu issue, where the closing "X" was missing
* 3.4.1 Added tooltips to the color swatches in the Upsell feature

## v3.3.1 - June 9, 2022

Major release 🎉

#### NEW

* Added granular padding options to each section. Now you manage easily manage the padding between various sections with top and bottom padding controls.

#### UPDATED

* Improved sold-out variant styles. Swatches and variant boxes are now displayed as crossed out and drop-down variants will have sold out text next to them.&#x20;

#### FIXED

* v3.3.0 was displaying a dark background on the header image blocks. This has been removed.&#x20;

## v3.2.1 - April 21, 2022

Minor release&#x20;

#### UPDATED

* Improved the functionality of the mobile main menu animations.
* Improved the video section on mobile if the device is in low power mode.

&#x20;**FIXED**

* Empty translation string error.

## v3.2.0 - March 21, 2022

Major release 🎉

#### NEW

* Now you can include a short description on the product grid sections like collections, collection list, and featured collection.
* Add icons and text under product form on product pages
* Pulsing loading icon that will appear on the first load of your website, or all pages. Example usage: Display your brand logo on page loads.
* Inventory message. Low stock notification on the product form.
* Before and after section to showcase customer results.
* Sidebar section with sticky navigation. Recommended for FAQ and About pages.
* Product page images can now appear 2 per row with the new grid setting.
* Header design option for logo center and text left.

#### UPDATED

* Added a text option for header icon styles.&#x20;
* Ability to use metafields for pre-order and badges instead of tags. Tagging option is still available.
* Option to choose % off instead of $ off for sale items.
* Upsell will now skip a product if that product is already in your customer's cart.
* Video section now has the option for mobile-only image and height.

#### FIXED

* Gift card translation issue.
* Main Menu animation now works when using the back button.
* Footer social media icons are opening pages in a new tab.
* Footer opacity setting.
* Minor padding and margin adjustments.

## v3.1.0 - October 27, 2021

Major release 🎉

* Fixed Issue with Cart Drawer clicking "X" not removing items
* Product grid text elements like product title and price now use Body font for sizing
* Improved sold out badge text visibility on the product grid
* **New** header icon set and options
* Improved language support in Cart when items are changed
* Fixed issue with video playback on mobile when there is no sound
* Fixed issue with flashing slideshow transitions
* Improved support for iOS 15 - slideshow and size chart scrolling
* Improved support for Reviews app with Recently Viewed and Product Recommendation sections
* Improved small newsletter visibility on scroll
* **New** Added support for $0 products in Language Editor (Edit languages)
* **New** Added Liquid code block to Product form
* **New** Added show after 3 seconds option and position options to Small newsletter
* Fixed issue with transparent header upon page refresh
* **New** native video player. Deprecated Plry.&#x20;
* Improved support for no image products
* Improved a11y support for navigation dropdowns
* App block supported added to Accordion section
* Improved collection filter selection support
* **New** Added hotspot links to products in Shop the look section

## v3.0.1 - September 24, 2021

* **Fixed** Collection filter bug&#x20;

## v3.0.0 - August 11, 2021

Major release 🎉

* **New** Supports Shopify Online Store 2.0 (OS2) platform
* **New** Support for Shopify’s Collection Filtering - Add collection filters in your Navigation admin
* **New** Includes support for sections everywhere - Place sections on all page types including Products, Collections, Blogs, Pages, Cart and more
* **New** Pickup options for product template
* **New** Recently viewed section

## **v2.1.1 - July 19, 2021**

* Updates to home page collection sections to ensure consistency&#x20;
* Fixed product page over scroll
* Fixed minor cart upsell issue
* Improved FAQ template design

## **v2.1.0 - July 8, 2021**

* **New** newsletter popup with targeting functionality, including a cookie popup.
* **New** "Pair with" functionality to upsell in the cart. This automatically integrates with our product page upsell feature.
* **New** "Collection Carousel" section.
* **New** "Tab Collections" section.
* **New** size chart functionality for product pages with the ability to have custom popups per product.
* **New** "Back to top" scroll feature.
* **New** "Custom icon" setting for the "Text row with icons" section.
* **New** "FAQ" page template.
* **New** mobile image option on the "Slideshow" and "Image with text overlay" sections.
* **New** custom label functionality allows you to add any text such as "coming soon" to a product on the collection template.
* Updates to product page images, with a new size setting and a new thumbnail position. Thumbnails can now be placed on the left side of the main product image on the desktop!
* Updates to announcement bar with dynamic free shipping message.
* Improved animations and transitions.
* Improved main menu and mega menu design.

## **v2.0.3 - June 8, 2021**

* Fixed issue with line item properties.

## **v2.0.2 - May 18, 2021**

* Fixed issue with iOS scroll lock which can prevent scrolling the cart body when there are many items in the cart.

## **v2.0.1 - May 11, 2021**

* Fixed password page login error.

## **v2.0.0 - May 11, 2021**

* **New** upsell feature on the product page
* **New** quick add functionality, replaces Quickview
* **New** about page template
* **New** accordion sections to the product template&#x20;
* **New** “Featured collection” slider option&#x20;
* **New** cookie popup option
* Updates to sticky cart functionality
* Updates to color swatches on collection grid when quick add is disabled
* Updates to accessibility&#x20;
* Added Shop Pay

## **v1.8.1 - April 14, 2021**

* Fixed issue with product variant images

## **v1.8.0 - Feb 23, 2021**

* Removed jQuery dependency
* Improved speed and load times
* Added a cart drawer setting
* Updated design for mobile menu
* Added new menu design settings
* Switched to predictive search API for faster search
* Added support for subscriptions / setting plans on cart and order pages

## **v1.7.2 - October 5, 2020**

* Fix secondary currency price formatting on cart popup and recently viewed products
* Fix issue on recently viewed products where no-image product causes JS error
* Fixes issue were app injected URL params were wiped by variant state changes

## **v1.7.1 - September 16, 2020**

* Add unit\_price in cart popup
* Fix bugs introduced by architectural changes in 1.7.0:
  * Fix index-blog not showing tags
  * Fix margin-top for blank/captcha template
  * Fix issue where header height calculation was incorrect when the search is disabled
  * Fix auto height on RTE images for legacy mobile devices
  * Fix product title size for recently viewed
  * Fix forgot password page

## **v1.7.0 - September 8, 2020**

* Convert snippets to use render which improves overall performance.
* Added support for Unit pricing (currently supported for Shopify shops in Germany and France).
* Convert to social image setting in shop admin. Now uses Shopify's admin setting for the social image.
* Improved the speed with Quickview on collection pages and all product grid listings.&#x20;
* Lighthouse performance updates. Major overall theme speed performance.&#x20;
* New setting to show/hide reCAPTCHA terms
* Minor improvements to mobile display and navigation including newsletter popup and updates with cart icon.

## **v1.6.3 - June 26, 2020**

* Improved mobile layout for newsletter pop-up when using an image. Resolves blurry image issues and small input space when button text is long.&#x20;
* Corrects PayPal dynamic payment button not displaying after quantity change on the cart page.
* Fixes shipping calculator currency money format on the cart page.
* Yotpo ratings will now appear correctly on collection pages after an endless scroll load.&#x20;

## **v1.6.2 - June 4, 2020**

* URL fragments can now be used with variant history on the product page
* Better variant focus states for tab-thru&#x20;
* Fixes issue with swatches on collection page after endless scroll occurs
* Adds a simpler way to manage pre-order products
* Fixes issue where leading or trailing non-breaking space could prevent megamenu from matching a name
* Fix small screen grid for related products&#x20;

## **v1.6.0 & 1.6.1 - March 26, 2020**

* Added support for checkout in multiple currencies when using Shopify Payments
* Added currency switcher to the footer settings - [View supported apps](https://apps.shopify.com/collections/apps-for-store-languages)
* New group filtering mode added - This allows you to build custom groups to filter by. Tag your products with custom prefixes and underscore to build custom groups
* Adds Shopify Pay multi-currency select to footer
* Removes currency estimator from header
* Adds support for [Store Languages](https://apps.shopify.com/collections/apps-for-store-languages)
* Adds a tag filtering sidebar popout
* Moves tag and sort pop downs on the collection page
* Show variants as boxes added to Product Grid settings (displays variants in box format similar to swatches instead of dropdowns)&#x20;

## **v1.5.2 - March 17, 2020**

* Fixes an issue with the YouTube Background videos&#x20;

## **v1.5.1 - Feb 25, 2020**

* Adds a custom HTML section to make Instagram app integration

## **v1.5.0 - Feb 20, 2020**

* Product Media - Shopify now supports Video and 3D model files on product pages. This release supports Shopify's new product media formats. [Additional details](https://help.shopify.com/en/manual/products/product-media/product-media-types).&#x20;
* Removes Instagram section [Learn more](https://help.shopify.com/en/manual/using-themes/instagram-feed-changes)

## **v1.3.0 - Jan 10, 2020**

* Add new bold preset
* Adds a split here section

## **v1.2.3 - July 17, 2019**

* Corrects an issue with endless scroll. Most noticeable when loading the third page of products on collection pages.
* Added the ability to turn off endless scroll in Layout settings under Theme settings.

## **v1.2.0 - June 10 2019**

* Adds support for automatic discounts and buy-one-get-one discounts
* Adds support for the new product recommendations
* Adds live search (using the old API for now, we built this right before the new API came out)
* Improved add to cart popup cart notifications
* Adds an image and text column section
* Adds an icon with text section
* Adds a logos section

## **v1.1.0 - April 24 2019**

* New translations: Portuguese and Spanish
* Tweaks price and title mobile sizing
* Switch open graph tags to JSON-LD remove messy itemprop markup
* Improved screen reader performance
* Improved homepage blog layout
* Improved layout for collections list page
* Transparent header setting
* Meganav images
* Sticky header setting
* Add support for javascript currency switcher
* Featured post section for the blog
* Background video sound setting added for browsers that support audio autoplay
* Update schema with contact url
* Bug fix: Hide default variant title in cart
* Bug fix: Fix quickview showing incorrect product on homepage with multiple collections
* Bug fix: Fix footer social link colors

## **v1.0.0 - March 6 2019**

Initial release   🎉

The Broadcast release log keeps track of the date and contents of each Broadcast release.  Use this document to keep track of new versions and features. We always recommend staying up to date with the most recent version.


# About v8.1 release

Additional information on recent Broadcast updates

This update for the Broadcast Shopify theme introduces new features including a Motif preset, new dynamic and “Shop the Look” sections, and expanded block settings, along with multiple UX, performance, and structural improvements across menus, overlays, articles, and Quick View. It also resolves issues regarding accessibility, mobile behavior, and media to improve overall stability and user experience.

### New Sections

With the 8.1 release we are introducing two minimalist sections that make your store look more elegant.

#### **Shop the look: Gallery**

Our cleanest grid section that not only serves as a gallery, but also has a built in quick add function to increase your store's conversion rate.

<figure><img src="/files/5y4T2R1VPjCHdbIvT26m" alt="Shop the look gallery showcase"><figcaption></figcaption></figure>

#### Dynamic content

Grid-based layout that allows you to place floating images with precision.

<figure><img src="/files/mvZWYchgsVrFdUldNNHX" alt="Dynamic content showcase"><figcaption><p>Desktop Example</p></figcaption></figure>

<figure><img src="/files/wQI1y01VtVvDX3pZob1w" alt="Dynamic content showcase 2"><figcaption><p>Mobile Example</p></figcaption></figure>

#### Motif Preset

Our newest Broadcast demo blends modern fashion storytelling, designed to showcase the new designs our theme has to offer. Designed to highlight products through simplicity and balance, the demo showcases new sections like the Shop the Look Gallery.

<figure><img src="/files/5UX41vzCUpaE6nEUeEx5" alt="Broadcast new motif preset"><figcaption></figcaption></figure>

{% hint style="info" %}
[Broadcast - New Motif Demo Store](https://broadcast-motif.myshopify.com/)
{% endhint %}

***

### Added

**New features, sections, presets, or capabilities added**

* New Motif Preset
* New section: Shop the look: Gallery
* New section: Dynamic content
* Highlights section - new block settings

***

### Changed

**Enhancements, updates, optimizations, UX improvements, or structural refinements**

* Mobile menu - Remove “pin to bottom” functionality from most blocks
* Overlay in color schemes
* Update demos
* Update theme listing folder
* Updates (general maintenance updates)
* Performance updates&#x20;
* Finish CSS structure and improvements for Quick view modal
* Article title - heading improvements

***

### Fixes and other improvements

**Bug fixes, regressions, display issues, accessibility fixes, and broken functionality**

#### Product / Variant / Pricing

* Buy It Now adds incorrect variant
* Sibling swatches not rendered correctly on product grid
* Sale price showing twice for variants with discount
* Sale Badge “money” showing wrong value
* Variant ID missing via search
* Product grid content flickering when hovering swatches
* Products with image bug (full width padded)
* Cart bar feature - Add to cart button not working

#### Sections & Blocks

* Featured Image - Overlay type option doesn’t work
* Advanced text block issue in Scrolling text section
* Scrolling text section overlap issue
* Product section - Buy Buttons display issue
* Custom content - Video block overflow
* Rich text with columns section limited to one button block
* Reverse block placement not working in Product/Custom sections
* Multi-column extra spacing under images

#### Cart / Cart Drawer

* Cart drawer display issues (Safari + Chrome height shift)
* Quantity dropdown issue on Cart page (desktop)
* Dynamic Checkout Button not appearing on fresh version

#### Menu / Header / Layout

* Mobile menu height static across dropdown layers
* Header CTA button overflow
* Visual problems when moving sections

#### Forms / Customer / Orders

* Notify Me When Out of Stock form issue
* Incorrect order details
* Incorrect order information (“Sale type: Pre-order”)
* Missing text/button on customer reset password page
* Product form shipping policy appearing automatically

#### Accessibility & UX

* Accessibility issue - drawer menu
* Voiceover issues (A11y)
* Newsletter popup unresponsive on iOS

#### Media / Quick View / Display

* Quick view image container broken
* Recently Viewed additional images option not working properly

***

## Try Broadcast 8.1

For additional examples and to try Broadcast for free, visit our demo stores and download the latest version of Broadcast:

[Shopify Theme Store - Broadcast](https://themes.shopify.com/themes/broadcast/presets/broadcast)

Existing customers can update for free. To preserve your live published theme, use the Shopify Update tool. The update tool will download an additional theme to your theme library and only copy the settings from your live theme. This is the safest and easiest method of updating your theme.&#x20;

{% content-ref url="/pages/0qElhOashZYoHtI5gvSr" %}
[How to update Broadcast](/faq/frequently-asked-questions/how-to-update-broadcast)
{% endcontent-ref %}


# About v8.0 release

Additional information on recent Broadcast updates

The new Broadcast 8.0 release introduces several new features to improve your merchandising and store settings. Here are some of the updates and changes you'll see in Broadcast by category.&#x20;

## Sections

We are excited to announce the addition of **three new sections** to our theme, designed to enhance your experience and provide more options to merchandise your store:

### Collection links: Spotlight

A dynamic new section designed to visually engage your shoppers and seamlessly guide them to your top product collections.

<figure><img src="/files/vtFIXTuVRyrjJ02bbBWL" alt=""><figcaption></figcaption></figure>

The collection image changes when you hover over the collection links with an animated transition. For desktop shoppers, clicking on the link will direct them to the collection page.&#x20;

On mobile, tapping on the collection name changes the image. A call-to-action button is placed over the image:

<figure><img src="/files/fakvRKxoZnzxL2JuBtTt" alt=""><figcaption></figcaption></figure>

This new section is all about creating a smoother, more visual path to purchase:

* Elevated Browsing: The instant image change provides a richer, more interactive browsing experience that has been proven to capture attention more effectively than static links alone.
* Clearer Path to Purchase: By visually connecting your collections to their best imagery, you make it immediately clear what a shopper will find when they click, reducing friction and encouraging exploration.
* Feature Your Best: Use the prominent image placement to highlight your must-have products, best sellers, or seasonal collections.

### Social video

We've introduced the Social video section—a powerful, dedicated space for you to showcase engaging, real-life product videos. Hover over the video to instantly play the video. The badge button lets you control the playback and display a social profile address:

<figure><img src="/files/ZhxR1NcNbVLwJ8qm9VTe" alt=""><figcaption></figcaption></figure>

This section is designed to integrate the powerful social proof of video directly into your shop, helping customers feel more confident in their purchase decisions:

* Boost Shopper Confidence: By featuring authentic videos. Demonstrate to potential buyers how your products look and perform in real-life settings. This transparency helps build user confidence and trust in your brand, often leading to better conversion rates.
* Broadcast uses Shopify-supported .MOV and .MP4 formats directly to this section. *Note: Videos are uploaded to your Shopify store and are not streamed from external social platforms.*

> This section offers the best of both worlds. Upload high-quality, branded videos that are specifically designed to look and feel like popular social reels. By pairing your own professional content with the familiar video format and an optional social handle in the Badge text, you effectively leverage social trends while maintaining full control over your brand messaging.

**Section settings**

Customize the overall presentation using Broadcast's many section options, including:

* Text size and alignment for any introductory text.
* Layout settings, including full-width padding.
* Video aspect ratio to match your video content style, suitable for both wide and tall videos.&#x20;
* Display style on desktop and mobile, letting you choose between a classic Grid or a swipeable Slider.
* SEO heading tag setting for the optional section heading.&#x20;

### Banner with video (overlay)

A visual way to show off the brand's personality. This new banner section lets you place a video over top of your main banner to add some animation without occupying the entire banner space:

<figure><img src="/files/9NqyBScPSebkZMqe4hl7" alt=""><figcaption></figcaption></figure>

A modern design element to showcase your brand. Use the **section settings** to completely customize the section layout and elements.&#x20;

<figure><img src="/files/yRq3N9GRcLdWB7unMwuq" alt=""><figcaption></figcaption></figure>

Add common **blocks** to include optional messaging or call-to-action buttons:

<figure><img src="/files/TKwkrXywezh4VEV4gcjl" alt=""><figcaption></figcaption></figure>

***

## Product pages

In this release (Version 8.0), Broadcast now fully supports Shopify's new API changes for handling products with a high number of variants (e.g., more than 250 variants or combined listings).

### High variants

Historically, themes would attempt to load *all* product variants at once, which caused significant slowdowns, especially on product pages for merchants with a large inventory of options.

Broadcast 8.0 directly addresses those performance issues:

* Faster Product Pages: By adopting Shopify’s new, optimized variant APIs, Broadcast no longer requires loading every single variant at once. This results in significantly faster load times for product pages that have many color, size, or material combinations.
* This enhancement ensures that your store is prepared for Shopify’s increased variant limits, allowing you to confidently scale your inventory and product complexity without sacrificing site speed or the shopper experience.
* Seamless Shopping: Your customers will enjoy a smoother browsing experience, especially with complex products, resulting in reduced customer frustration and higher conversion rates.

For Developers & Agencies: We have audited and updated all theme code that previously relied on loading a complete list of variants via the legacy `product.variants` Liquid object, ensuring full compatibility with the new, performant API structure.

***

## Quick Add

We've added the Mini-button back as an option for mobile devices in Broadcast 8.0. Now, you can choose between a mini-button and a regular, full-sized button.&#x20;

* The "Mini-button" displays a smaller, shopping bag icon:

<figure><img src="/files/sM3UlZqnTnWZrvwhOyYu" alt=""><figcaption><p>Mini button</p></figcaption></figure>

* The "Button" option will display a full-sized button in the product card:

<figure><img src="/files/4Uu37hwkgSt5hb4Ky3s5" alt=""><figcaption><p>Button</p></figcaption></figure>

In the Broadcast 8.0 Theme Settings, you can toggle between the two choices under "Mobile style".

**Theme settings** → **Product grid** → **Quick add**

***

## Try Broadcast 8.0

For additional examples and to try Broadcast for free, visit our demo stores and download the latest version of Broadcast:

[Shopify Theme Store - Broadcast](https://themes.shopify.com/themes/broadcast/presets/broadcast)

Existing customers can update for free. To preserve your live published theme, use the Shopify Update tool. The update tool will download an additional theme to your theme library and only copy the settings from your live theme. This is the safest and easiest method of updating your theme.&#x20;

{% content-ref url="/pages/0qElhOashZYoHtI5gvSr" %}
[How to update Broadcast](/faq/frequently-asked-questions/how-to-update-broadcast)
{% endcontent-ref %}


# About v7.1 release

Additional information on recent Broadcast updates

The new Broadcast 7.1 release introduces several new features to improve your merchandising and store settings. Here are some of the updates and changes you'll see in Broadcast by category.&#x20;

## Product pages

New updates to the product default page (PDP). Here's what's new with product pages in Broadcast:

### Pre-orders at the Variant level

Now with Broadcast, you can set pre-orders at the variant level. Previously, we supported product metafields that assigned a pre-order button to the entire product. You can now create a variant metafield and assign a pre-order button to any variant in your product catalog. Both options, the product as a whole and the new variant-level pre-orders, are available for you to choose from and customize pre-order products.

<figure><img src="/files/VTsuNnj1ctj1xd31TNvw" alt=""><figcaption><p><strong>Size 6 is configured as a pre-order option to the customer</strong></p></figcaption></figure>

#### Full details

Learn all about pre-order variants in Broadcast and how to set up the variant metafield here:

{% content-ref url="/pages/6Jp1FcK7yJJ0orEyvbPb" %}
[Pre-order variants with metafields](/products/product-pages/pre-order-variants-with-metafields)
{% endcontent-ref %}

### Bundle and Save

Promote product bundles on product pages and the cart drawer with automatic discounts and precise product matching with metafields. Broadcast will display bundle promotions alongside the upsell block, giving you two promotional options.

<figure><img src="/files/oc8j7ZutoFQ1ItmItrVk" alt=""><figcaption></figcaption></figure>

#### Cart drawer promotions

Customers can add a bundled item right from the Cart drawer. A new block called 'Bundle products' has been added to the **Overlay** > **Cart drawer** to display bundle promotions.&#x20;

<figure><img src="/files/oGvOOXxnhS6RQeWfBtEk" alt=""><figcaption></figcaption></figure>

* When using a list of products in the cart drawer, the promotions will be displayed in a slider carousel.&#x20;

#### Full details

Learn all about the 'Bundle and save' feature in Broadcast:

{% content-ref url="/pages/iNgepHYS8QAU60SiHlN5" %}
[Bundle and Save](/promotions/bundle-and-save)
{% endcontent-ref %}

### Accordion drawer

A new option has been added to the Accordion block in the product form. You can now choose to display the accordion details in a drawer:

<figure><img src="/files/pQBWxxgjFpuxOJ1hyVJS" alt=""><figcaption></figcaption></figure>

Use the block settings to toggle between Colapsible and Drawer:

<figure><img src="/files/xb1sQ7O4fyUje1rnI9jw" alt=""><figcaption></figcaption></figure>

### Popup block now uses a drawer

The Popup block in the product form will now display the content in a slide-out drawer, similar to the drawer option for the accordion block:

<figure><img src="/files/kpOs7MgfPByNv8M7LTKi" alt=""><figcaption></figcaption></figure>

Previously, the Popup block was displayed as a modal. The new design helps improve the user experience.&#x20;

### Estimate delivery block

A new block you can use to display the estimated delivery or shipping date to help customers know how quickly products are sent out or expected for delivery:

<figure><img src="/files/pVmaVoW6odOjX255RbW4" alt=""><figcaption></figcaption></figure>

* Use the Label and Slider to specify your shipping or expected delivery date. Broadcast will convert the days into a date value.&#x20;
* Use a metafield to customize each product.&#x20;

***

## Settings

Here's what's new with the Theme settings in Broadcast:

### Badges

You'll now find all the badge settings in a new category in the **Theme settings** under **Badges**:

<figure><img src="/files/7FAG0ghLZR4GcbKFIfAa" alt=""><figcaption></figcaption></figure>

You can customize and configure all the badges included in Broadcast here, including badges for the PDP and Product Card.&#x20;

### Color opacity

Shopify has introduced a new opacity slider in the color picker. Broadcast now uses this slider to adjust transparency, including overlays:

<figure><img src="/files/zWe69wSzA7o4Z5MI94hr" alt=""><figcaption></figcaption></figure>

### Pagination

An infinite scroll option has been added to Pagination in the Theme settings. Now, you can enable continuous scrolling or toggle it off for regular page-style pagination.&#x20;

<figure><img src="/files/dtx9oLPdCBF4ZTJYla1X" alt=""><figcaption></figcaption></figure>

***

## Shopping Cart

Here's what's new with the Cart and Cart drawer in Broadcast:

### Discount code

Shoppers can now add a discount code directly in the **Cart** before proceeding to checkout, greatly enhancing the user experience for adding more items and encouraging impulse purchases.

<figure><img src="/files/ctZAHZRFLpcWHNT3Kjrl" alt=""><figcaption></figcaption></figure>

The discount amount is shown, and the subtotal is updated right in the cart. Add the new '**Discount code**' block in the Overlay section under the Cart drawer:

<figure><img src="/files/HuXtUgKg0q0bBQWZEWrD" alt=""><figcaption></figcaption></figure>

### Bundle and save promotions

Use the new '**Bundle products**' block in the Overlay section under Cart drawer to display bundle promotions right in the cart. View additional information here:

{% content-ref url="/pages/p5r55FZQI7z0zagQTpr8" %}
[Bundle products - Cart drawer](/overlay/cart-drawer/bundle-products-cart-drawer)
{% endcontent-ref %}

### Payment icons

We've added a grayscale option to the payment icons block in Broadcast. The payment icons block is found in the cart, cart drawer, and footer.&#x20;

***

## Sections

Here's what's new with theme sections and section blocks in Broadcast v7.1:

### Product section

We've brought back the original clean Product section in Broadcast, now called '**Product**'.&#x20;

In addition to the 'Featured product', which has a modern design, the new classic 'Product' section can be used to build product promotions throughout your shop quickly:

<figure><img src="/files/JZQ34rix6W6yFqd8YK8g" alt=""><figcaption><p><strong>New classic section called 'Product"</strong></p></figcaption></figure>

To add the '**Product**' section, choose it from the Products group:

<figure><img src="/files/uD4A25ynzREaIubH43aV" alt=""><figcaption></figcaption></figure>

You can now choose from two different section styles:

1. **Featured product** - Modern design section.
2. **Product** - The original simple section, ideal for quick promotions.&#x20;

### Image with text overlay

A new **block** type has been added to the **Multicolumn** and **Collection list** sections called '**Image with text overlay**'.&#x20;

Now you can overlay text and call-to-action buttons over an image in various positions:

<figure><img src="/files/uzm46lpCtzLRI8jPPL57" alt=""><figcaption><p><strong>Buttons and text can be positioned in different positions over an image</strong></p></figcaption></figure>

Use the new 'Image with text overlay' block when you want to position content over your images, or use the 'Image' block to place text outside of the image.&#x20;

### Press logos - Mobile

The press logo slides will now auto-rotate for mobile devices:

<figure><img src="/files/co3Xu77QTOes94DHgUoA" alt=""><figcaption></figcaption></figure>

### Section categories

Shopify now groups sections in the Theme Customizer. When you add a new section, you'll find the sections in Broadcast grouped in these new categories. Here's a breakdown on where to find our sections:

| Advanced       |              |
| -------------- | ------------ |
| Custom section | Multi column |

| Banners            |                           |
| ------------------ | ------------------------- |
| Image banner       | Image with scrolling text |
| Slideshow (Legacy) | Slideshow (Nested)        |
| Video              |                           |

| Collections         |                       |
| ------------------- | --------------------- |
| Collection list     | Collection list hover |
| Featured collection | Tab collections       |

| Forms        |            |
| ------------ | ---------- |
| Contact form | Newsletter |

| Layout      |         |
| ----------- | ------- |
| Custom code | Divider |

| Products                 |                     |
| ------------------------ | ------------------- |
| Featured product         | Image with product  |
| Product                  | Products with image |
| Recently viewed products | Shop the look       |
| Text with products       |                     |

| Storytelling            |                          |
| ----------------------- | ------------------------ |
| Accordion               | Accordion group          |
| Before and after        | Blog posts               |
| Featured blog posts     | Image with text          |
| Image with text slider  | Map                      |
| Press logos             | Testimonials             |
| Text columns with icons | Text columns with images |
| Timeline                |                          |

| Text            |                   |
| --------------- | ----------------- |
| Countdown timer | Highlights        |
| Rich text       | Rich text columns |
| Scrolling text  | Sidebar           |
| Text promo      |                   |

***

## Try Broadcast 7.1

For additional examples and to try Broadcast for free, visit our demo stores and download the latest version of Broadcast:

[Shopify Theme Store - Broadcast](https://themes.shopify.com/themes/broadcast/presets/broadcast)

Existing customers can update for free. To preserve your live published theme, use the Shopify Update tool. The update tool will download an additional theme to your theme library and only copy the settings from your live theme. This is the safest and easiest method of updating your theme.&#x20;

{% content-ref url="/pages/0qElhOashZYoHtI5gvSr" %}
[How to update Broadcast](/faq/frequently-asked-questions/how-to-update-broadcast)
{% endcontent-ref %}


# About v6.2 release

Additional information on recent Broadcast updates

### Quick Add button refinements

We've made several thoughtful adjustments to the Quick Add button's functionality in version 6.2, focusing on visibility, customization, and control over the mobile experience.

* **Improved mobile visibility:** To ensure your product images always take center stage, the Quick Add button on mobile devices will now consistently appear *below* the main product content on the Product Detail Page. This prevents the button from overlapping your visuals, leading to a cleaner presentation and easier interaction for your customers on smaller screens.
* **Enhanced color customization:** You now have distinct color options for the Quick Add button on desktop. For mobile views, the button will automatically adopt a clear outline style, utilizing the **Text** color selected within your theme's color settings. This approach provides customization flexibility for desktop while maintaining a consistent and optimized look on mobile.
* **Mobile display control:** Recognizing that every store has unique needs, we've introduced the ability to disable the Quick Add button specifically for mobile devices. Suppose you prefer a more streamlined product page experience for your mobile visitors. In that case, you can now easily hide the button on mobile viewports while keeping it active for desktop users via the theme settings.

**How to configure:**

Theme settings > Product grid, the Quick add section contains the settings:

<figure><img src="/files/6aUA97ceDownMIs7JLMq" alt=""><figcaption><p><strong>Quick add settings are under Product Grid in the Theme Settings</strong></p></figcaption></figure>

***

### Cart and Cart drawer enhancements

Version 6.2 enhances the Cart Drawer with flexibility and refinement, focusing on providing you with greater control over typography and visual presentation.

**Expanded typography controls:** A key update is the addition of **Text size** settings across multiple elements within the Cart Drawer. You can now fine-tune the text size for:

* Products block (item details)
* Title
* Cart message
* Free shipping bar&#x20;

Each of these settings pulls from your theme's established Body text size options, making it easier to maintain visual consistency throughout your store.

<figure><img src="/files/uo10F2dzEn8lLYgpAoD7" alt=""><figcaption><p><strong>Adjust the text sizes for Cart Drawer various cart drawer blocks</strong></p></figcaption></figure>

* **Cart Message Alignment:** Alongside the new text size option, the **Cart message** now also includes **Text alignment** settings. You can choose between left and center alignment to best match your design preferences.
* **Simplified Free Shipping Bar Styling:** We've streamlined the styling options for the Free Shipping Bar. The previous gradient background option has been replaced with a straightforward solid **Color** setting for easier customization. The **Text size** control mentioned above has also been added here.

***

### Button block updates: Side-by-Side layout & full-width option

We've introduced more intuitive and flexible ways to add and manage button layouts within the **Image banner** and **Slideshow** sections, moving away from workarounds and towards dedicated controls.

**New: 'Side-by-Side Buttons' Block** - We've added a new block specifically for creating horizontal double-button layouts. Previously, achieving this look required adding and configuring two separate 'Button' blocks. This dedicated block simplifies the setup and provides a single place to manage two buttons displayed side by side.

<figure><img src="/files/JXbbcyLOW6wX6mGBD6Hw" alt=""><figcaption><p><strong>Side by side buttons</strong></p></figcaption></figure>

**'Single button' Block -** Now has a full-width option. With the introduction of the 'Side by Side buttons' block, we have enhanced the standard button block. The original Button block is now named **Single Button** and features a Full-width setting, making it easy to have a single button span the entire available width of its container:

<figure><img src="/files/FbmaDw7xaKAutrQBe1rS" alt=""><figcaption><p><strong>Full width option for Single button</strong></p></figcaption></figure>

**Image banner & Slideshow:** The new "Side by side buttons" block and changes to the "Single button" block are available in the "Image banner" and the two "Slideshow" sections.&#x20;

***

### New video block for Slideshow (Nested)

You can now add MP4/MOV videos directly to your Slideshow section in Broadcast 6.2. We've added a video block to display looping videos from your Shopify content storage. This update brings more dynamic content capabilities to your storefront, offering a powerful new way to engage visitors right from the homepage.

Add a "Video" slide to your slideshow alongside "Image" slides. The Video slide has customization options to help the text and call-to-action buttons stand out.&#x20;

<figure><img src="/files/OeuMiWSXweuSs9u2jAl1" alt=""><figcaption><p><strong>Video slide in Slideshow (Nested) section</strong></p></figcaption></figure>

The new video slide is available in the 'Slideshow (Nested)' section and not in the legacy version.&#x20;

***

### Button size settings

We've added global button size settings to the Theme settings in Broadcast 6.2:

<figure><img src="/files/PR6V6oyY20axs2kyMary" alt=""><figcaption><p><strong>Theme settings > Buttons</strong></p></figcaption></figure>

You can now set the size for all Small, Medium, and Large buttons throughout your store with these global settings.&#x20;

***

### Add to cart button - Show price in button

The Add to cart button on the Product detail page can now show the price inside the button:

<figure><img src="/files/8g9zGHSBXBmfVZOoHMDK" alt=""><figcaption><p><strong>Theme settings > Product form</strong></p></figcaption></figure>

This is a global setting that applies to all products.&#x20;

**How to configure:**

Theme settings > **Product form.** The Add to cart toggle can be found there.&#x20;

***

### Rich text columns section - New divider option

To enhance the visual organization and readability of multi-column text layouts, version 6.2 introduces a simple yet effective display option for handling rich text columns in sections.&#x20;

<figure><img src="/files/n4SbKCGTkdbWbpwhyHup" alt=""><figcaption><p><strong>Divider settings</strong></p></figcaption></figure>

**Improved Separation:** We noticed that, depending on screen size and content length, text in adjacent columns can sometimes appear too close together, which affects readability. To address this, we have included a vertical divider with width and line settings.&#x20;

This option adds an optional, subtle vertical line between the columns, providing clear visual separation. This ensures your columns remain distinct and your content is neatly organized and easy to read.

***

### Product form: Display variant color descriptions

Add more context and detail to your color options directly on the product page! Broadcast 6.2 introduces the ability to display unique text descriptions associated with specific product color variants using Shopify's metafield system. This helps customers understand the nuances, materials, or special features associated with each color choice.

#### **How It Works:**

This feature utilizes a standard Shopify variant metafield. When a customer selects a product variant on the storefront, the theme automatically checks if that specific variant has a text metafield defined with the exact namespace and key: **`theme.color_description`**. If this metafield exists and contains text, its content will be displayed dynamically on the product form, typically near the variant selectors, providing context for the chosen color.&#x20;

<figure><img src="/files/gpD1aRLx80IZ21mlZZNT" alt=""><figcaption><p><strong>Custom description for this variant combination only</strong></p></figcaption></figure>

### Video walk-through

&#x20;Watch this video walk-through on how to create the required custom variant metafield:

{% embed url="<https://www.loom.com/share/7c8c53db9dd345c6bd0afb5791c6c7e5?sid=884a8ef7-09a3-4836-9e5d-4574a2697372>" %}
**Video step-by-step instructions**
{% endembed %}

{% hint style="info" %}
**Note**: Variant metafields are different from regular Product metafields.&#x20;
{% endhint %}

#### **Setup steps:**

1. **Define the Metafield:** In your Shopify Admin, go to Settings > Custom data > Variants. Add a new definition.
2. Set the **Namespace** to `theme`.
3. Set the **Key** to `color_description`.
4. Choose a **Content type** of `Single-line text` . Give it a clear name, such as "Color Description," and a description for your reference. Save the definition.
5. **Add Content to Variants:** Go to the specific products in your Shopify Admin. Edit the variants and locate the "Metafields" section at the bottom. Add your desired descriptive text into the "Theme Color Description" metafield for each relevant variant. Save the product.

#### Additional information:

This metafield is checked on a *per-variant* basis. If your product has multiple options (e.g., Color and Size), you **must** add the appropriate color description text to **every combination** that should display it. For example, if you have 'Red' in 'Small', 'Medium', and 'Large', you need to add the Red description text to the `theme.color_description` metafield for the Red-Small variant, the Red-Medium variant, AND the Red-Large variant.

**Siblings:** This color description feature integrates seamlessly and works correctly with the theme's Siblings display logic for variants.

**Example Use Cases:** You can use this field to specify things like "Vibrant, non-toxic dye," "Limited edition Spring color," "slightly metallic finish," or "Matches our Cerulean Blue bag collection."

This feature offers a great way to provide valuable, targeted information about color options right where customers are making their decisions.

***

### Variant selection: Enhanced visual clarity

We've refined the visual styling for variant selectors in Broadcast 6.2 to provide a more prominent hover state over variants to help make the selection process more intuitive for your customers:

<figure><img src="/files/2nMTGx1uuyq9WvNhcwVD" alt=""><figcaption><p><strong>New hover style for variants</strong></p></figcaption></figure>

#### **Text color setting**

This refreshed design dynamically uses your theme's existing **Text** color setting (configured under Theme Settings > Colors, Color scheme) to style the key indicators for these selected and hovered states. This helps maintain visual consistency with your overall brand typography settings.

<figure><img src="/files/VpuuwE8mjw2NiYtNmtFj" alt=""><figcaption><p><strong>Theme settings > Colors > Color scheme</strong></p></figcaption></figure>

***

### Try Broadcast 6.2

For additional examples and to try Broadcast for free, visit our demo stores and download the latest version of Broadcast:

{% embed url="<https://themes.shopify.com/themes/broadcast>" %}

Existing customers can update for free. To preserve your live published theme, use the Shopify Update tool. The update tool will download an additional theme to your theme library and only copy the settings from your live theme. This is the safest and easiest method of updating your theme.&#x20;

{% content-ref url="/pages/0qElhOashZYoHtI5gvSr" %}
[How to update Broadcast](/faq/frequently-asked-questions/how-to-update-broadcast)
{% endcontent-ref %}


# About v6.1 release

Additional information on recent Broadcast updates

### Nested blocks

With Broadcast 6.1 we are making use of nested blocks on select sections. Nested blocks are a new feature in Shopify themes that allows us to break the blocks of any section into even more blocks. This will allow you to more easily re-order the contents of any section that uses nested blocks and create a unique layout.

<figure><img src="/files/iVX3Xr93fa7VW0g3hc7m" alt=""><figcaption></figcaption></figure>

Changing the order of the blocks is as simple as dragging and dropping them.

<figure><img src="/files/RXxhss66AuqeK1eHRvH6" alt=""><figcaption></figcaption></figure>

Also new with the slideshow section is the ability to change the width of your content box.

***

### Quantity selector

In our newer versions, we introduced a more modern quantity selector which uses a drop-down. After the phenomenal feedback from our merchants, we have now added an option to toggle between a more basic quantity picker and our theme's more modern look.

<figure><img src="/files/Ajh8cYt0FwYP24mMuJbg" alt=""><figcaption></figcaption></figure>

***

### Product badge

With this update, you can now change the position of the badges on your collection pages.

<figure><img src="/files/WJ0TATDCC8p1ElVqUnlw" alt=""><figcaption></figcaption></figure>

***

### New icon - "Check"

A small touch added to the icon drop-down selectors in our theme. The new "Check" icon.

<figure><img src="/files/WN6JKVBGIpF3nzye2nEQ" alt=""><figcaption></figcaption></figure>


# About v6.0 release

Additional information on recent Broadcast updates

### Custom mobile menu

Now, with Broadcast 6, you can build a custom mobile navigation directly from the Theme Customizer. The mobile menu uses blocks to manage content easily for mobile designs:

<figure><img src="/files/ZyTSLMwWmIpsqBP0Fc5h" alt=""><figcaption><p><strong>New Mobile Menu added to the Header Group</strong></p></figcaption></figure>

#### Features include:

* You can add products, collections, images, icons, text, dividers, buttons, reviews, and a search bar.
* Social media links, currency, and language choosers are also included.&#x20;
* Compress your menu using Menu Columns, or combine it with the regular list format.

{% hint style="success" %}
With a wide choice of mobile menu blocks, you can build the perfect mobile menu to help navigate and promote your products and services to mobile users.&#x20;
{% endhint %}

#### Tips on getting started:

1. Add the new "Mobile menu" from the Header group. Use the "Add section".

<figure><img src="/files/hwFDe2ifbOEqvxb2n702" alt=""><figcaption></figcaption></figure>

2. Choose a Shopify navigation menu as the main menu. This can be the same as your desktop menu or an entirely different version for mobile.&#x20;

<figure><img src="/files/bBR1DZn0SezpewIxP293" alt=""><figcaption></figcaption></figure>

3. Add menu blocks. Choose from an extensive list of options to customize your mobile menu completely. Rotate different promotions within the menu to improve the customer experience.&#x20;

***

### Color schemes

Broadcast 6 now includes Shopify's Color Schemes for managing colors throughout your theme:

<figure><img src="/files/jS415HRtANDTVBqCXlpO" alt=""><figcaption><p>Theme Settings -> Colors</p></figcaption></figure>

Color schemes help ensure the consistency of your brand colors across all sections and allow for easy changes. Customize the palettes in the Theme Settings under Colors, then apply a palette or scheme to existing sections.&#x20;

Experiment with gradients and other colors to create visually interesting backgrounds and elements that will enhance your store's aesthetic appeal.

{% hint style="info" %}
If you're updating from an earlier version of Broadcast, you can view your site's color choices from the live theme. This will be helpful when you're building the newer version from the drafts folder. The Shopify update tool cannot copy your original color choices. However, you can view them from the live theme and create new color schemes with the latest version.&#x20;
{% endhint %}

***

### Typography styles

Broadcast now includes new typography styles and color schemes to help manage fonts, font properties, and font sizes throughout the theme.&#x20;

* Predefine your Headings font options for desktop and mobile with granular controls in the Theme Settings:

<figure><img src="/files/nJ0AZz66N8b1bUoT76Jy" alt=""><figcaption><p>Customize the front, properties and sizes in the Theme Settings</p></figcaption></figure>

* Then, choose the size style in your sections:

<figure><img src="/files/9AU9XKxhY88Dwe34Viyb" alt=""><figcaption><p>Section settings will allow you to choose the size from your predefined global setting</p></figcaption></figure>

You can also configure fonts, font properties, and font sizes for:

* Header navigation
* Body text
* Subheadings

<figure><img src="/files/pYFN2wNPPMM65pgdOAot" alt=""><figcaption></figcaption></figure>

If you're updating from a previous version of Broadcast, similar to colors, you can use your live theme as a reference when setting up your new draft theme typography.&#x20;

***

### Collection block for Scrolling text

We've added a Collection block to the Scrolling text section. Adding this block will display the name of a collection and the number of items in the collection when using the subscript setting in Broadcast:

<figure><img src="/files/s32S3zoodxqmIvttJHj3" alt=""><figcaption><p>New collection block</p></figcaption></figure>

* For subscript, activate in the Theme Settings, under Layout:

<figure><img src="/files/iewiLBIxmHhHPEf8eM3j" alt=""><figcaption><p>Subscript settings under Layout</p></figcaption></figure>

***

### SEO setting added to headings

We've included an SEO heading setting many sections and heading blocks. This Advanced option allows you to set the SEO tag value of a heading without affecting the style of the heading:

<figure><img src="/files/xeJf3wp0q04iwVsFF8Ta" alt=""><figcaption><p>Example from Shop the Look - Section settings</p></figcaption></figure>

* You can now choose the heading value for SEO without changing the design of the heading.&#x20;


# About v5.8 release

Additional information on recent Broadcast updates

### Image with scrolling text section

We've added a new section to expand the scrolling text feature by integrating a modern scrolling text element within an image banner-style section:

<figure><img src="/files/fpuNR5XbgEVI9s15usCJ" alt=""><figcaption></figcaption></figure>

#### Flexible

The section includes settings for desktop and mobile images and heights. Choose from scrolling text, text, or button blocks to build the content. Buttons will be placed inline horizontally.&#x20;

<figure><img src="/files/d6wNm1KuxPOsPjBgAVVc" alt=""><figcaption><p>Images are selected in the section settings, content is added using the rich blocks</p></figcaption></figure>

### Image with product section

With Broadcast, you can now embed a product card right into an image banner-styled section:

<figure><img src="/files/grq2zsa7hu72yzVbfNSD" alt=""><figcaption></figcaption></figure>

Designed to be quick and easy to set up, this new section has incorporated the image and product settings into the section settings. Content blocks, including heading, text, button, and custom code, can be added to build the overlaying information on the left while the product card is shown on the right:

<figure><img src="/files/Ba7WmaL6IArcfe7Qx6mS" alt=""><figcaption></figcaption></figure>

On mobile, the product card is placed below the image. The content can be positioned on top, in the middle, or at the bottom for the stacked view:

<figure><img src="/files/lhVbg7Eb4dmtDMyD4hUI" alt=""><figcaption></figcaption></figure>

### Superscript indicators

Broadcast can display the number of products that are in collections. The feature shows a numerical value next to the collection name in the dropdown navigation:

<figure><img src="/files/J7Lm1qo5f8m9NzGFaQda" alt=""><figcaption></figcaption></figure>

A theme-wide optional "Superscript" design option has been added, showing the number of products in a collection for multiple sections.

#### Learn more:

{% content-ref url="/pages/pdUJcmFMEZcifLuK3Go6" %}
[Quantity indicators](/header/header/section-settings/quantity-indicators)
{% endcontent-ref %}

### Blog posts with product cards

Broadcast makes adding product cards to your blog posts even more effortless. Choose products from a list and add them to the sidebar:

<figure><img src="/files/r9Pin8BLZwcovqITG7vR" alt=""><figcaption></figcaption></figure>

Customize the heading and select products from the product list:

<figure><img src="/files/4FibPFALQpxMhTSm6s2I" alt=""><figcaption></figcaption></figure>

* Note: Since Shopify's templating system will reuse these choices on other articles, you can create a new blog post template and then assign that to different posts.&#x20;
* Another option for a unique selection of products is to use metafields for the product list:

<figure><img src="/files/xTtzC5a0ZMmrsi9xoWHY" alt=""><figcaption><p><strong>Use the dynamic source option for unique products on each blog post</strong></p></figcaption></figure>

### Second image on hover and Quick Add improvements

* Broadcast has a new interface to support touchscreen laptops and devices. When a touch screen is detected, the "**second image on hover**" feature becomes a slideshow in the product grid. Now, the customer can see additional product images without requiring a hover action. This works for mobile devices and larger touchscreens.&#x20;

To adjust how many images appear in the slideshow, use the new setting in the Theme settings -> Product grid:

<figure><img src="/files/0jNglxF9Mv724kVezgXd" alt=""><figcaption></figcaption></figure>

#### Quick Add

* For larger touchscreen devices, the full "**Quick Add**" button is displayed below the product image. Mobile devices will use the icon-style button.&#x20;

### Release Notes

View the release notes for a complete listing of changes:

{% content-ref url="/pages/-MciaahXBy1At2WseKmd" %}
[Release Notes](/updates/whats-new-in-broadcast/release-notes)
{% endcontent-ref %}


# About v5.7 release

Additional information on recent Broadcast updates

### Rich text columns section

We've added a new section to quickly build text-based content and organize the elements into left and right columns.

<figure><img src="/files/p2w2uqJmTXpwaUPrkvxs" alt=""><figcaption><p><strong>Two-column rich text section with different column widths</strong></p></figcaption></figure>

* Each block has a position option for column placement:

<figure><img src="/files/sPNxqgsnG307bhcPDy7u" alt=""><figcaption></figcaption></figure>

* Column sizes and text alignment can be adjusted in the section settings:

<figure><img src="/files/JBfTGVqnK3USrf5N1YSa" alt=""><figcaption></figcaption></figure>

* Mobile settings allow the stacked content to be left-aligned or centred.&#x20;

### Mobile footer accordion options

Display blocks inside an accordion for the mobile footer:

<figure><img src="/files/ZsUxLqmueDdQIdEDJ4zJ" alt=""><figcaption></figcaption></figure>

In the footer blocks, you can use the new checkbox to enable the accordion feature for mobile devices:

<figure><img src="/files/reql0QjbxaiY6acHcOrs" alt=""><figcaption></figcaption></figure>

The accordion option is available on the following footer block types:

* Link list
* Text
* Page
* Social

The newsletter and divider blocks do not contain the option.&#x20;

### Hide tag for products

We've added the ability to hide products from searches and collections. Simply add the **`hide`** tag to your product:

<figure><img src="/files/V0gWwdSqIt2V3WKRwNER" alt=""><figcaption></figcaption></figure>

After adding the **`hide`** tag, the product won't appear on collections and search results:

<figure><img src="/files/TP1epdtLbjgNALjMXlwK" alt=""><figcaption><p>Not shown in search result</p></figcaption></figure>

You can still view the product page by using the product URL:

<figure><img src="/files/Fp5DN5RjCGDX2XUyBR2F" alt=""><figcaption><p><strong>URL is found at the bottom of the product setup under the SEO listing</strong></p></figcaption></figure>

### Sold out badge

Items that are sold out can now display a badge on the product grid or collection listings. The price is now also shown with the product information:

<figure><img src="/files/eLrJo0KbeM4Q6Xp7oec1" alt=""><figcaption><p><strong>The price replaces the original sold out text at the bottom, when badge is used</strong></p></figcaption></figure>

In the **Theme settings -> Product grid**, you can toggle the badge option:

<figure><img src="/files/8Tv6ekCeN9ZDZg4jyGsS" alt=""><figcaption><p><strong>Theme Settings</strong></p></figcaption></figure>

### Before and after block updates

We've added additional size and spacing options to the blocks in the "Before and After" section:

<figure><img src="/files/uD96rcnPHdcHFPN1zMOX" alt=""><figcaption><p><strong>Heading block - Size and Block spacing options</strong></p></figcaption></figure>

<figure><img src="/files/WmzBZHP6LVl6ey4Rv0qv" alt=""><figcaption><p><strong>Text block - Size, style and spacing options</strong></p></figcaption></figure>

### Remove link repositioned in the cart

We've improved the placement of the "Remove" items from the cart. The link is now below the quantity selector and left-aligned to match the other elements:

<figure><img src="/files/DdCBacAiWTQKIOCeF1UA" alt=""><figcaption><p><strong>Remove link is now left-aligned with the rest of the cart elements</strong></p></figcaption></figure>

### Release notes

View the release notes for a complete listing of changes:

{% content-ref url="/pages/-MciaahXBy1At2WseKmd" %}
[Release Notes](/updates/whats-new-in-broadcast/release-notes)
{% endcontent-ref %}


# About v5.6 release

Additional information on recent Broadcast updates

### Cart drawer blocks

Broadcast 5.6 introduces Cart drawer blocks. Customize the cart drawer with a series of blocks to supercharge the cart experience :&#x20;

<figure><img src="/files/kC90dk6kP7NB6RLfQDMk" alt=""><figcaption><p>Customize the entire cart experience with Broadcast 5.6</p></figcaption></figure>

#### Cart blocks in Broadcast

Add, arrange, and configure any of these cart blocks for a fully customized cart experience:

| Title                      | Cart message               | Free shipping message |
| -------------------------- | -------------------------- | --------------------- |
| Products                   | Upsell products            | Order note            |
| Gift note                  | Shipping estimate          | Icon                  |
| Product list (easy upsell) | Custom code (use for apps) | Payment icons         |
| Checkout buttons           |                            |                       |

#### Individual settings

Each block has a set of customizable options. Example of Icon block used to display shipping message:

<figure><img src="/files/ACxicEHKuIYDTMFvFKAU" alt=""><figcaption></figcaption></figure>

#### Pin to bottom

Pin blocks to the bottom like the Payment icons:

<figure><img src="/files/xAAiJc1pQYEAaYe7R5jl" alt=""><figcaption></figcaption></figure>

### Fit Guide for products

Broadcast includes an easy-to-use fit guide block for Product pages. Help customers visually see how items fit. Each product can have a custom value for the line chart:

<figure><img src="/files/tEyEZ2m5Bv9QgrRkphy2" alt=""><figcaption><p><strong>Customize the headings and values in the block settings</strong></p></figcaption></figure>

1. Video overview on how to use and set up the Fit guide block:

{% embed url="<https://www.loom.com/share/29a7f4df848f49dd9708d499849aaf6b?sid=c99764ad-6163-464f-b27e-3268684a5de5>" %}

2. Video on how to customize the Fit Guide using custom values with metafields:

{% embed url="<https://www.loom.com/share/6531e98ecc6c44138cc9feb3e800dd81?sid=4a94d61c-f775-4a7b-9ac4-95f89219c812>" %}

### Variant images

Display images for any variant type on your product form. Help your customers visually see what a variant looks like. In addition to swatches, Broadcast can display an image for each Size variant or any other type you choose.

Two styles are available in Broadcast 5.6, in-line and stacked:

#### In-line style

<figure><img src="/files/6H7PhJaPFryhhSG1cDIC" alt=""><figcaption></figcaption></figure>

#### Stacked style

<figure><img src="/files/cSHIqDQWiytOnYHTwI8B" alt=""><figcaption></figcaption></figure>

Images are used from your Product setup:

<figure><img src="/files/MKct53Rziqal6aDsM1C5" alt=""><figcaption></figcaption></figure>

The 'Size' variant is used by default. You can configure any variant to display images. The above example shows 'Type' to visually show the product style.&#x20;

#### Learn more:

{% content-ref url="/pages/9qO1P5Zo3RlyxJvWX4R8" %}
[Broken mention](broken://pages/9qO1P5Zo3RlyxJvWX4R8)
{% endcontent-ref %}

### Header call-to-action button

Now in Broadcast, you can add a call-to-action button right into the Header area:

<figure><img src="/files/YzyKCPCmp7Vk01yimKCe" alt=""><figcaption></figcaption></figure>

Use the Header section settings to customize the button color, text and link:

<figure><img src="/files/Ca7QHpPUvx9MuvqQEq1I" alt=""><figcaption><p>Button color options</p></figcaption></figure>

Experiment with different Header styles, the call-to-action button positions differently based on the style of header and navigation you use:&#x20;

<figure><img src="/files/ArgBFDsxr3R0F5l2aepv" alt=""><figcaption><p>Logo center menu left style</p></figcaption></figure>

### Swatch collection styles

Customize the swatch and siblings display style on the Product Grid. Now in Broadcast, you can choose from different swatch display styles. Examples include:

#### Slider on hover

Clean text is displayed on the Product grid. Upon hover, the text is replaced with swatches or siblings. The slider feature keeps all swatch options aligned horizontally on a single line:

<figure><img src="/files/fpAqleqj8Ah9RBPrSetr" alt=""><figcaption></figcaption></figure>

#### Text only

A clean text version that displays the number of swatches or siblings which are available:

<figure><img src="/files/IHiT5CX4YCnqmv8ke2iA" alt=""><figcaption></figcaption></figure>

#### Swatches with text

Displays a sample of swatches or siblings on a single line and indicates how many additional options are available with text:

<figure><img src="/files/ywSFSHK77BNf9YoQrlZ3" alt=""><figcaption></figcaption></figure>

#### Slider

Displays the swatch or siblings slider on one line at all times:

<figure><img src="/files/2EPLHgoRHIDZ6gorqZZD" alt=""><figcaption></figcaption></figure>

#### Grid

Displays all possible swatches or sibling options that are available to choose from:

<figure><img src="/files/M9eqGG9jIuQnW9IXry2i" alt=""><figcaption></figcaption></figure>

#### How to configure

Use the global **Theme Settings** -> **Swatches** -> **Collection style**

Choose your collection style in the drop-down:

<figure><img src="/files/64BF2891AAHXJrWotqP5" alt=""><figcaption></figcaption></figure>

### Final sale message

Display a 'Final sale' message with details of sale on sale items:

<figure><img src="/files/NfMljdPMKCfgY4D1eYir" alt=""><figcaption></figcaption></figure>

Configure the global settings under **Theme settings** -> **Product form** -> **Final sale**

<figure><img src="/files/lFmOURnsSIY3GUQBtkMJ" alt=""><figcaption></figcaption></figure>

#### Learn more:

{% content-ref url="/pages/AA3hXxTEqTjoSPM7qYkX" %}
[Final Sale](/products/product-pages/final-sale)
{% endcontent-ref %}

### Countdown timer block

We've added a countdown timer block to the Product form. You can now quickly add a countdown promotion right into the Product form:

<figure><img src="/files/SwnOxbMrz6mVHSReOQwB" alt=""><figcaption></figcaption></figure>

Add the countdown timer block and customize it with a wide-range of options. Use dynamic data sources to apply individual settings for any product:

<div data-full-width="true"><figure><img src="/files/w7WrGHKj3sJh9ME7Rtod" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
The same information will appear on all your product pages when adding blocks to the Default product template.&#x20;

To display custom information for individual products, Shopify provides two methods to customize your content:

* Create multiple product templates and assign only certain products to different templates
* Use dynamic data sources with product metafields to customize for individual products.&#x20;
  {% endhint %}

### Accordions, Tabs and Description blocks for Product pages

We've separated out the accordion, tabs and description into individual blocks. Now with greater customization and flexibility.&#x20;

<figure><img src="/files/7BUfzcNtgEvN9nXR0AA9" alt=""><figcaption><p>Accordion and Tab blocks and include or exclude the product description information</p></figcaption></figure>

Example of Tabs block with options to show the description and read more button:

<figure><img src="/files/9INkOjvht9V0j5FP88HN" alt=""><figcaption></figcaption></figure>

The Description block can be used to pull out the product description from an accordion or tab, and shown independently:

<figure><img src="/files/ErtdObHHmKXL959Nwddd" alt=""><figcaption><p>Description block example with closed accordion below</p></figcaption></figure>

### Out-of-stock notification

Let your customers know when a product or variant is back in stock. This new feature in Broadcast allows your customers to submit an email request with product and variant details for an item that is currently sold out:

<figure><img src="/files/kG9DADP2zGJG7juJoPtC" alt=""><figcaption><p>Find out which products customers are looking for when items are sold out</p></figcaption></figure>

#### Learn more:

{% content-ref url="/pages/iAbDLiAXJxNCeZ2KIIeI" %}
[Out-of-stock notification](/products/product-pages/out-of-stock-notification)
{% endcontent-ref %}

### SKU block for product pages

Add and position the SKU block to display the value on your product pages. Adjust the padding with the block settings:

<figure><img src="/files/LzUSOhEmOwDVM4Qio8CF" alt=""><figcaption></figcaption></figure>

SKU values are taken from the product setup under variants:

<figure><img src="/files/fsIdM7n0tw38iC8UIBCQ" alt=""><figcaption></figcaption></figure>

### Image banner placeholder on Product pages

Broadcast now includes a feature to hide the 'Image banner' placeholder image when using metafields. A new checkbox has been added to hide the placeholder for products that don't have a chosen metafield image.&#x20;

Watch the video walkthrough on how this feature works:

{% embed url="<https://www.loom.com/share/0679fc3f06bd43409c46810ea9d2f130?sid=fa4606c2-b2c8-4c06-806f-d90dbe907dbf>" %}
Video walkthrough
{% endembed %}

{% hint style="success" %}
This solves the problem of displaying an image banner section for specific products and excluding the banner from others with only one template.&#x20;
{% endhint %}

### Show only upsell items that are available in stock

An option has been added only to show in-stock items for upsell promotions on Product pages.&#x20;

<figure><img src="/files/eEAu0fv3QHm5xlURdE4A" alt=""><figcaption></figcaption></figure>

In the example below, the ***Waffle Legging*** is an upsell product. However, currently has no inventory:

<figure><img src="/files/IoVp5TmRzwLcGHmjPlDN" alt=""><figcaption></figcaption></figure>

By turning on the feature, that out-of-stock item will not be displayed as an upsell option:

<figure><img src="/files/PvsNo4RJhsCjSOfMZtBE" alt=""><figcaption></figcaption></figure>

### Setting for New badge

We've added an easy-to-use setting in the **Theme Settings -> Product Grid** to add and customize when the 'New' badge appears on collection pages and the product grid:

<figure><img src="/files/5WfP0PZso21gTtqwX8lq" alt=""><figcaption></figcaption></figure>

### Recently viewed items in empty cart

You can now display recently viewed items in an empty cart. Broadcast includes a global theme setting under **Theme settings -> Cart** to toggle this feature:

<figure><img src="/files/JhuPIp3f6dRQy4UkC5I4" alt=""><figcaption></figcaption></figure>

### Background image for the Rich text section

Dress up the 'Rich text' section with an option to display a background image with overlay options to help display the text over the image:

<figure><img src="/files/M0wehXxTz0w5lXLgy4f7" alt=""><figcaption></figcaption></figure>

Customize with a different image for mobile devices. If no mobile image is selected, the desktop image is used.&#x20;


# About v5.5 release

Additional information on recent Broadcast updates

### Badges block for Product pages

Badges can now be displayed on Broadcast Product pages. Broadcast can automatically display Sale badges or Custom badges that you create for individual products:

<figure><img src="/files/dJtcUZXws2PPW24iUUrq" alt=""><figcaption></figcaption></figure>

#### Learn more video:

{% embed url="<https://www.loom.com/share/3746ef6079cd441db8ba04af2d61c840?sid=037d174e-f3c7-461d-9e0a-f9401103e557>" %}

#### Settings

Custom and Sale badges can be styled in the 'Theme Settings' tab under 'Product grid'. These settings are applied to badges placed on both the Product card (also known as Collections or Product Card) and now the Product form when using the Badges block:

<figure><img src="/files/97AQi9HJ0w7TcmocJ2k2" alt=""><figcaption></figcaption></figure>

### Cart blocks

The Broadcast Cart now has blocks to customize the cart experience for your customers. Sort and arrange cart blocks, plus pin certain blocks to the bottom near the checkout button.

#### Cart drawer blocks video:

{% embed url="<https://www.loom.com/share/d8672a1c62d744c8958c121d4186bcda?sid=fc234189-af58-4cd1-a101-95f0287f68dd>" %}

If you are updating from a previous version of Broadcast, please revisit the Theme Settings -> Cart to reconfigure your cart settings.&#x20;

The new cart blocks are available under the Overlay section in the Theme Customizer.&#x20;

#### Number of items in the cart

The number of items in the cart is shown in the main Cart heading:

<figure><img src="/files/1IMVtDmBdWezPXipk9dA" alt=""><figcaption></figcaption></figure>

### Image with text section - Product and Collection blocks

Easily display and link to products or collections with new blocks added to the Image with text section. These two new blocks can help you quickly build promotions on any page:

<figure><img src="/files/HFP5Jhyg4GsQiOfjfSrQ" alt=""><figcaption><p><strong>Product block in Image with text section</strong></p></figcaption></figure>

The collection block has options to choose a custom image and button text for the call to action:

<figure><img src="/files/zVNKO3Ma9zsoykZohxpC" alt=""><figcaption></figcaption></figure>

### Countdown timer for the Announcement bar

Add a sense of urgency right into the main announcement bar with the new countdown timer block:&#x20;

<figure><img src="/files/9seHRrq6m8Qj1kAnuNx9" alt=""><figcaption></figcaption></figure>

Add the block from the Header -> Announcement bar:

<figure><img src="/files/VyqhUkEXhIQtdBNcizis" alt=""><figcaption></figcaption></figure>

### Collection promotions - Multiple featured image blocks

Now, you can add multiple promotions to your collection pages. Additional Featured image blocks can be added to collections:

<figure><img src="/files/JAMZdJXK5ylXYjTe7La9" alt=""><figcaption><p><strong>Add upto three promotions on Collection pages</strong></p></figcaption></figure>

#### How to position

Position each Featured image block by using the **Image position** slider or enter the value manually:

<figure><img src="/files/67fZiuSvZYHDNZt7JXMt" alt=""><figcaption></figcaption></figure>

### Mobile timeline design

We've redesigned the mobile timeline section to include a horizontal scroller and cleaner visual presentation:

<figure><img src="/files/ZAZpriQzgGVhwPpnHXfT" alt=""><figcaption></figcaption></figure>

#### Settings

For square, rounded, or pill-styled period moments, use the options under Theme Settings -> Buttons:

<figure><img src="/files/CSwTGrOERETzjdU4oQiL" alt=""><figcaption><p><strong>Design is configured from Buttons Style</strong></p></figcaption></figure>

### Accordion and Accordion groups

An open-by-default option has been added to keep certain accordion blocks open when the page is loaded:

<figure><img src="/files/2MhZgGdCw5vPxPvykhDz" alt=""><figcaption></figcaption></figure>

### Rich text section and Image with text section

A bottom padding slider has been added to the Rich text and Image with text sections to help you manage spacing between sections:

<figure><img src="/files/bYvJn4sIs00sIfgsLPyD" alt=""><figcaption></figcaption></figure>

The Rich text section includes an image block option for adding a visual to the main text content:

<figure><img src="/files/Jgz5qIzfMRq0ftghTs9G" alt=""><figcaption></figcaption></figure>

### Featured product section - Background mobile image

We've added a background image option for mobile devices to enhance the display and scrolling effect:

<figure><img src="/files/GofCclCFSn0oPsT1ga3A" alt=""><figcaption></figcaption></figure>

The background image remains sticky as the Featured Product elements are scrolled through:

<figure><img src="/files/SLb1NOPr01lUjzGVnibS" alt=""><figcaption></figcaption></figure>

### Product form - Inline option for the text block

You can now have the text block styled to match the variant options when using the modern Product form layout. This places the heading to the left and the text in the next column that matches the style of the variants:

<figure><img src="/files/N02TxfqaGA6lCrZ10exc" alt=""><figcaption></figcaption></figure>

The Left option will show the heading and text in one column and two rows:

<figure><img src="/files/YGIAIIjBMRa7vi4oDozY" alt=""><figcaption></figcaption></figure>

#### Settings

To enable this option, ensure the Modern form style is chosen under the Theme Settings -> Product form:

<figure><img src="/files/U2yHjEPZpNCQX8NFBc1x" alt=""><figcaption></figcaption></figure>


# About v5.4 release

Additional information on recent Broadcast updates

### Products with image - New section

Display a branded image with a selection of products with this new two-column style section:

<figure><img src="/files/KS6s6aiJzd1yzF3ekimh" alt=""><figcaption></figcaption></figure>

The mobile version displays the image first, followed by the products:

<figure><img src="/files/gOIipDp49znB3OhQQFxl" alt=""><figcaption></figcaption></figure>

### Image with text section now supports media in the text block

Add an image or video block into the text area of the Image with text section:

<figure><img src="/files/cqacuueoTLSR2kACcKxU" alt=""><figcaption></figcaption></figure>

Insert an image or video into the text column:

<figure><img src="/files/YFQ4JjOwtm54YbNG6LdW" alt=""><figcaption></figcaption></figure>

The main image is configured in the section settings. The image block will add an image to the text area. Drag the image or video block to sort placement position in the text area.

### Transparent header support for product pages

Create modern designs for product pages, now with transparent header support:

<figure><img src="/files/jItlNSHeoKIQeXnYLQsD" alt=""><figcaption></figcaption></figure>

Find the settings in the Header section:

<figure><img src="/files/fdUF7cmgmYHmQg5wM5Wh" alt=""><figcaption></figcaption></figure>

For best results, use the Stretched option for the Product page layout:

### Subheading settings - New options

Now you can configure both the Body and Heading styles for Subheadings:

<figure><img src="/files/YufTGPczqANvRcNYdj7K" alt=""><figcaption></figcaption></figure>

Adjust the font sizing, and letter spacing, plus an option to make subheadings in all uppercase.


# About v5.3 release

Additional information on recent Broadcast updates

### Countdown timer - New section&#x20;

Add promotion-style countdown timers to your shop:

<figure><img src="/files/aIbEXURx76GPGq770SK8" alt=""><figcaption></figcaption></figure>

Design unique styles with backgrounds for desktop and mobile devices:

<figure><img src="/files/ov7tDou3rIofaq70rkF0" alt=""><figcaption></figcaption></figure>

Customize with various section settings. Add blocks for text content:

<figure><img src="/files/NNWmAyuawOE7qqhDUeum" alt=""><figcaption></figcaption></figure>

### Timeline - New section

New to Broadcast is a unique Interactive section with beautiful animation to engage your customers:

<figure><img src="/files/jPQXKlHkIU8nUB0QUt9w" alt=""><figcaption></figcaption></figure>

Animated lines connect to timeline points as the customer scrolls down the page. Easy to build, add a timeline block for each entry. Use the section settings to customize the design:

<figure><img src="/files/nZw3U588JB9AGCLqEa8f" alt=""><figcaption></figcaption></figure>

### Improved mobile layout for header

We've improved the header elements in the mobile navigation:

<figure><img src="/files/ugLNAYdf7NfIJIyCz9fl" alt=""><figcaption></figcaption></figure>

Content from the header is now placed in the lower section of mobile navigation.

<figure><img src="/files/ZY0SQWnNN52d3igKisey" alt=""><figcaption></figcaption></figure>


# About v5.2 release

Additional information on recent Broadcast updates

### Header section: Toolbar block

Our latest header block allows you to add more menu items, more icons, and more functionality to your main navigation.

<figure><img src="/files/g0BeLM8BMo0t6u003e8p" alt=""><figcaption></figcaption></figure>

This new option has dedicated controls to show a menu, country and region selectors, a currency picker, social media icons as well as dedicated color settings (for the background and text).

{% hint style="success" %}
Note: When the hamburger menu is enabled, links from the navigation menu will be added to the side drawer.
{% endhint %}

### Image with text: Accordion block

Accordions are making their way to more sections. Add expandable blocks to your Image with text section.

<figure><img src="/files/5g8eAGaQVNctszo4mQj7" alt=""><figcaption></figcaption></figure>

### Accordion group: new option

Show two columns of tabs with the new option in the accordion group section:

<figure><img src="/files/TAR2cBYzMmyK67TMYBMf" alt=""><figcaption></figcaption></figure>

### Multicolumn: new option

There are three new ways to display your image blocks in the multicolumn section. First, be sure to add an image block:

<figure><img src="/files/XIs8qbx9QSEeUcRierag" alt=""><figcaption></figcaption></figure>

Select an image shape from the individual block settings. Try out the new blob and its hover animation!

### Footer group: new block & section:

The divider section has made its way to the footer group. Use it to add a horizontal ruler and separate the content above the header.

<figure><img src="/files/UCOuBSk2DT1VpPBtL5pG" alt=""><figcaption></figcaption></figure>

There is also a divider block inside the footer section itself. Use the individual block settings to adjust the width and space everything perfectly around it:

<figure><img src="/files/qU9BkRYZf7PPdY0fgRJl" alt=""><figcaption></figcaption></figure>


# About v5.1 release

Additional information on recent Broadcast updates

### Featured product section

Fresh new design for the featured product section with new image scrolling options and additional section settings:

<figure><img src="/files/9nx2sxy5FvxyOqLD0ki7" alt=""><figcaption></figcaption></figure>

Discover the new vertical and horizontal image scrolling options with this quick video:

{% embed url="<https://www.loom.com/share/8c25f99ca8aa4e8ca8a68a1da86c39d1?sid=7df05564-e690-4007-8aa4-9a4193cf95ab>" %}

You have the option to add a background image to enhance the appearance of the section:

<figure><img src="/files/m1jQMNJQNo0j41ZMnuXy" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Note: When a background image is used, the full-width horizontal scrolling effect is disabled. Vertical scrolling and regular horizontal scrolling are not affected.&#x20;
{% endhint %}

### Image with text slider section

A new section added to Broadcast is a two-column image and text section with multiple text blocks. You can now add multiple text blocks that customers can slide through for additional information.&#x20;

Watch this short video walk-through on the section and block settings:

{% embed url="<https://www.loom.com/share/9059979b14e04b548c6a821551e4fa92?sid=b0505747-1f68-4e42-9e9b-11ce6e2c23d1>" %}

On mobile devices, the images will rotate automatically and customers can swipe through the text blocks:

{% embed url="<https://www.loom.com/share/37a1f7cd9b38439a92020afb2a9ce31b?sid=3fc77af2-3b06-4113-8fd6-0c5086faf2b5>" %}

The slider navigation style can be adjusted under the Theme settings:

<figure><img src="/files/79BCgTrYwTqqRYTak69l" alt=""><figcaption></figcaption></figure>

### Color swatches

Swatches are now easier to manage and control. All the settings for color swatches around are found under Theme Settings -> Swatches

<details>

<summary>Key changes</summary>

* Color codes are now managed under the Theme settings.
* Swatch Images are now used from the Shopify files.
* Siblings can now use a color swatch instead of a product image.

</details>

Video walk-through on all the changes:

{% embed url="<https://www.loom.com/share/b075d5b28c104fe9be81bcd85f4be6c8?sid=6a3fb626-cea1-470d-a47c-8f460b6aebac>" %}

### Tab collection section

A new grid layout option for the desktop has been added for displaying the products within a tabbed collection. You can easily choose between the slider style or the new grid option:

{% embed url="<https://www.loom.com/share/cb9820dd23854bffa0d77ede4a134a55?sid=c7729410-b21a-4c8e-a93b-80d88626c70b>" %}

In addition to the product layout, you can position the tabs with different layout options:

<div><figure><img src="/files/7qd7PYledYmoGboqKSMT" alt="" width="375"><figcaption><p><strong>In-line</strong></p></figcaption></figure> <figure><img src="/files/4gva8Z6LAIcyDd7LdMmO" alt="" width="375"><figcaption><p><strong>Left aligned</strong></p></figcaption></figure> <figure><img src="/files/sPhbGuiXXZ0ir6mx66Cq" alt="" width="375"><figcaption><p><strong>Center aligned</strong></p></figcaption></figure></div>

### Scrolling text section

You can now add a background image to the scrolling text section and also image blocks in-line:

<figure><img src="/files/R0gXegZkeX5I0E5agXii" alt=""><figcaption></figcaption></figure>

Video overview - Scrolling text updates:

{% embed url="<https://www.loom.com/share/bc14c5ede7214c8f944e4e5c252419dc?sid=758fe5b5-b4aa-4506-99a4-247ec8c4993d>" %}

### Header line

An option has been added to help build a separation between the header and content:

<figure><img src="/files/tf2LpCHFfS7OrNy2hDTE" alt=""><figcaption><p><strong>Use the separator opacity slider to adjust the transparency of the line.</strong> </p></figcaption></figure>

### Header sizing

You can now adjust the padding in the header area to make larger or tighter headers:

{% embed url="<https://www.loom.com/share/30027f8764294b209b344f1ace194976?sid=1d8a8769-4218-4102-ba4b-684ab93d5a65>" %}

### Cart

A terms and conditions checkbox option has been added:

<figure><img src="/files/OJKF2BtGVM4JAcha6jQk" alt=""><figcaption></figcaption></figure>

Use the Theme settings -> Cart to toggle. When enabled, the customer must check the box in order to proceed with checkout.&#x20;


# About v5.0 release

Additional information on recent Broadcast updates

### Gift card - Send directly to the recipient with a message

Customers can now send a gift card directly to the recipient's email and include a personal message.

<figure><img src="/files/61mn1jObJAMn9Wy0n71W" alt=""><figcaption></figcaption></figure>

In the Theme Editor, use the checkbox option on the Buy buttons block to enable.&#x20;

The customer will then have the option to send it as a gift:

<figure><img src="/files/UISqSD9iRvCcCsyziEtp" alt=""><figcaption></figcaption></figure>

### Multicolumn - New mobile aspect ratio setting

An image aspect ratio for mobile has been added in Broadcast 5.0. This will help provide more flexibility when designing complex layouts. In the example below, two Multicolumn sections are used to build a mosaic. The second has wider images. With the new settings, the mobile aspect ratio can be adjusted to make the images consistent with the section above:

<figure><img src="/files/fdQqJpJFT2zSsfGRGog2" alt=""><figcaption></figcaption></figure>

Example of wider desktop images showing with 1:2:1 aspect ratio for mobile which matches the section image sizes of the previous section:

<figure><img src="/files/SeAOykIegwKabHEVYBid" alt=""><figcaption></figcaption></figure>

## Shop the look - Option for 2 per row

We've added the ability to show 2 product grid items per row. Ideal for showing more on desktop screens:

<figure><img src="/files/mBzrm5DL1qBJbAuoZu6O" alt=""><figcaption></figcaption></figure>

## Collection list - New mobile layout styles

Broadcast now includes mobile layout styles for the Collection list section. You can choose to display 1 or 2 collections per row or the mobile slider:

<figure><img src="/files/0F62dL0gU9hyl30kmik4" alt=""><figcaption></figcaption></figure>

Layout examples for mobile:

<div><figure><img src="/files/TGy1TMW6dukhIDsPqTiR" alt=""><figcaption><p>1 collection per row</p></figcaption></figure> <figure><img src="/files/R6nO4O7hfAZhnMEGfaqQ" alt=""><figcaption><p>2 collections per row</p></figcaption></figure> <figure><img src="/files/zt4V8pCBJOgcBMDPE8hy" alt=""><figcaption><p>Slider</p></figcaption></figure></div>

### Upsell functionality updated to work with one product and metafields

Now you can easily add one product right from the Theme Editor as your Upsell item which will instantly appear for all products using the same Product template.&#x20;

<figure><img src="/files/XsfoeB4UxaJJUgMvfmLh" alt=""><figcaption></figcaption></figure>

This method is a simple way to use the upsell feature without the complexity of using metafields. It will add the chosen product to all products using the same template. If you use multiple product templates, you can customize which product is selected for each template.

{% hint style="info" %}
If you use the Select product option, that upsell product will appear for all products instantly. Think of this as a global upsell product. \
\
If you combine it with a metafield, the metafield will override the selected global option. Therefore, the fallback is the global choice and the override is the metafield.&#x20;
{% endhint %}


# About v4.0 release

Additional information on recent Broadcast updates

### Text with products

We've introduced a new section in Broadcast to display inline images within a rich text block. You can add Products, Collections, or custom images inline to capture your audience's attention:

<figure><img src="/files/aZ9Qb0zOCowCTNSv150U" alt=""><figcaption><p><strong>Text with products section</strong></p></figcaption></figure>

Images have a lively animation when the customer reaches the section. Learn more:

{% content-ref url="/pages/k0OYRyhvkhMxvt5M4RO2" %}
[Broken mention](broken://pages/k0OYRyhvkhMxvt5M4RO2)
{% endcontent-ref %}

### Announcement bar slider arrows

We've added arrows on hover to the announcement bar. When the layout setting is **Slider**, you now have the ability to show sliders in the same color as the message text:

<figure><img src="/files/EO26mmxGCmgdIbVxMYMG" alt=""><figcaption></figcaption></figure>

### Collection list hover

A new section added to Broadcast with an engaging presentation of images presented in a dynamic format, featuring full-sized graphics and prominent text to promote collections within your store:

<figure><img src="/files/IAn9ErzGdjcTN773wMfn" alt=""><figcaption></figcaption></figure>

Learn more about the new section:

{% content-ref url="/pages/Y5fMA8nmETSOL4jFZcgW" %}
[Broken mention](broken://pages/Y5fMA8nmETSOL4jFZcgW)
{% endcontent-ref %}

### Cart drawer - Gradient settings for free shipping bar

Enhance your customers' shopping experience by customizing the free shipping progress bar in the cart. Choose a creative gradient color scheme that will draw their attention and make their shopping journey even more enjoyable:

<figure><img src="/files/Z8hCFI0xM3cn5GoWxSJz" alt=""><figcaption></figcaption></figure>

* Find the setting under Theme settings -> Cart

### Inventory countdown - Improved customization and options

We're excited to announce that we've expanded the range of options available for customizing the inventory countdown feature in Broadcast. With these new options, you have greater control over how the inventory countdown is displayed.

You can choose to always display the inventory, show it only when the inventory is low, or even hide the value altogether if desired. Our aim is to give you the flexibility to tailor the feature to your specific needs and preferences:

<figure><img src="/files/2Ye3d9VJereu0nlD9kPY" alt=""><figcaption></figcaption></figure>

Learn more about the inventory countdown settings:

{% content-ref url="/pages/Z4kIjkYvEqTW1mpISOlM" %}
[Broken mention](broken://pages/Z4kIjkYvEqTW1mpISOlM)
{% endcontent-ref %}

### Additional icon options

We've added even more professionally designed commerce icons to multiple sections:

<figure><img src="/files/yZcec0PtxS0Qfx5sKV0a" alt=""><figcaption></figcaption></figure>

Find the new icon options within sections that support the icon block:

<figure><img src="/files/of2oRGSEzCNvRmnMtOTb" alt=""><figcaption></figcaption></figure>

### Transparent Header on pages now available

We've added support for the transparent header option to Shopify Pages:

<figure><img src="/files/YOTy4HUgpLkmfiIOojeA" alt=""><figcaption></figcaption></figure>

Ideal for page templates that use the banner or slideshow section at the top.

### Text columns with icons section returns

Quickly create an icon-based section using Text columns with icons:

{% embed url="<https://www.loom.com/share/5748b06cfc9b45a5b84677d986ade973>" %}

For more advanced options including adding custom images, the Multicolumn section is available alongside Text columns with images.&#x20;

<figure><img src="/files/yZcec0PtxS0Qfx5sKV0a" alt=""><figcaption><p><strong>Example of Text column with images sections</strong></p></figcaption></figure>

### Easily add videos with new the new video picker

Now you can quickly choose an MP4 video from your files library or upload directly with the newly improved Shopify interface:

<figure><img src="/files/tRvsFBnQw8hwXgqG0MDW" alt=""><figcaption></figcaption></figure>

### Divider block added to text sections

A divider block has been added to the Rich Text section and Image with text:

<figure><img src="/files/TmqEAlvWdkmnFLgjb8Sw" alt=""><figcaption></figcaption></figure>

The divider block can be used to build separation with or without a line:

<figure><img src="/files/GYcCvt4493OsCpwhCTtG" alt=""><figcaption><p><strong>Show line checked</strong></p></figcaption></figure>

{% hint style="success" %}
There is also a section called Divider which can be used between sections. The block version adds similar functionality inside sections.
{% endhint %}

### The Announcement bar section is now the Scrolling text section

The new Scrolling text section replaces the Announcement bar section in Broadcast 4.0.&#x20;

* You'll still find an Announcement bar section in the Header group.&#x20;
* Scrolling text can be added to the main Sections group.
* A new text size option has been added to the Scrolling text section:

<figure><img src="/files/DD3dCd2AuqTdKnH3T8Yx" alt=""><figcaption></figcaption></figure>

### Smart second button alignment

When the second button option is used, both buttons will align side-by-side on desktop and stacked on mobile.&#x20;

Use the feature on full-width sections like:

* Slideshow (slide block)
* Banner (button block)
* Rich text (button block)

<figure><img src="/files/26fDV4dDXqfYg2YoR0zZ" alt=""><figcaption></figcaption></figure>

### Tab collections section now includes a left alignment option

The tab collections section is one of Broadcast's most popular sections to feature multiple collections. Left alignment has been added in this release:

<figure><img src="/files/8O2bSgYjEnqUufMW4Keq" alt=""><figcaption></figcaption></figure>

Using the Layout drop-down, you can now align the tabs and text content with the following options:

* Left&#x20;
* Center
* Inline

### Product form style setting

We've introduced an option to switch between the newer Modern design Product Form and the original Classic design.&#x20;

In the Theme Settings under Product Form, you can choose between the two styles.

#### **Modern:**

The variant labels and selections are displayed in line with the variant options:

<figure><img src="/files/ALKqxUAY08XWSyR8yHdX" alt=""><figcaption></figcaption></figure>

#### Classic:

The variant labels and selections are displayed above the variant options:

<figure><img src="/files/IWDEFXqz34fmPpg4khRZ" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
The Classic design is suitable for customers with a large number of variants. Since the labels are displayed above, there is more room below for the variant options.&#x20;
{% endhint %}

Examples with Varients as boxes:

<div><figure><img src="/files/0LswYtf41LTgoTz62Gkc" alt=""><figcaption><p><strong>Modern</strong></p></figcaption></figure> <figure><img src="/files/dRagVTb5Nyp8bHfTTDeT" alt=""><figcaption><p><strong>Classic</strong></p></figcaption></figure></div>

### Quantity selector next to Add to Cart button

Both the Modern and Classic styles support the Quantity button next to the Add to Cart button. Use the Buy Button block settings to activate it:

<figure><img src="/files/zzBay6iTJanVFmXhs4Xa" alt=""><figcaption><p><strong>Classic style with Quantity and Add to Cart button</strong></p></figcaption></figure>

<figure><img src="/files/Hbb9WPIzSyG8NdNgMK15" alt=""><figcaption><p><strong>Modern style with Quantity and Add to Cart button</strong></p></figcaption></figure>

### Collection list section&#x20;

When using the grid layout in the Collection list section, you can now choose how many collections per row to display:

<figure><img src="/files/2pVBBwBtXk6cf4yZWK2F" alt=""><figcaption></figcaption></figure>

### Upsell promotions

The upsell block now includes a background color picker to help match your brand style:

<figure><img src="/files/WlULHKlfj75CDIxkRyBq" alt=""><figcaption></figcaption></figure>

### Pre-footer&#x20;

The new pre-footer group provides your users with additional resources or options that can help them further engage with the website or accomplish their goals. Examples of content that may appear in a pre-footer include links to social media profiles, brand logos, and newsletter sign-ups.

We've included sections to help you add custom app code or some of our flexible sections for a quick pre-footer setup:

<figure><img src="/files/UCZBojSARiYYYhzdkfia" alt=""><figcaption></figcaption></figure>

### Show arrow has been added to individual sections

Each button will now have an option to 'Show arrow'. This option was previously in the global settings. Now you'll have the flexibility to show arrows on some buttons and hide for others:

<figure><img src="/files/2C46VD0uUli2rfAF2ftp" alt=""><figcaption><p><strong>Customize each button</strong></p></figcaption></figure>

### Search improvements

We've added support for Shopify's Search and Discover app to help you customize search result recommendations:

<figure><img src="/files/9aVCZCboV2bIt6oFsbSq" alt=""><figcaption></figcaption></figure>

### Related products and Recently viewed products

We've separated these into two separate blocks. You can now easily sort them by preference and we've also included an option to show them in Tab format or Stacked.

<figure><img src="/files/3aNi0aR24EZlZuaFeToh" alt=""><figcaption></figcaption></figure>

Toggle tabbed and stacked with the 'Enable tabs' checkbox.

{% hint style="success" %}
To customize related products, use the Shopify Search and Discovery app.
{% endhint %}

<figure><img src="/files/z3HH60Ekkd9kHAMQRBWt" alt=""><figcaption></figcaption></figure>


# Demo store sections

Modern demo store sections and footer overview

### Video Overview

This video walkthrough showcases the sections and settings used on our Modern demo store. We cover the main sections used on the homepage and the footer configuration:

{% embed url="<https://www.loom.com/share/02c9f089742b40d4b5b471366166fb4c?sid=daaeb630-a15a-494c-8428-5cb4e0ed2a37>" %}
**Video walkthough of Sections and Footer from our demo store**
{% endembed %}

At the end of the video, we display how the sections appear on mobile devices.&#x20;

### More examples

* For a full breakdown of how we've set up the **header** and **toolbar** on the Bold demo store:

{% content-ref url="/pages/SSskJU0GzI4K5uN85jA0" %}
[Demo store header settings](/header/header/demo-store-header-settings)
{% endcontent-ref %}

* Learn how we set up our **About** **page** on the Modern demo store:

{% content-ref url="/pages/anr7YIez9EVLItX3vC7i" %}
[Demo store about page](/pages/page-templates/demo-store-about-page)
{% endcontent-ref %}


# Sections


# Advanced

### Theme sections

Click to view details of individual sections included with Broadcast:

<table data-view="cards"><thead><tr><th></th><th></th><th data-type="rating" data-max="5"></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Custom section</strong></td><td>Build a unique layout for your pages</td><td>null</td><td><a href="/files/ymkUIHSD6nAdmSr7JIrw">/files/ymkUIHSD6nAdmSr7JIrw</a></td><td><a href="/pages/4ZhPIpZJ6aSGo9NCd9yD">/pages/4ZhPIpZJ6aSGo9NCd9yD</a></td></tr><tr><td><strong>Multi column</strong></td><td>Build custom multi-column promotions rapidly, using rich content blocks</td><td>null</td><td><a href="/files/wuKajSW3HaTHfFc9MdDy">/files/wuKajSW3HaTHfFc9MdDy</a></td><td><a href="/pages/byEbzRABtTkTtPDjDino">/pages/byEbzRABtTkTtPDjDino</a></td></tr></tbody></table>


# Custom section

Build one or two-column sections rapidly, using rich content blocks

The **Custom section** allows you to build flexible, reusable content areas anywhere on your store. You can combine different block types to create custom layouts for announcements, promotional areas, or storytelling elements.

### Example designs

<figure><img src="/files/jbWn3P097RDU4WmfQu9T" alt="Design with two image blocks side by side"><figcaption></figcaption></figure>

• Create a side by side image layout with 2 image blocks

<figure><img src="/files/NCqySgILCYkWQDFIzoWM" alt="Design with one text and one image block side by side"><figcaption></figcaption></figure>

• Text block paired with an image block

<figure><img src="/files/vHmfC45ebywZuwEfXWek" alt="Design of one image block and one newsletter block side by side"><figcaption></figcaption></figure>

• Image block paired with a newsletter block

<figure><img src="/files/9XufbxsZhQRyiwiQX1mj" alt="Design of two testimonial blocks side by side"><figcaption></figcaption></figure>

• Showcase of the testimonial blocks side by side

<figure><img src="/files/aN43tc240AvZkSV93M3d" alt="Design of two product blocks side by side"><figcaption></figcaption></figure>

• Showcase of 2 product blocks side by side

<figure><img src="/files/eujwXcdXv2g5dnayr58C" alt="Design of one video and one image block side by side"><figcaption></figcaption></figure>

• Video block on the left paired with an image block on the right

<figure><img src="/files/M5uBysVLZysa2SxVSDE7" alt="Design of two collection blocks side by side"><figcaption></figcaption></figure>

• Showcase of the collection blocks and their scrolling capability

<figure><img src="/files/Fal1ZoigudaaR4RyDj9Q" alt="Design of one text and one before and after block side by side"><figcaption></figcaption></figure>

• And lastly a showcase of our before and after block paired with a text block.

These are just a couple of examples of what you are able to do with the Custom Section, we encourage you to bring out your inner creative and make something you are proud of!

<table><thead><tr><th width="212.3333740234375">Settings</th><th width="143.01995849609375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Add borders</td><td align="center"><code>checkbox</code></td><td>Adds borders around the section.</td></tr><tr><td>Enable gutters</td><td align="center"><code>checkbox</code></td><td>Adds spacing (gutters) between blocks.</td></tr><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Controls the section's horizontal width:<code>Full width</code>, <code>Full width padded</code>, or <code>Normal</code>.</td></tr><tr><td>Desktop</td><td align="center"></td><td></td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Controls vertical height on desktop.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Controls vertical height on mobile devices.</td></tr><tr><td>Reverse block placement</td><td align="center"><code>checkbox</code></td><td>Switches the order of the blocks for layout flexibility.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Sets the overall color scheme from the theme.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top</td><td align="center"><code>range</code></td><td>Adds spacing to the top of the section.</td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Adds spacing to the bottom of the section.</td></tr></tbody></table>

### See also

The multicolumn section in Broadcast is another option to build a custom section with additional columns rapidly:

{% content-ref url="/pages/byEbzRABtTkTtPDjDino" %}
[Multi column](/sections/sections/advanced/multi-column)
{% endcontent-ref %}


# Image

Displays a standalone image or side by side images to visually highlight products, promotions, or brand content within a section.

<figure><img src="/files/IuiN5CvLvL4YdUGFR1Cq" alt="Design with two image blocks side by side"><figcaption></figcaption></figure>

{% hint style="warning" %}
You can only choose two blocks to be shown at a time.
{% endhint %}

<table><thead><tr><th width="203.4444580078125">Settings</th><th width="145.8411865234375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Upload image (2000 x 1400px recommended).</td></tr><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Block heading.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Sets heading font size: <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Optional supporting text.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Sets body text size:<code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Block alignment</td><td align="center"><code>select</code></td><td>Alignment of content: <code>Top left</code>, <code>Bottom right</code>, <code>Absolute center</code>, etc.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Show text background</td><td align="center"><code>checkbox</code></td><td>Displays background behind text for contrast.</td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Background color override.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Text color override.</td></tr><tr><td>Overlay type</td><td align="center"><code>select</code></td><td>Adds an overlay: <code>Disabled</code>, <code>Opacity overlay</code>, or <code>Text underlay</code>.</td></tr><tr><td><strong>Button</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Button label. If empty, the image becomes the clickable area.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>Link URL for the button or image.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Sets the button's color style: <code>Primary</code>, <code>Secondary</code>, <code>Black</code>, ot <code>White</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Choose <code>Small</code>, <code>Medium</code>, or <code>Large</code> size.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Set <code>Solid</code>, <code>Outline</code>, or <code>Text</code> style.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Displays an arrow icon inside the button.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>Controls the semantic tag for the heading: <code>H1</code>- <code>H6</code>or <code>Automatic</code>.</td></tr></tbody></table>


# Text

Adds customizable written content to convey messages, stories, or details anywhere on the section.

<figure><img src="/files/CnEuXInv01YqS0RxC0nk" alt="Design with one text and one image block side by side"><figcaption></figcaption></figure>

{% hint style="warning" %}
You can only choose two blocks to be shown at a time.
{% endhint %}

<table><thead><tr><th width="169">Settings</th><th width="116.77777099609375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Subheading</td><td align="center"><code>text</code></td><td>Secondary title above heading.</td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Main heading.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Font size of the heading: <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code></td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Description or additional content.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Font size of body text: <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code></td></tr><tr><td><strong>Button</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Label for the optional button.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>Button destination.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Choose from <code>Primary</code>, <code>Secondary</code>, <code>White</code>, or <code>Black</code> color style.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Choose <code>Small</code>, <code>Medium</code>, or <code>Large</code>size.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Set <code>Solid</code>, <code>Outline</code>, or <code>Text</code> style.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Adds arrow to the button.</td></tr><tr><td>Show social icons</td><td align="center"><code>checkbox</code></td><td>Enables social icons display (edit in Theme settings).</td></tr><tr><td>Columns</td><td align="center"><code>range</code></td><td>Sets the number of columns for text layout (desktop only).</td></tr><tr><td>Text alignment</td><td align="center"><code>select</code></td><td>Aligns the text to the <code>Left</code> or <code>Centered</code>.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Custom background color.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Custom text color.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>SEO-focused heading tag: <code>H1</code> - <code>H6</code>, or <code>Automatic</code>.</td></tr></tbody></table>


# Newsletter

Includes a signup form to collect customer emails for building your mailing list and driving engagement.

<figure><img src="/files/vnrglbGscSxW90cjuw4j" alt="Design of one image block and one newsletter block side by side"><figcaption></figcaption></figure>

{% hint style="warning" %}
You can only choose two blocks to be shown at a time.
{% endhint %}

<table><thead><tr><th width="212.3333740234375">Settings</th><th width="127.0260009765625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Subheading</td><td align="center"><code>text</code></td><td>Text displayed above the heading.</td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Main heading of the newsletter block.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Font size of the heading: <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code></td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Supporting text below the heading.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Font size of the paragraph:<code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code></td></tr><tr><td>Columns</td><td align="center"><code>range</code></td><td>Number of text columns (desktop only).</td></tr><tr><td>Text alignment</td><td align="center"><code>select</code></td><td>Alignment of the text: <code>Left</code> or <code>Centered</code>.</td></tr><tr><td><strong>Form</strong></td><td align="center"></td><td></td></tr><tr><td>Show name field</td><td align="center"><code>checkbox</code></td><td>Includes a name field in the signup form.</td></tr><tr><td>Button text</td><td align="center"><code>text</code></td><td>Call-to-action button label.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Adds an arrow icon to the button.</td></tr><tr><td>Show reCAPTCHA terms</td><td align="center"><code>checkbox</code></td><td>Shows reCAPTCHA terms for spam protection.</td></tr><tr><td><strong>Button</strong></td><td align="center"></td><td></td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Choose color scheme: <code>Primary</code>, <code>Secondary</code>, <code>Black</code> or <code>White</code>, </td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Size of the button: <code>Small</code>, <code>Medium</code>, or <code>Large</code></td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Style of the button: <code>Solid</code>, <code>Outline</code>, or <code>Text</code> </td></tr><tr><td><strong>Social media icons</strong></td><td align="center"></td><td></td></tr><tr><td>Show social icons</td><td align="center"><code>checkbox</code></td><td>Displays social icons below the form.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Background color override.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Text color override.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>SEO heading tag: <code>H1</code> - <code>H6</code> or <code>Automatic</code>.</td></tr></tbody></table>


# Testimonial

Showcase customer reviews or quotes to build credibility and trust with your audience.

<figure><img src="/files/SELswmEklX8yH9c6uCl7" alt="Design of two testimonial blocks side by side"><figcaption></figcaption></figure>

{% hint style="warning" %}
You can only choose two blocks to be shown at a time.
{% endhint %}

<table><thead><tr><th width="190.111083984375">Settings</th><th width="154.471435546875" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Testimonial</strong></td><td align="center"></td><td></td></tr><tr><td>Customer name</td><td align="center"><code>text</code></td><td>Name of the customer.</td></tr><tr><td>Subheading</td><td align="center"><code>text</code></td><td>Typically a username or secondary label.</td></tr><tr><td>Testimonial</td><td align="center"><code>textarea</code></td><td>Customer's review content.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Font size for the testimonial: <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code></td></tr><tr><td>Bio image</td><td align="center"><code>image_picker</code></td><td>Optional customer image.</td></tr><tr><td><strong>Review link</strong></td><td align="center"></td><td></td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>Makes entire testimonial a clickable link.</td></tr><tr><td><strong>Style</strong></td><td align="center"></td><td></td></tr><tr><td>Show quotation mark</td><td align="center"><code>checkbox</code></td><td>Adds quote marks to the testimonial.</td></tr><tr><td>Text alignment</td><td align="center"><code>select</code></td><td>Aligns the testimonial: <code>Left</code> or <code>Centered</code>.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Background color override.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Text color override.</td></tr></tbody></table>


# Product

Displays a specific product with its image, title, price, and a quick add-to-cart option if supported.

<figure><img src="/files/su201Hr55yMqkcilUP8T" alt="Design of two product blocks side by side"><figcaption></figcaption></figure>

{% hint style="warning" %}
You can only choose two blocks to be shown at a time.
{% endhint %}

<table><thead><tr><th width="130.11114501953125">Settings</th><th width="110.22222900390625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Product</td><td align="center"><code>product</code></td><td>Selects a featured product to display.</td></tr><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Subheading</td><td align="center"><code>text</code></td><td>Optional subtitle.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Background color override.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Text color override.</td></tr></tbody></table>


# Video

Embeds a video file or external link to visually engage visitors with brand storytelling or demonstrations.&#x20;

<figure><img src="/files/yFlnlEwLmfsScInmn6jH" alt="Design of one video and one image block side by side"><figcaption></figcaption></figure>

The block also includes an option to toggle a popup button, allowing the video to be previewed with sound in popup view. The popup button can be seen next to the "SHOP NOW" button.

{% hint style="warning" %}
You can only choose two blocks to be shown at a time.
{% endhint %}

<table><thead><tr><th width="193.4444580078125">Settings</th><th width="158.41058349609375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Video</td><td align="center"><code>video</code></td><td>Upload the main video file to be displayed in the section.</td></tr><tr><td><strong>Popup</strong></td><td align="center"></td><td></td></tr><tr><td>Enable popup</td><td align="center"><code>checkbox</code></td><td>Toggles popup functionality for a secondary video.</td></tr><tr><td>MP4/MOV</td><td align="center"><code>video</code></td><td>Uploads a video file for use in the popup.</td></tr><tr><td>Youtube/Vimeo link</td><td align="center"><code>video_url</code></td><td>Add a YouTube or Vimeo video link for the popup.</td></tr><tr><td><strong>Image</strong></td><td align="center"></td><td></td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Upload a desktop image (recommended: 3200 x 1200px).</td></tr><tr><td>Mobile image</td><td align="center"><code>image_picker</code></td><td>Upload a mobile-specific image (recommended: 1200 x 1600px).</td></tr><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Set the heading text for the section.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Choose heading font size <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Add descriptive text below the heading.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Select the font size for the text: <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Block alignment</td><td align="center"><code>select</code></td><td>Align the content block within the section.</td></tr><tr><td><strong>Button</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Specify the text for the button. Leave blank to make the entire image clickable.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>Enter a URL for the button to navigate to.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Select the button color style: <code>Black</code>, <code>White</code>, <code>Primary</code>, or <code>Secondary</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Choose the button size: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Choose the button style: <code>Solid</code>, <code>Outline</code>, or <code>Text</code>.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Enable an arrow icon within the button.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Show text background</td><td align="center"><code>checkbox</code></td><td>Adds a background behind the text for improved readability.</td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Set the background color of the section.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Set the text color.</td></tr><tr><td>Overlay type</td><td align="center"><code>select</code></td><td>Adds an overlay: <code>Disabled</code>, <code>Opacity overlay</code>, or <code>Text underlay</code>.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>Specify the HTML tag for the heading: <code>H1</code>-<code>H6</code> or <code>Automatic</code>.</td></tr></tbody></table>


# Collection

Highlights a product collection, allowing visitors to browse grouped items directly from the section.

<figure><img src="/files/tgYvFCOpQiIBzb4Uw1f6" alt="Design of two collection blocks side by side"><figcaption></figcaption></figure>

{% hint style="warning" %}
You can only choose two blocks to be shown at a time.
{% endhint %}

<table><thead><tr><th width="126.77777099609375">Settings</th><th width="141.189208984375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Collection</td><td align="center"><code>collection</code></td><td>Choose a Shopify collection to feature in this section.</td></tr><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Enter a title or heading for the collection section.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Set the background color of the section.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Set the color of the text content.</td></tr></tbody></table>


# Before and after

Shows two images side by side with an interactive slider to illustrate transformations or comparisons effectively.

<figure><img src="/files/9HmkmXiMuqpqdYloKOAI" alt="Gif Showcasing the Design of one text and one before and after block side by side"><figcaption></figcaption></figure>

{% hint style="warning" %}
You can only choose two blocks to be shown at a time.
{% endhint %}

<table><thead><tr><th width="110.63201904296875">Settings</th><th width="163.873291015625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Image 1</td><td align="center"><code>image_picker</code></td><td>Upload the Before image (recommended: 2000 x 1400px).</td></tr><tr><td>Image 2</td><td align="center"><code>image_picker</code></td><td>Upload the After image (recommended: 2000 x 1400px).</td></tr></tbody></table>


# Multi column

Build custom multi-column promotions rapidly, using rich content blocks

Broadcast's full-featured section to build rich, beautiful, custom layouts and promotions. The multi-column section is a perfect starting point for building creative promotions from one to many columns with rich blocks and animation.&#x20;

<figure><img src="/files/6znzahBzS2cBdnzFFL9j" alt="Gif showcasing Multi Column section and its animations."><figcaption><p><strong>Column width, shape and animation examples</strong></p></figcaption></figure>

### Example Designs

Sample layouts and styles when using the multi-column section.&#x20;

<figure><img src="/files/THoJuWC26dPCrvB6S6CE" alt="Design of multi column section showcasing image blocks"><figcaption></figcaption></figure>

* Text blocks with large heading sizes:

<figure><img src="/files/mszp4g4CINMG7HSIi5k0" alt="Design of multi column section showcasing text blocks"><figcaption></figcaption></figure>

* Menu block paired with an image block:

<figure><img src="/files/PsMCjhyMaKUKAQZUZHKw" alt="Design of multi column section showcasing menu blocks"><figcaption></figcaption></figure>

* Two rows of text blocks with equal sizes:

<figure><img src="/files/GOyPNVthJfz4nP4w9pc5" alt="Design of multi column section showcasing text blocks"><figcaption></figcaption></figure>

### Section settings

Experiment with various column widths, blocks, and image shapes. The multi-column section can be used throughout your site with different designs.&#x20;

<table><thead><tr><th width="152.7586669921875">Settings</th><th width="141.7569580078125" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Title for the section.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Controls the font size of the heading: <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Rich text area below the heading.</td></tr><tr><td>Heading</td><td align="center"><code>select</code></td><td>Alignment for the heading text: <code>Left</code> or <code>Centered</code>.</td></tr><tr><td>Text</td><td align="center"><code>select</code></td><td>Alignment for the description text: <code>Left</code> or <code>Centered</code>.</td></tr><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Determines section width: <code>Full width padded</code> or <code>Normal</code>.</td></tr><tr><td>Columns</td><td align="center"><code>select</code></td><td>Vertical alignment of blocks: <code>Top</code> or <code>Centered</code>.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Layout</td><td align="center"><code>select</code></td><td>Layout style on mobile: <code>1 item per row</code>, <code>2 items per row</code>, or <code>Slider</code>.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Choose a color scheme for background and text.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top</td><td align="center"><code>range</code></td><td>Padding above the section.</td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Padding below the section.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>Controls HTML tag <code>Automatic</code>, or <code>H1</code> - <code>H6</code> for SEO purposes.</td></tr></tbody></table>

Image blocks have shape options and can have text and a call-to-action button after the image:

<figure><img src="/files/FPyPkSqfpItLogWdGF9v" alt=""><figcaption><p><strong>Blob shapes include animation effects on hover. Heading and content text can be aligned differently.</strong></p></figcaption></figure>

### Video Overview

This video demonstrates different column layouts and also covers some of the section and block settings to achieve different styles:

{% embed url="<https://www.loom.com/share/6bca317404154fdeb4b6fb1f695ced8f?sid=921ea64c-55c7-489c-9914-7f2c5fc4ef5f>" %}
**Video walkthrough of the multicolumn section**
{% endembed %}

### See also

For two-column sections with different block types, Broadcast also includes:

{% content-ref url="/pages/DIP6kYBfNtFhoLm9JV6D" %}
[Image with text](/sections/sections/storytelling/image-with-text)
{% endcontent-ref %}

{% content-ref url="/pages/4ZhPIpZJ6aSGo9NCd9yD" %}
[Custom section](/sections/sections/advanced/custom-section)
{% endcontent-ref %}


# Image

Displays an image with an optional heading, text, and button to visually highlight content.

<figure><img src="/files/G9KufSOUo2L6zQUMg04f" alt="Design of multi column section showcasing image blocks"><figcaption></figcaption></figure>

<table><thead><tr><th width="178.8046875">Settings</th><th width="143.99566650390625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Column width</td><td align="center"><code>range</code></td><td>Sets block width on desktop.</td></tr><tr><td><strong>Image</strong></td><td align="center"></td><td></td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Upload an image. Recommended size: 1400x1400px.</td></tr><tr><td>Image width</td><td align="center"><code>range</code></td><td>Adjust image width within the column.</td></tr><tr><td>Desktop aspect ratio</td><td align="center"><code>range</code></td><td>Image ratio from wide to tall.</td></tr><tr><td>Mobile aspect ratio</td><td align="center"><code>range</code></td><td>Same as above but for mobile.</td></tr><tr><td>Image shape</td><td align="center"><code>select</code></td><td>Display image as <code>Normal</code>, <code>Circle</code>, <code>Rounded</code>, <code>Blob one</code>, <code>Blob two</code>, or <code>Blob three</code>.</td></tr><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Title under image.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Font size for the heading: <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Rich text below the heading.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Font size of text content: <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td><strong>Button</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Text for CTA button (leave blank to make image a link).</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>Link for the button or image.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Button color style: <code>Primary</code>, <code>Secondary</code>, <code>Black</code>, or <code>White</code>.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Appearance of the button: <code>Solid</code>, <code>Outline</code>, or <code>Text</code>.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Adds an arrow to the button if enabled.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>SEO tag for the heading: <code>Automatic</code>, or <code>H1</code> - <code>H6</code>.</td></tr></tbody></table>


# Image with text overlay

Display an image with a heading, text, and button overlaid for promotional or informational emphasis.

<figure><img src="/files/Z4zumB2ysXoN0korucAM" alt="Design of multi column section showcasing image with text overlay blocks"><figcaption></figcaption></figure>

<table><thead><tr><th width="182.498291015625">Settings</th><th width="155.98004150390625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Column width</td><td align="center"><code>range</code></td><td>Width of the column desktop only.</td></tr><tr><td><strong>Image</strong></td><td align="center"></td><td></td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Upload image (1400 x 1400px .jpg recommended).</td></tr><tr><td>Image width</td><td align="center"><code>range</code></td><td>Width of the image.</td></tr><tr><td>Desktop aspect ratio</td><td align="center"><code>range</code></td><td>Image aspect ratio on desktop.</td></tr><tr><td>Mobile aspect ratio</td><td align="center"><code>range</code></td><td>Image aspect ratio on mobile.</td></tr><tr><td>Image shape</td><td align="center"><code>select</code></td><td>Shape style: <code>Normal</code>, <code>Circle</code>, <code>Rounded</code>, <code>Blob one</code>, <code>Blob two</code>, or <code>Blob three</code>.</td></tr><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Heading text overlay.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Heading font size: <code>Mini</code> , <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Descriptive text overlay.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Font size for text: <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Alignment</td><td align="center"><code>select</code></td><td>Position of overlay text and button within the image.</td></tr><tr><td><strong>Button</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Button label text (leave blank to link entire image).</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>URL for button or linked image.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Button color style: <code>Black</code>, <code>White</code>, <code>Primary</code>, or <code>Secondary</code>.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Button style: <code>Solid</code>, <code>Outline</code>, or <code>Text</code>.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Display arrow icon in button.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Color for overlay text.</td></tr><tr><td>Overlay type</td><td align="center"><code>select</code></td><td>Overlay style: <code>Disabled</code>, <code>Opacity overlay</code>, or <code>Text underlay</code>.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>HTML tag for heading: <code>Automatic</code> or <code>H1</code>-<code>H6</code>.</td></tr></tbody></table>


# Icon

Shows a built-in or uploaded icon with customizable size, color, heading, and supporting text.

<figure><img src="/files/ADfrKgmapi25F1aPR0ck" alt="Design of multi column section showcasing icon blocks"><figcaption></figcaption></figure>

<table><thead><tr><th width="200.2890625">Settings</th><th width="140.58245849609375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Column width</td><td align="center"><code>range</code></td><td>Sets block width on desktop.</td></tr><tr><td><strong>Icon</strong></td><td align="center"></td><td></td></tr><tr><td>Icon</td><td align="center"><code>select</code></td><td>Choose from predefined icons.</td></tr><tr><td>Alternative icon/image</td><td align="center"><code>image_picker</code></td><td>Optional image override for icon.</td></tr><tr><td>Size</td><td align="center"><code>range</code></td><td>Size of the icon.</td></tr><tr><td>Placement</td><td align="center"><code>select</code></td><td>Position of the icon: <code>Top</code> or <code>Left</code>.</td></tr><tr><td>Color</td><td align="center"><code>color</code></td><td>Set the icon color.</td></tr><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Title below the icon.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Font size of the heading: <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Descriptive text content.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Font size for the text: <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>SEO tag for the heading: <code>Automatic</code>, or <code>H1</code> - <code>H6</code>.</td></tr></tbody></table>


# Text

Adds a heading, rich text, and an optional button for general content or calls to action.

<figure><img src="/files/c6M9LGQWk1vgBEAXHMab" alt="Design of multi column section showcasing text blocks"><figcaption></figcaption></figure>

<table><thead><tr><th width="158.34027099609375">Settings</th><th width="123.22308349609375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Column width</td><td align="center"><code>range</code></td><td>Sets block width on desktop.</td></tr><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Main heading.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Font size of the heading: <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Paragraph text.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Font size for the paragraph: <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td><strong>Button</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Optional CTA button text.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>Link for the button.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Styling for button color: <code>Primary</code>, <code>Secondary</code>, <code>Black</code>, or <code>White</code>.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Button appearance: <code>Solid</code>, <code>Outline</code>, or <code>Text</code>.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Display an arrow icon in button.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>SEO tag for the heading: <code>Automatic</code>, or <code>H1</code> - <code>H6</code>.</td></tr></tbody></table>


# Menu

Displays a simple navigation menu without dropdowns, ideal for quick links within a section.

<figure><img src="/files/koTE5hXdTmepxqPdFDxo" alt="Design of multi column section showcasing menu blocks"><figcaption></figcaption></figure>

<table><thead><tr><th width="137.35504150390625">Settings</th><th width="128.16839599609375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Column width</td><td align="center"><code>range</code></td><td>Width of the menu block on desktop.</td></tr><tr><td>Menu</td><td align="center"><code>link_list</code></td><td>Choose a menu (no dropdowns supported).</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Font size of the heading: <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr></tbody></table>


# Product

Shows a selected product with its image, title, price, and default quick add-to-cart functionality.

<figure><img src="/files/Td9pl8xY6DUta5pk2miB" alt="Design of multi column section showcasing product and image blocks"><figcaption></figcaption></figure>

You can achieve this look by adding 2 image and 2 product blocks. With the product blocks being set to 19% width while the image blocks are set to 29% width. The width setting is located within the individual block's settings.

<table><thead><tr><th width="134.20831298828125">Settings</th><th width="115.89581298828125" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Column width</td><td align="center"><code>range</code></td><td>Width of the product block on desktop.</td></tr><tr><td>Product</td><td align="center"><code>product</code></td><td>Select a product to feature.</td></tr></tbody></table>


# Banners

### Theme sections

Click to view details of individual sections included with Broadcast:

<table data-view="cards"><thead><tr><th></th><th></th><th data-type="rating" data-max="5"></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Banner with video</strong></td><td>Highlight your brand story with a bold banner featuring an autoplay or looped background video</td><td>null</td><td><a href="/files/QQmWgtGph2EwDzzsg7UA">/files/QQmWgtGph2EwDzzsg7UA</a></td><td><a href="/pages/LbUCichlz1mrh2xamt5i">/pages/LbUCichlz1mrh2xamt5i</a></td></tr><tr><td><strong>Image banner</strong></td><td>Display a single or split images hero-style banner</td><td>null</td><td><a href="/files/LTbBhkrHKJa9Rj5HJ75x">/files/LTbBhkrHKJa9Rj5HJ75x</a></td><td><a href="/pages/69OdHRr3eJggEPJ1AIyW">/pages/69OdHRr3eJggEPJ1AIyW</a></td></tr><tr><td><strong>Image with scrolling text</strong></td><td>Visual elements with moving text for a captivating display</td><td>null</td><td><a href="/files/F7CwcuEowFCpFYkUTyj9">/files/F7CwcuEowFCpFYkUTyj9</a></td><td><a href="/pages/kXJIY2LEYGtsIaQHON3L">/pages/kXJIY2LEYGtsIaQHON3L</a></td></tr><tr><td><strong>Slideshow (Legacy)</strong></td><td>The (Legacy) section provides a streamlined banner area that supports sliding images and accompanying text content.</td><td>null</td><td><a href="/files/TdJoMPPKrYfj2EKIaITf">/files/TdJoMPPKrYfj2EKIaITf</a></td><td><a href="/pages/VcypSgo43hllsKQb0bqo">/pages/VcypSgo43hllsKQb0bqo</a></td></tr><tr><td><strong>Slideshow (Nested)</strong></td><td>The Slideshow (Nested) section resembles its Legacy counterpart, while allowing section content to be broken into more flexible, reorderable blocks for enhanced layout control.</td><td>null</td><td><a href="/files/upbbtHIXS8CjQw12M899">/files/upbbtHIXS8CjQw12M899</a></td><td><a href="/pages/EylzZCpXYL5eJZj7wyjo">/pages/EylzZCpXYL5eJZj7wyjo</a></td></tr><tr><td><strong>Video</strong></td><td>A powerful all-in-one video section for banners and building attention-grabbing promotions</td><td>null</td><td><a href="/files/FtHahsfbrwMNY6AGSSF2">/files/FtHahsfbrwMNY6AGSSF2</a></td><td><a href="/pages/GH7hB0MkFvlzcNkUIkoB">/pages/GH7hB0MkFvlzcNkUIkoB</a></td></tr></tbody></table>


# Banner with video

The banner with video section lets you showcase a large hero banner that combines a background image and a video. It’s ideal for storytelling, product launches, or brand introductions, creating an immersive visual experience with text and buttons layered over the media.

<figure><img src="/files/BLHe1jsAyHVakBk7YIrq" alt="Gif showcasing the design of the banner with video section"><figcaption></figcaption></figure>

### Section settings

<table><thead><tr><th width="218.50518798828125">Settings</th><th width="152.650146484375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Image</strong></td><td align="center"></td><td></td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Upload a high-resolution background image (recommended: 3200×1200px).</td></tr><tr><td>Image link</td><td align="center"><code>url</code></td><td>Add an optional link for the banner image.</td></tr><tr><td><strong>Video</strong></td><td align="center"></td><td></td></tr><tr><td>Video</td><td align="center"><code>video</code></td><td>Add a video to display alongside or within the banner.</td></tr><tr><td>Desktop width</td><td align="center"><code>range</code></td><td>Adjusts how much space the video takes up on desktop.</td></tr><tr><td>Aspect ratio</td><td align="center"><code>range</code></td><td>Defines the video’s aspect ratio from wide to tall.</td></tr><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Choose between <code>Full width</code> or <code>Full width padded</code> layout.</td></tr><tr><td><strong>Desktop</strong></td><td align="center"></td><td></td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Set the banner’s desktop height: <code>Full screen height</code>, <code>3/4 of screen</code>, <code>150px</code>, and etc.</td></tr><tr><td>Desktop alignment</td><td align="center"><code>select</code></td><td>Control the position of text and buttons on the desktop: <code>Top left</code>, <code>Absolute center</code>, <code>Bottom right</code>, and etc.</td></tr><tr><td>Content width</td><td align="center"><code>range</code></td><td>Sets the width of the text and content area within the banner.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Upload a separate image optimized for mobile (recommended: 1200×1600px).</td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Set the banner height on mobile devices: <code>Full screen height</code>, <code>3/4 of screen</code>, <code>150px</code>, and etc.</td></tr><tr><td>Mobile alignment</td><td align="center"><code>select</code></td><td>Control text alignment and positioning for mobile: <code>Top left</code>, <code>Absolute center</code>, <code>Bottom right</code>, and etc.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Choose the section’s background and text color theme.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top/Bottom</td><td align="center"><code>range</code></td><td>Adjust spacing above and below the section.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Show placeholder image</td><td align="center"><code>checkbox</code></td><td>Displays a default placeholder image when no media is set.</td></tr></tbody></table>


# Image banner

Display a single or split images hero-style banner

Restricts overlay to only the area behind the text. Requires Overlay opacity > 0. SectionBroadcast's hero-style section lets you quickly build a powerful banner section with one or two split images.&#x20;

<figure><img src="/files/BC0i5t70EQuGk9wlCjIR" alt="Design of image banner section"><figcaption><p><strong>Two images split with multiple buttons</strong></p></figcaption></figure>

The heading, text, and buttons are blocks that can be placed in different positions to create the perfect branded banner and messaging.&#x20;

<figure><img src="/files/I7AUz5OJoJBo7s4ludY0" alt="Design of image banner section"><figcaption><p><strong>Single image with multiple buttons</strong></p></figcaption></figure>

### Section settings

<table><thead><tr><th width="204.056396484375">Settings</th><th width="156.94189453125" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Content</strong></td><td align="center"></td><td></td></tr><tr><td>Primary image</td><td align="center"><code>image_picker</code></td><td>Main banner image. Recommended size: 3200×1200px JPG.</td></tr><tr><td>Secondary image</td><td align="center"><code>image_picker</code></td><td>Optional second image (displays 50% width). Same size as primary.</td></tr><tr><td>Image link</td><td align="center"><code>url</code></td><td>Optional link for the image.</td></tr><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Width of the banner: <code>Full width</code> or <code>Full width padded</code>.</td></tr><tr><td><strong>Desktop</strong></td><td align="center"></td><td></td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Controls banner height on desktop. Multiple screen height or fixed pixel options</td></tr><tr><td>Desktop alignment</td><td align="center"><code>select</code></td><td>Alignment of content within the banner for desktop.</td></tr><tr><td>Content width</td><td align="center"><code>range</code></td><td>Percentage of banner width that content will occupy.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Optional mobile-specific image (1200×1600px recommended).</td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Controls height on mobile. Options mimic desktop height settings.</td></tr><tr><td>Mobile alignment</td><td align="center"><code>select</code></td><td>Alignment of content for mobile.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Select color scheme to apply to this section.</td></tr><tr><td>Show text background</td><td align="center"><code>checkbox</code></td><td>Adds background behind text for legibility.</td></tr><tr><td>Overlay type</td><td align="center"><code>select</code></td><td>Adds an overlay: <code>Disabled</code>, <code>Opacity</code>, or <code>Text underlay</code>.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top</td><td align="center"><code>range</code></td><td>Top padding.</td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Bottom padding.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Show placeholder image</td><td align="center"><code>checkbox</code></td><td>Displays a placeholder if no image is selected. Disable for metafields.</td></tr></tbody></table>

### Video Overview

This video demonstrates the section settings and block options for the **Image banner** section, including split-images and mobile options:

{% embed url="<https://www.loom.com/share/cec60793adff4b39b4494ea06ede0974?sid=8df9c0ba-b8cb-4103-86f2-f87528173a51>" %}
**Video walkthrough of the Image banner section**
{% endembed %}

### Advanced setting

This video discusses the advanced setting option when using the image banner page templates with metafields:

{% embed url="<https://www.loom.com/share/0679fc3f06bd43409c46810ea9d2f130?sid=9b201976-5ff4-43b8-8066-820a109410a4>" %}
**Default product template - Image placeholder setting**
{% endembed %}


# Heading

Display a heading with a customizable size and SEO tag for clear section titles.

<figure><img src="/files/Zta0ZhjxwtRTPp2FQNdl" alt="Design of image banner section showcasing the heading block"><figcaption></figcaption></figure>

<table><thead><tr><th width="162.203125">Settings</th><th width="99.03118896484375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>The heading text.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Font size for heading:<code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>HTML tag for SEO: <code>H1</code> - <code>H6</code>, or <code>Automatic</code>.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Buttom</td><td align="center"><code>range</code></td><td>Padding below the section.</td></tr></tbody></table>


# Text

Display a block of rich text content with adjustable text size.

<figure><img src="/files/Rk7EIXpnAslITUVIeccm" alt="Design of image banner section showcasing the text block"><figcaption></figcaption></figure>

<table><thead><tr><th width="111.51739501953125">Settings</th><th width="117.97821044921875" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Rich text field.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Text size if using paragraph format. Affects only paragraph elements: <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Bottom</td><td align="center"><strong>range</strong></td><td>Padding below the section.</td></tr></tbody></table>


# Single button

Add a single button with customizable text, color, size, and style for call-to-action links.

<figure><img src="/files/mdpj2eAALfccrp3r64XZ" alt="Design of image banner section showcasing the single button block"><figcaption></figcaption></figure>

<table><thead><tr><th width="119.19964599609375">Settings</th><th width="120.20654296875" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Text</td><td align="center"><code>text</code></td><td>Button label text.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>URL the button links to.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Button color: <code>Black</code>, <code>White</code>, <code>Primary</code>, or <code>Secondary</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Size of the button: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Button style: <code>Solid</code>, <code>Outline</code>, or <code>Text</code>.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Toggles directional arrow in button.</td></tr><tr><td>Full-width</td><td align="center"><code>checkbox</code></td><td>Makes the button span the full width of its container.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Padding below the section.</td></tr></tbody></table>


# Side by side buttons

Display two buttons side by side with separate styles and links for multiple actions.

<figure><img src="/files/0ZH8z9QgvUpT5JRu1qtR" alt="Design of image banner section showcasing the side by side buttons block"><figcaption></figcaption></figure>

<table><thead><tr><th width="246.84722900390625">Settings</th><th width="130.5321044921875" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Primary/Secondary buttons</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Label for the button.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>Link for the button.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Color for the button: <code>Black</code>, <code>White</code>, <code>Primary</code>, or <code>Secondary</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Size of the button: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Style for the  button: <code>Solid</code>, <code>Outline</code>, or <code>Text</code>.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Show arrow on the button.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Padding below the section.</td></tr></tbody></table>


# Custom code

Insert custom Liquid code or HTML for advanced layouts or embeds.

<figure><img src="/files/8Q2CPnCvNb9cVioIzvIu" alt="Design of image banner section showcasing the custom code block"><figcaption></figcaption></figure>

<table><thead><tr><th width="154.625">Settings</th><th width="134.68487548828125" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Custom code</td><td align="center"><code>liquid</code></td><td>Add your own custom HTML/Liquid code. Renders directly in the section.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Padding below the section.</td></tr></tbody></table>


# Image with scrolling text

This section is a highly flexible and customizable solution for displaying important messages alongside imagery. With extensive options, it fits a variety of design needs, from announcements to promotional banners.

<figure><img src="/files/MF6kzviw8rHvi8Sf9SSu" alt="Gif showcasing image with scrolling text seciton"><figcaption></figcaption></figure>

### Section settings

Add and organize various section blocks within the layout, allowing you to customize the structure of your content by arranging different elements, such as the section heading and buttons, to create a visually engaging and well-structured page.

<table><thead><tr><th width="221.24395751953125">Settings</th><th width="140.53466796875" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Content</strong></td><td align="center"></td><td></td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Main desktop image (Recommended: 3200 x 1200px, JPG).</td></tr><tr><td>Image link</td><td align="center"><code>url</code></td><td>Optional URL to make the image clickable.</td></tr><tr><td>Space between messages</td><td align="center"><code>range</code></td><td>Controls the spacing between scrolling messages.</td></tr><tr><td>Autoplay speed</td><td align="center"><code>range</code></td><td>Adjusts the scrolling speed of the text.</td></tr><tr><td><strong>Text typography</strong></td><td align="center"></td><td></td></tr><tr><td>Text alignment</td><td align="center"><code>select</code></td><td>Vertical text position: <code>Top</code>, <code>Center</code>, or <code>Bottom</code>.</td></tr><tr><td><strong>Scrolling text typography</strong></td><td align="center"></td><td></td></tr><tr><td>Font</td><td align="center"><code>font_picker</code></td><td>Font style for scrolling text.</td></tr><tr><td>Text size</td><td align="center"><code>range</code></td><td>Font size for scrolling text.</td></tr><tr><td>Letter spacing</td><td align="center"><code>range</code></td><td>Controls spacing between letters.</td></tr><tr><td>Uppercase</td><td align="center"><code>checkbox</code></td><td>Transforms scrolling text to uppercase.</td></tr><tr><td>Position</td><td align="center"><code>select</code></td><td>Alignment for scrolling text: <code>Top</code>, <code>Center</code>, or <code>Bottom</code>.</td></tr><tr><td>Text direction</td><td align="center"><code>select</code></td><td>Marquee direction: <code>Right-to-left</code> or <code>Left-to-right</code>.</td></tr><tr><td><strong>Desktop</strong></td><td align="center"></td><td></td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Choose height: image-based or fixed screen ratios.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Alternative image for mobile (Recommended: 1200 x 1600px, JPG).</td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Mobile height options similar to desktop.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Choose a color scheme from predefined options.</td></tr><tr><td>Overlay type</td><td align="center"><code>select</code></td><td>Adds an overlay: <code>Disabled</code>, <code>Opacity</code>, or <code>Text underlay</code>.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top</td><td align="center"><code>range</code></td><td>Padding at the top.</td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Padding at the bottom.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Show placeholder image</td><td align="center"><code>checkbox</code></td><td>Show placeholder if metafield image is not used.</td></tr></tbody></table>


# Scrolling text

Display a scrolling text banner to highlight announcements or offers.

<figure><img src="/files/rf1RRNAw05qGhnoNL1KN" alt="Gif showcasing image with scrolling text seciton and scrolling text block"><figcaption></figcaption></figure>

<table><thead><tr><th width="94.177978515625">Settings</th><th width="126.078125" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Enter rich text to scroll.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Override text color for this scrolling text block.</td></tr></tbody></table>


# Heading

Display a heading with adjustable size and SEO tag for clear section titles.

<figure><img src="/files/u6RHNHuv5snSYfD1R2oR" alt="Design showcasing image with scrolling text section and its heading block"><figcaption></figcaption></figure>

<table><thead><tr><th width="153.8350830078125">Settings</th><th width="109.9339599609375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td align="center"><code>text</code></td><td>Enter heading text.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Font size for heading: <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>Define HTML heading tag: <code>H1</code>-<code>H6</code> or <code>Automatic</code>.</td></tr></tbody></table>


# Text

Display a block of text content with adjustable size and color.

<figure><img src="/files/CGZviHwh15ssNYeXyIcZ" alt="Design showcasing image with scrolling text section and its text block"><figcaption></figcaption></figure>

<table><thead><tr><th width="96.0616455078125">Settings</th><th width="117.45660400390625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Text</td><td align="center"><code>textarea</code></td><td>Add descriptive paragraph or brand message.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Font size based on paragraph body scale: <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Override text color.</td></tr></tbody></table>


# Button

Add a button with customizable text, link, color, size, and style for a call-to-action.

<figure><img src="/files/ErKPz05bKdVMvheVFF9s" alt="Design showcasing image with scrolling text section and its button block"><figcaption></figcaption></figure>

<table><thead><tr><th width="123.86981201171875">Settings</th><th width="114.63458251953125" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Text</td><td align="center"><code>text</code></td><td>Button label.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>Destination URL when button is clicked.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Choose from <code>Black</code>, <code>White</code>, <code>Primary</code>, or <code>Secondary</code> button color.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Set <code>Small</code>, <code>Medium</code>, or <code>Large</code> size.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Choose from <code>Solid</code>, <code>Outline</code>, or <code>Text</code> style.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Adds directional arrow icon to button.</td></tr></tbody></table>


# Slideshow (Legacy)

Display full-width image slides with headings, buttons, and custom layouts.&#x20;

<figure><img src="/files/sKsfwU8VeQWrVTqEkzfB" alt="Design showcasing Slideshow Legacy section"><figcaption></figcaption></figure>

This legacy slideshow supports a wide range of layout, transition, and content options, including desktop/mobile optimization and overlay enhancements. Best suited for visual storytelling or promotional hero banners.

<table><thead><tr><th width="268.4053955078125">Settings</th><th width="145.3671875" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Transition style</td><td align="center"><code>select</code></td><td>Choose how slides change: <code>Slide</code>, <code>Fade</code>, <code>Zoom out</code>, or <code>Wipe</code>.</td></tr><tr><td>Show navigation arrows on hover</td><td align="center"><code>checkbox</code></td><td>Display arrow buttons when users hover over the slideshow.</td></tr><tr><td><strong>Autoplay</strong></td><td align="center"></td><td></td></tr><tr><td>Auto-rotate slides</td><td align="center"><code>checkbox</code></td><td>Enable automatic slide rotation (autoplay).</td></tr><tr><td>Change slides every</td><td align="center"><code>range</code></td><td>Time in seconds between automatic slide transitions. </td></tr><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Choose between <code>Full width</code> or <code>Full width padded</code> layout.</td></tr><tr><td><strong>Desktop</strong></td><td align="center"></td><td></td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Set slide height for desktop: <code>Full screen</code>, <code>Fixed pixels</code>, or <code>Screen ratios</code>.</td></tr><tr><td>Content width</td><td align="center"><code>range</code></td><td>Set how wide the text area should be relative to the slide.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Define slide height for mobile using screen ratios or fixed pixels.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Choose the theme’s color preset to apply to the slide section.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top</td><td align="center"><code>range</code></td><td>Add spacing above the slideshow. </td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Add spacing below the slideshow.</td></tr></tbody></table>


# Slide

The Slide block represents an individual slide within a slideshow. It allows you to customize both the visual content and text overlays for each slide.

<figure><img src="/files/0fRuta3ZVBQ6ZssOFG18" alt="Design showcasing Slideshow Legacy section and its slide feature"><figcaption></figcaption></figure>

<table><thead><tr><th width="203.86981201171875">Settings</th><th width="142.26910400390625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Content</strong></td><td align="center"></td><td></td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Main image (recommended 3200x1200px .jpg)</td></tr><tr><td>Image link</td><td align="center"><code>url</code></td><td>Link for the main image</td></tr><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>textarea</code></td><td>Heading text.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Size of heading text: <code>Mini</code>,<code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Text</td><td align="center"><code>textarea</code></td><td>Supporting description text.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Size of body text: <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td><strong>Primary/Secondary buttons</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Label text for the primary button</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>Link URL for the primary button</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Color scheme for primary button: <code>Black</code>, <code>White</code>, <code>Primary</code>, or <code>Secondary</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Size of primary button: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Style of primary button: <code>Solid</code>, <code>Outline</code>, or <code>Text</code>.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Option to display an arrow icon on the primary button.</td></tr><tr><td><strong>Desktop</strong></td><td align="center"></td><td></td></tr><tr><td>Alignment</td><td align="center"><code>select</code></td><td>Alignment of content on desktop: <code>Top left</code>, <code>Middle right</code>, <code>Bottom center</code>, etc.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Mobile image</td><td align="center"><code>image_picker</code></td><td>Mobile-optimized image (recommended 1200x1600px .jpg)</td></tr><tr><td>Alignment</td><td align="center"><code>select</code></td><td>Content alignment for mobile view: <code>Top right</code>, <code>Middle left</code>, <code>Bottom center</code>, etc.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Show text background</td><td align="center"><code>checkbox</code></td><td>Toggle to display a background behind text.</td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Set the background color.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Choose the text color.</td></tr><tr><td>Overlay type</td><td align="center"><code>select</code></td><td>Adds an overlay: <code>Disabled</code>, <code>Opacity</code>, or <code>Text underlay</code>.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>SEO tag level for the heading: <code>H1-H6</code> or <code>Automatic</code>.</td></tr></tbody></table>


# Slideshow (Nested)

The nested Slideshow section creates a responsive banner section with the added capability of sliding images, that supports nested content blocks within each slide. It enables users to combine visual media (images or videos) with structured content (e.g., headings, text, buttons) layered on top.&#x20;

Designed to be flexible, it includes support for layout customization, color schemes, autoplay behavior, and responsive heights for both desktop and mobile.

<table><thead><tr><th width="184.95050048828125">Settings</th><th width="138.8255615234375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Transition style</td><td align="center"><code>select</code></td><td>Determines the slide transition effect: <code>Slide</code>, <code>Fade</code>, <code>Zoom out</code>, or <code>Wipe</code>.</td></tr><tr><td>Show navigation arrows on hover</td><td align="center"><code>checkbox</code></td><td>Displays left/right arrows when the user hovers over the slideshow.</td></tr><tr><td><strong>Autoplay</strong></td><td align="center"></td><td></td></tr><tr><td>Auto-rotate slides</td><td align="center"><code>checkbox</code></td><td>Enables automatic cycling of slides.</td></tr><tr><td>Change slides every</td><td align="center"><code>range</code></td><td>Interval between automatic slide changes.</td></tr><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Sets section width: <code>Full width</code> or <code>Full width with padding</code>.</td></tr><tr><td><strong>Desktop</strong></td><td align="center"></td><td></td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Controls slideshow height on desktop. Options include screen ratios and fixed pixel heights.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Controls slideshow height on mobile devices. Mirrors the desktop height options.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Applies a predefined color scheme to the content within the section.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top</td><td align="center"><code>range</code></td><td>Adds spacing above the section.</td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Adds spacing below the section.</td></tr></tbody></table>


# Image settings

The image block settings allow you to configure how an image appears within a slide. These settings ensure your visual content is optimized across devices and maintains consistency across slides.

<table><thead><tr><th width="202.4461669921875">Settings</th><th width="157.19525146484375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Upload or select a main image for desktop. Recommended size: 3200×1200px.</td></tr><tr><td>Image link</td><td align="center"><code>url</code></td><td>Optional link URL the image will navigate to when clicked.</td></tr><tr><td><strong>Desktop</strong></td><td align="center"></td><td></td></tr><tr><td>Text alignment</td><td align="center"><code>select</code></td><td>Controls the alignment of overlaid content on desktop: <code>Absolute center</code>, <code>Top left</code>, <code>Bottom right</code>, etc.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Mobile image</td><td align="center"><code>image_picker</code></td><td>Upload or select an image optimized for mobile. Recommended size: 1200×1600px.</td></tr><tr><td>Text alignment</td><td align="center"><code>select</code></td><td>Controls the alignment of overlaid content on mobile: <code>Middle right</code>, <code>Bottom center</code>, <code>Top right</code>, etc.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Show text background</td><td align="center"><code>checkbox</code></td><td>Toggles a background behind text for better readability.</td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Sets the background color for the content area.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Sets the color of the text on the image.</td></tr><tr><td>Overlay type</td><td align="center"><code>select</code></td><td>Adds an overlay: <code>Disabled</code>, <code>Opacity</code>, or <code>Text underlay</code>.</td></tr></tbody></table>


# Video settings

The video block settings offer tools to embed and display video content in place of static images. These settings mirror image settings but are tailored for motion content.

<table><thead><tr><th width="203.982666015625">Settings</th><th width="124.868896484375" align="center" valign="top">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Video</strong></td><td align="center" valign="top"></td><td></td></tr><tr><td>Video</td><td align="center" valign="top"><code>video</code></td><td>Upload an MP4 video to be played as the background or slide content.</td></tr><tr><td>Image link</td><td align="center" valign="top"><code>url</code></td><td>Optional link, clicking the video block can navigate to this URL.</td></tr><tr><td><strong>Desktop</strong></td><td align="center" valign="top"></td><td></td></tr><tr><td>Text alignment</td><td align="center" valign="top"><code>select</code></td><td>Positions the text overlay on desktop: <code>Absolute center</code>, <code>Top center</code>, <code>Bottom left</code>, etc.</td></tr><tr><td><strong>Mobile</strong></td><td align="center" valign="top"></td><td></td></tr><tr><td>Text alignment</td><td align="center" valign="top"><code>select</code></td><td>Positions the text overlay on mobile:<code>Middle right</code>, <code>Bottom center</code>, <code>Top right</code>, etc.</td></tr><tr><td><strong>Colors</strong></td><td align="center" valign="top"></td><td></td></tr><tr><td>Show text background</td><td align="center" valign="top"><code>checkbox</code></td><td>Adds a background behind text for better readability.</td></tr><tr><td>Background</td><td align="center" valign="top"><code>color</code></td><td>Sets the background color of the text container.</td></tr><tr><td>Text</td><td align="center" valign="top"><code>color</code></td><td>Defines the text color displayed over the video.</td></tr><tr><td>Overlay type</td><td align="center" valign="top"><code>select</code></td><td>Adds an overlay: <code>Disabled</code>, <code>Opacity</code>, or <code>Text underlay</code>.</td></tr></tbody></table>


# Image and Video blocks

The **Image** and **Video** blocks can be combined under a unified structure because they share a common purpose and layout model:

> Both blocks act as a background media container with nested content (like text, heading, button blocks) layered on top.

## Blocks

These content blocks are modular elements designed to build flexible, visually engaging slides or sections. Each block can be added, arranged, and styled independently to create rich storytelling experiences or drive user actions.

### Heading

Displays a large headline or title within a slide or section.

<table><thead><tr><th width="157.967041015625">Settings</th><th width="120.54254150390625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Text</td><td align="center"><code>textarea</code></td><td>The heading content displayed over the image or video slide.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Controls the visual size of the heading text. Options: <code>Mini</code>,<code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>Sets the semantic HTML tag <code>H1</code>-<code>H6</code>, or <code>Automatic</code> for SEO purposes.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Bottom</td><td align="center"></td><td>Padding below the section.</td></tr></tbody></table>

### Text

Adds supporting or descriptive text beneath a heading.

<table><thead><tr><th width="95.6492919921875">Settings</th><th width="123.91668701171875" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Text</td><td align="center"><code>textarea</code></td><td>The body text shown over the image or video slide.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Controls the font size for product text. Adjusts based on base size setting: <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Padding below the section.</td></tr></tbody></table>

### Single button

Inserts a single call-to-action (CTA) button.

<table><thead><tr><th width="118.4444580078125">Settings</th><th width="124.625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Text</td><td align="center"><code>text</code></td><td>The label that appears on the button.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>Destination URL the button will link to.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Visual style of the button: <code>Primary</code>, <code>Secondary</code>, <code>Black</code>, or <code>White</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Button size options: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Button appearance: <code>Solid</code> (filled), <code>Outline</code> (border only), or <code>Text</code> (no border).</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>If checked, a right-pointing arrow icon appears next to the text.</td></tr><tr><td>Full-width</td><td align="center"><code>checkbox</code></td><td>Makes the button span the full width of its container.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Padding below the section.</td></tr></tbody></table>

### Side by side buttons

Adds two CTAs side by side, usually **Primary** and **Secondary** actions.

<table><thead><tr><th width="237.6328125">Settings</th><th width="138.0494384765625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Primary/Secondary buttons</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Label displayed on the primary/secondary buttons.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>URL the primary/secondary buttons links to.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Button color: <code>Primary</code>, <code>Secondary</code>, <code>Black</code>, or <code>White</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Button size: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Visual style: <code>Solid</code>, <code>Outline</code>, or <code>Text</code>.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>If checked, a right-arrow icon is shown on the buttons.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Padding below the section.</td></tr></tbody></table>


# Video

A powerful all-in-one video section for banners and building attention-grabbing promotions

The **Video** section lets you showcase a fullscreen or banner-style video with optional heading, text, button, and color overlays.

<figure><img src="/files/Q03M5rDpNXHxcgsBL8x5" alt="Gif Showcasing the design of the video section"><figcaption></figcaption></figure>

It supports autoplay background video or a popup playback mode, ensuring flexible storytelling and branding.

### YouTube and Vimeo

YouTube and Vimeo videos can only be displayed as **Popup** videos. The reason is, Shopify can't control the ads and linked videos that YouTube or Vimeo will display in the video. The result is a very unprofessional background section.&#x20;

If you need to use a YouTube or Vimeo video, we have a couple of recommendations:

* To use as a background video, download the YouTube or Vimeo video and convert it to an MP4 or MOV format, then you can simply add it to your Shopify library.
* For a popup video, you can add the YouTube or Vimeo URL in the Popup section. Use a branded image or a still frame from the video to represent the video.&#x20;

### Section settings

<table><thead><tr><th width="210.42791748046875">Settings</th><th width="172.2664794921875" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Content</strong></td><td align="center"></td><td></td></tr><tr><td>Video</td><td align="center"><code>video</code></td><td>Upload a local MP4 or MOV file to play as the main video.</td></tr><tr><td><strong>Popup</strong></td><td align="center"></td><td></td></tr><tr><td>Enable popup</td><td align="center"><code>checkbox</code></td><td>Enables the video popup overlay functionality.</td></tr><tr><td>MP4/MOV</td><td align="center"><code>video</code></td><td>Upload a secondary video to be used in the popup.</td></tr><tr><td>Youtube/Vimeo link</td><td align="center"><code>video_url</code></td><td>Add a link to a YouTube or Vimeo video for popup. Accepts only these two sources.</td></tr><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Title text displayed over the video.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Choose <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code> for the heading text.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Rich text editor to input supporting content.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Sets paragraph text size. Applies only when content is set as a paragraph:<code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Text alignment</td><td align="center"><code>select</code></td><td>Aligns text vertically and horizontally over the video.</td></tr><tr><td><strong>Button</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Label for the CTA button. Leave blank to make entire image clickable.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>URL the button should link to.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Choose button color: <code>Black</code>, <code>White</code>, <code>Primary</code>, or <code>Secondary</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Choose button size: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Choose button style: <code>Solid</code>, <code>Outline</code>, or <code>Text</code>.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Display an arrow icon inside the button.</td></tr><tr><td><strong>Desktop</strong></td><td align="center"></td><td></td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Fallback image if video fails to load (Recommended: 3200x1200px).</td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Defines height of section: <code>Full screen height</code>, <code>3/4 of screen</code>, <code>750 px</code>, etc.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Fallback image for mobile (Recommended: 1200x1600px).</td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Sets mobile height in screen ratio or fixed pixels.</td></tr><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Set section to <code>Full width</code> or <code>Full width padded</code>.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Choose a predefined color scheme.</td></tr><tr><td>Show text background</td><td align="center"><code>checkbox</code></td><td>Adds a background behind the text for better legibility.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Manually select text color.</td></tr><tr><td>Overlay</td><td align="center"><code>select</code></td><td>Adds an overlay: <code>Disabled</code>, <code>Opacity</code>, or <code>Text underlay</code>.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top</td><td align="center"><code>range</code></td><td>Add top padding.</td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Add bottom padding.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>Define heading semantic tag: <code>H1</code>-<code>H6</code> or <code>Automatic</code>.</td></tr></tbody></table>

When enabled, the popup play button uses the same style as the call-to-action button. Adding a popup video can help display longer video content:&#x20;

<figure><img src="/files/Q8tjwqOgkdMNdPkIJUOZ" alt=""><figcaption><p><strong>Popup play button is configured using the button settings.</strong></p></figcaption></figure>

{% hint style="info" %}
To display a circle-shaped play button, use the **Theme settings -> Buttons** and choose the "**Pill**" style. The square version is a regular rectangular shape, and the rounded version has rounded corners.&#x20;
{% endhint %}

### Video Overview

How to use the video section. This video demonstrates how to use the settings and options, plus details about the cover image and video types for looping and YouTube videos:

{% embed url="<https://www.loom.com/share/e846f226cf8f458f9aa49dfc69c53e10?sid=5cdeea90-a6ad-4a12-ad57-2bcf6efc9fa4>" %}
**Video walkthough of the video section in Broadcast**
{% endembed %}


# Collections

### Theme sections

Click to view details of individual sections included with Broadcast:

<table data-view="cards"><thead><tr><th></th><th></th><th data-type="rating" data-max="5"></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Collection links: spotlight</strong></td><td>Showcase a curated set of collections</td><td>null</td><td><a href="/files/bj4Fkb1ULx81olNi8veS">/files/bj4Fkb1ULx81olNi8veS</a></td><td><a href="/pages/sArp2RwAXiaYsA4sOCOJ">/pages/sArp2RwAXiaYsA4sOCOJ</a></td></tr><tr><td><strong>Collection list</strong></td><td>Display a selection of collections with images and links</td><td>null</td><td><a href="/files/stakaD8zSYclZrw3TttH">/files/stakaD8zSYclZrw3TttH</a></td><td><a href="/pages/DeRCPaKAhikgRNprqE4a">/pages/DeRCPaKAhikgRNprqE4a</a></td></tr><tr><td><strong>Collection list hover</strong></td><td>An elegant way to showcase multiple collections</td><td>null</td><td><a href="/files/0KXCdBIDeF6A5Xd0Rdmn">/files/0KXCdBIDeF6A5Xd0Rdmn</a></td><td><a href="/pages/upuVU5b8AInRg01ud4Wy">/pages/upuVU5b8AInRg01ud4Wy</a></td></tr><tr><td><strong>Featured collection</strong></td><td>Showcase products from a select collection</td><td>null</td><td><a href="/files/76JcB1RvMW1xYFTJihLi">/files/76JcB1RvMW1xYFTJihLi</a></td><td><a href="/pages/NvXtcwMP1cAfynUqsklm">/pages/NvXtcwMP1cAfynUqsklm</a></td></tr><tr><td><strong>Tab collections</strong></td><td>Showcase products from multiple collections</td><td>null</td><td><a href="/files/20eml5fxdONXZ2FFTgEa">/files/20eml5fxdONXZ2FFTgEa</a></td><td><a href="/pages/O00PE0hE2e09AKCaFGfb">/pages/O00PE0hE2e09AKCaFGfb</a></td></tr></tbody></table>


# Collection links: spotlight

The spotlight section is designed to showcase featured collections with customizable layout, typography, colors, and mobile-friendly buttons. It is ideal for highlighting multiple collections in a visually appealing way.

<figure><img src="/files/btvQpdlnpb3gYHpkgf9L" alt="Gif Showcasing the design of the collection links spotlight section"><figcaption></figcaption></figure>

###

<table><thead><tr><th width="217.4852294921875">Settings</th><th width="150.13885498046875" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Main title for the section.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Adjusts the font size of the section heading: <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Descriptive text to provide context or brand messaging.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Font size for paragraph text (applies only to paragraph content): <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Layout</td><td align="center"><code>select</code></td><td>Determines the placement of collections and image: <code>Collections left, image right</code> and  reversed is <code>Image left, collections right</code>.</td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Section width options: <code>Full width</code>, <code>Full width padded</code>, or <code>Normal</code>.</td></tr><tr><td><strong>Desktop</strong></td><td align="center"></td><td></td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Height of the section on desktop: <code>150px</code>, <code>⅓ of screen</code>, <code>Full screen height</code>, end etc.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Height of the section on mobile: <code>150px</code>, <code>⅓ of screen</code>, <code>Full screen height</code>, end etc.</td></tr><tr><td>Reverse block placement</td><td align="center"><code>checkbox</code></td><td>Flips the placement of image and collections for variation.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Apply a color scheme to the section.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top/Bottom</td><td align="center"><code>range</code></td><td>Adjust vertical spacing above and below the section.</td></tr></tbody></table>


# Collection

Each block represents a featured collection, allowing you to customize its title, image, button, and background color for a visually engaging spotlight layout.

{% hint style="warning" %}
**Limit:** Up to **5 blocks** per section.
{% endhint %}

<table><thead><tr><th width="160.38885498046875">Settings</th><th width="147.29681396484375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Collection</td><td align="center"><code>collection</code></td><td>Select the collection to display.</td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Optional image to represent the collection.</td></tr><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Title for the collection block.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Font size for the collection heading: <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td><strong>Button</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Text for the button (mobile only).</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>Destination link for the button.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Button color options: <code>Primary</code>, <code>Secondary</code>, <code>White</code>, or <code>Black</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Button size options: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Button style options: <code>Solid</code>, <code>Outline</code>, or <code>Text</code>.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Option to display an arrow icon in the button.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Background color</td><td align="center"><code>color</code></td><td>Background color for the collection block.</td></tr></tbody></table>


# Collection list

Display a selection of collections with images and links

Drive more sales by guiding customers to your featured collections. The **Collection list** section in Broadcast lets you create organized displays that simplify shoppers navigating and finding their desired products.

<figure><img src="/files/stakaD8zSYclZrw3TttH" alt="Image portraying the design of the collection list section"><figcaption></figcaption></figure>

### Section settings

Choose from grid or slider layouts to showcase your best collections and enhance customer engagement.

<div><figure><img src="/files/0IBAvTTm8IybK1LZE4UK" alt="Gif Showcasing the design of the collection list section"><figcaption><p><strong>Grid layout</strong></p></figcaption></figure> <figure><img src="/files/Icm1jxcMGF5ujS5xFC4e" alt="Gif Showcasing the design of the collection list section"><figcaption><p><strong>Slider layout</strong></p></figcaption></figure></div>

<table><thead><tr><th width="171.2222900390625">Settings</th><th width="143.8984375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Title text for the section.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Choose the font size of the heading: <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or<code>Extra large</code>.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Optional subheading or description text below the heading.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Size of the text: <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or<code>Extra large</code> (only applies to Paragraph content in the Text field).</td></tr><tr><td><strong>Button</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Button label text.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>URL the button links to.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Choose the button color: <code>Black</code>, <code>White</code>, <code>Primary</code>, or <code>Secondary</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Button size: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Button style: <code>Solid</code>, <code>Outline</code>, or <code>Text</code>.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Enable to display an arrow icon in the button.</td></tr><tr><td><strong>Images</strong></td><td align="center"></td><td></td></tr><tr><td>Image aspect ratio</td><td align="center"><code>range</code></td><td>Ratio of image width to height.</td></tr><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Section width: <code>Full width</code>, <code>Full width padded</code>, or <code>Normal</code>.</td></tr><tr><td>Layout</td><td align="center"><code>select</code></td><td>Display layout: <code>Grid</code> or <code>Slider</code>.</td></tr><tr><td><strong>Grid</strong></td><td align="center"></td><td></td></tr><tr><td>Collections per row</td><td align="center"><code>range</code></td><td>Number of collections shown per row.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Layout</td><td align="center"><code>select</code></td><td>Mobile layout: <code>1 collections per row</code>, <code>2 collections per row</code>, or <code>slider</code>.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Choose the visual color scheme for the section.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top</td><td align="center"><code>range</code></td><td>Padding above the section.</td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Padding below the section.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>Choose an HTML heading tag: <code>H1</code>-<code>H6</code> or <code>Automatic</code>, for SEO structure.</td></tr></tbody></table>

### Video Overview

This short video demonstrates some of the settings and options for the **Collection list** section:

{% embed url="<https://www.loom.com/share/5b6375f143d74284b2e4a63525768375?sid=60775ed7-0586-4e7e-a94b-7767ebc902c8>" %}
**Video walkthrough of the collection list section**
{% endembed %}


# Collection

Add blocks to build out your list of collections.

<table><thead><tr><th width="112.33331298828125">Settings</th><th width="154.77777099609375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Collection</td><td align="center"><code>collection</code></td><td>Select the collection to display.</td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Override the collection image. Recommended: 1400×1400px .jpg.</td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Optional custom label to display in place of the collection’s title.</td></tr></tbody></table>


# Collection text overlay

The **Collection text overlay** block allows you to feature a collection with custom imagery and layered text. This layout is perfect for creating visually engaging callouts or banners within a Collection List section.

<table><thead><tr><th width="201.8775634765625">Settings</th><th width="173.47308349609375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Collection</td><td align="center"><code>collection</code></td><td>Select a collection to feature.</td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Custom image override for the collection. Recommended: 1400×1400px.</td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Text overlaid on the image.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Adjust heading size: <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Text alignment</td><td align="center"><code>select</code></td><td>Choose overlay text position: <code>Center</code>, <code>Bottom right</code>, <code>Left</code> etc.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Show text background</td><td align="center"><code>checkbox</code></td><td>Adds a background behind the overlay text.</td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Background color for text area. Supports transparency.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Color of overlay text. Supports transparency.</td></tr><tr><td>Overlay type</td><td align="center"><code>select</code></td><td>Choose between: <code>Disabled</code>, <code>Opacity overlay</code>, or <code>Text underlay</code>.</td></tr></tbody></table>


# Collection list hover

An animated collection list with full sized images and large text

Transform your store's collection promotion with a visually captivating presentation of images and prominent text.

<figure><img src="/files/8XVadb2gqhUJ3ms5HVR1" alt="Gif showcasing the design of the Collection list hover section"><figcaption></figcaption></figure>

Our dynamic format will keep your customers engaged as they browse through the full-sized images to discover collections within your store.

### Section settings

<table><thead><tr><th width="203.4444580078125">Settings</th><th width="140.888916015625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Font size of the heading. Options from <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or<code>Extra large</code>.</td></tr><tr><td><strong>Desktop</strong></td><td align="center"></td><td></td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Controls the section height on desktop. Options include screen-based and fixed pixel heights.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Controls the section height on mobile. Options mirror desktop values with mobile variants.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Choose the visual color scheme for the section.</td></tr><tr><td>Overlay type</td><td align="center"><code>select</code></td><td>Adds an overlay: <code>Disabled</code>, <code>Opacity</code>, or <code>Text underlay</code>.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top</td><td align="center"><code>range</code></td><td>Padding above the section..</td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Padding below the section.</td></tr></tbody></table>

### Video Overview

This short video demonstrates some of the settings and options for the **Collection list hover** section:

{% embed url="<https://www.loom.com/share/2d795df1e4af40079f164a131b73c190?sid=5f59c49c-5f8b-4707-8ee2-1723f5c8d733>" %}
**Video walkthrough - Settings and options**
{% endembed %}


# Collection

Display a featured collection with an optional custom image and heading.

<table><thead><tr><th width="111.22222900390625">Settings</th><th width="144.0677490234375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Collection</td><td align="center"><code>collection</code></td><td>Select a Shopify collection to feature.</td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Upload or select a custom image for the collection. Recommended: 3200×1200px .jpg.</td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Optional heading to overlay on the image (overrides collection title if set).</td></tr></tbody></table>


# Featured collection

Display products from any of your collections in a grid or slider

The **Featured Collection** section displays selected products from a collection on your homepage or other eligible pages.&#x20;

<figure><img src="/files/zTthc73OFo8clZhsMnV1" alt="Gif Showcasing the design of the featured collection section"><figcaption></figcaption></figure>

You can customize layout, typography, buttons, and colors to create a visually appealing and conversion-friendly showcase. It supports different grid formats for desktop and mobile, and offers control over heading style, padding, and SEO semantics.

<table><thead><tr><th width="174.5494384765625">Settings</th><th width="143.52337646484375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Content</strong></td><td align="center"></td><td></td></tr><tr><td>Collection</td><td align="center"><code>collection</code></td><td>Select the collection to be featured.</td></tr><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Main heading text.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Choose heading size from <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code> or <code>Extra large</code>.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Rich text field to display a short description.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Controls font size for the description. Applies to paragraphs only: <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code> or <code>Extra large</code>.</td></tr><tr><td>Text alignment</td><td align="center"><code>select</code></td><td>Aligns heading and description. Options: <code>In-line</code>, <code>Center</code>, or <code>Left</code>.</td></tr><tr><td><strong>Button</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Text shown on the button.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>URL the button links to.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Choose button color: <code>Black</code>, <code>White</code>, <code>Primary</code>, or <code>Secondary</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Choose size: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Choose style: <code>Solid</code>, <code>Outline</code>, or <code>Text</code>.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Toggle to display an arrow icon next to the button.</td></tr><tr><td><strong>Desktop</strong></td><td align="center"></td><td></td></tr><tr><td>Product grid layout</td><td align="center"><code>select</code></td><td>Choose between a <code>Grid</code> or <code>Slider</code> layout for desktop.</td></tr><tr><td>Products per row</td><td align="center"><code>range</code></td><td>Number of products shown in each row (2-6, grid layout only).</td></tr><tr><td>Number of rows</td><td align="center"><code>range</code></td><td>Total rows of products displayed (1-8, grid layout only).</td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Controls container width: <code>Normal</code> or <code>Full width padded</code> (grid only).</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Product grid layout</td><td align="center"><code>select</code></td><td>Layout options for mobile: <code>1 item per row</code>, <code>2 items per row</code>, or <code>Slider</code>. </td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Select a predefined color scheme.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top</td><td align="center"><code>range</code></td><td>Controls spacing above the section.</td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Controls spacing below the section.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>Sets HTML heading level: <code>H1</code>-<code>H6</code> or <code>Automatic</code>to improve your SEO structure.</td></tr></tbody></table>

### Video Overview

This video demonstrates the layout options for desktop and mobile. Plus, all the section settings for the Featured collection:&#x20;

{% embed url="<https://www.loom.com/share/4f8ed3bd660e49fa8106425649ea4b6d?sid=31635f64-bcba-47eb-86df-a7f575401557>" %}
**Video walkthrough for the Featured collection section**
{% endembed %}

### See also

Broadcast includes a tabbed section to display multiple collections within a section:

{% content-ref url="/pages/O00PE0hE2e09AKCaFGfb" %}
[Tab collections](/sections/sections/collections/tab-collections)
{% endcontent-ref %}


# Tab collections

Display products from multiple collections with tabbed navigation

Broadcast's tab collection enables you to showcase multiple collections in one section. It is the most comprehensive collection section with a wide range of features and options.

<figure><img src="/files/vjQUCjaUisGbFWLkbpBz" alt="Gif Showcasing the Tab collections section"><figcaption><p><strong>Shoppers can use the Quick Add feature and also cycle through different collections.</strong></p></figcaption></figure>

Each collection tab can display a promotion with a call to action.

<div><figure><img src="/files/z0qojhK0xdU2WfDKdO8j" alt="Showcasing the design of the tab collections section"><figcaption><p><strong>Grid layout with promotional image.</strong></p></figcaption></figure> <figure><img src="/files/QBTOXuc61aUhRBwnM5Bx" alt="Showcasing the design of the tab collections section"><figcaption><p><strong>Slider layout with promotional image.</strong></p></figcaption></figure></div>

### Section settings

Display products from multiple collections in one section. Include a promotional image with messaging and branding to draw customers to your products.&#x20;

<table><thead><tr><th width="178.56597900390625">Settings</th><th width="148.85675048828125" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Show product count</td><td align="center"><code>checkbox</code></td><td>Displays product count if block-level featured image is enabled.</td></tr><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Section title.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Font size for heading: <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Optional text content below heading.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Font size for the text field, applies only when formatted as a paragraph:  <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Layout</td><td align="center"><code>select</code></td><td>Aligns heading/text layout: <code>In-line</code>, <code>Center</code>, or <code>Left</code>.</td></tr><tr><td><strong>Desktop</strong></td><td align="center"></td><td></td></tr><tr><td>Layout</td><td align="center"><code>select</code></td><td>Choose between <code>Grid</code> or <code>Slider</code> layout on desktop.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Layout</td><td align="center"><code>select</code></td><td><code>Number of items per row</code> or <code>slider</code> on mobile.</td></tr><tr><td><strong>Slider</strong></td><td align="center"></td><td></td></tr><tr><td>Product limit</td><td align="center"><code>range</code></td><td>Number of products shown in slider.</td></tr><tr><td><strong>Grid</strong></td><td align="center"></td><td></td></tr><tr><td>Products per row</td><td align="center"><code>range</code></td><td>Number of products per row.</td></tr><tr><td>Number of rows</td><td align="center"><code>range</code></td><td>Number of visible rows in grid.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Select a color scheme.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top</td><td align="center"><code>range</code></td><td>Top spacing in pixels.</td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Bottom spacing in pixels.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>Controls the semantic HTML tag for heading: <code>H1</code> - <code>H6</code>, or <code>Automatic</code>.</td></tr></tbody></table>

### Video Overview

This video demonstrates the tab layout options and reviews all the section and block options:

{% embed url="<https://www.loom.com/share/44a03ff710234963bd2703bafd0fe79c?sid=a5ea0e31-ee7e-41ac-82b0-e7350f78f622>" %}
**Video walkthrough of the features in the Tab collections section**
{% endembed %}

### See also

Broadcast includes a single-collection section with similar features for quickly displaying one collection:

{% content-ref url="/pages/NvXtcwMP1cAfynUqsklm" %}
[Featured collection](/sections/sections/collections/featured-collection)
{% endcontent-ref %}


# Collection

Display a collection with a heading, optional featured image with overlay, description, and a customizable button.

<table><thead><tr><th width="220.11114501953125">Settings</th><th width="145.8819580078125" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Collection</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Title of the collection tab.</td></tr><tr><td>Collection</td><td align="center"><code>collection</code></td><td>Choose the Shopify collection to feature.</td></tr><tr><td><strong>Featured image</strong></td><td align="center"></td><td></td></tr><tr><td>Show image</td><td align="center"><code>checkbox</code></td><td>Enables or disables featured image.</td></tr><tr><td>Align with product images</td><td align="center"><code>checkbox</code></td><td>Aligns image position with products.</td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Upload custom image (recommended: 1400x1400px JPG).</td></tr><tr><td>Overlay type</td><td align="center"><code>select</code></td><td>Adds an overlay: <code>Disabled</code>, <code>Opacity</code>, or <code>Text underlay</code>.</td></tr><tr><td><strong>Content</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Optional description or message.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Color of the overlay or content text.</td></tr><tr><td><strong>Button</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Button text (leave blank to make image clickable).</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>Button or image destination URL.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Button color style: <code>Primary</code>, <code>Secondary</code>, <code>Black</code>, or <code>White</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Button size: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Button style: <code>Solid</code>, <code>Outline</code>, or <code>Text</code>.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Adds an arrow to the button.</td></tr></tbody></table>


# Forms

### Theme sections

Click to view details of individual sections included with Broadcast:

<table data-view="cards"><thead><tr><th></th><th></th><th data-type="rating" data-max="5"></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Contact form</strong></td><td>Give your customers a way to get in touch</td><td>null</td><td><a href="/files/gGHKOpZ8KZSApt8Ri74j">/files/gGHKOpZ8KZSApt8Ri74j</a></td><td><a href="/pages/yCMAwWbvkYS7mWUZap0v">/pages/yCMAwWbvkYS7mWUZap0v</a></td></tr><tr><td><strong>Newsletter</strong></td><td>Give your customers a way to stay in touch</td><td>null</td><td><a href="/files/yEClAMcZneaXKpCtfAN2">/files/yEClAMcZneaXKpCtfAN2</a></td><td><a href="/pages/B3dmZu3l4ZJ5KaGBlW9i">/pages/B3dmZu3l4ZJ5KaGBlW9i</a></td></tr></tbody></table>


# Contact form

Add a fully-customized contact form to your store

Broadcast includes a full-featured section for your customers to contact you. Easily add form blocks to build a simple or complex contact form and place it anywhere you like. The section can be added to most parts of your store.&#x20;

<figure><img src="/files/4RIbLhwfrdJQ48R9qIcv" alt=""><figcaption><p><strong>Contact form section - Add to pages, the homepage or other areas</strong></p></figcaption></figure>

### Section settings

<table><thead><tr><th width="201.22222900390625">Settings</th><th width="151.263916015625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Typography</strong>
</td><td align="center"></td><td></td></tr><tr><td>Heading
</td><td align="center"><code>text</code></td><td>Title of the form.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Size of the form heading:<code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Show hCAPTCHA terms</td><td align="center"><code>checkbox</code></td><td>​Toggles the display of hCAPTCHA legal terms, recommended for spam protection.</td></tr><tr><td><strong>Layout</strong>
</td><td align="center"></td><td></td></tr><tr><td>Width
</td><td align="center"><code>select</code>
</td><td>Sets section width: <code>Normal</code> or <code>Narrow</code>.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>
Color scheme</td><td align="center"><code>color_scheme</code></td><td>Selects a color scheme from defined theme options.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top</td><td align="center"><code>range</code></td><td>Top padding in pixels.</td></tr><tr><td>Bottom
</td><td align="center"><code>range</code>
</td><td>Bottom padding in pixels.</td></tr><tr><td><strong>Advanced</strong>
</td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code>
</td><td>Sets HTML heading level: <code>H1</code>-<code>H6</code> or <code>Automatic</code> to improve your SEO structure.</td></tr></tbody></table>

### Video Overview

This video demonstrates some of the settings and options, including contact form blocks:

{% embed url="<https://www.loom.com/share/8854c59aeb7143efb7a349aa2a42331b?sid=e88dd041-e278-4f89-932a-f36bf592ca73>" %}
**Video walkthrough for the Contact form section**
{% endembed %}


# Email

Adds an email input field with a label and the option to make it required.

<figure><img src="/files/XEqcWv8nsOg1StsBF0xX" alt="Email field for contact form"><figcaption></figcaption></figure>

<table><thead><tr><th width="110.111083984375">Settings</th><th width="114.6666259765625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Label
</td><td align="center"><code>text</code>
</td><td>Label for email input field.</td></tr><tr><td>Required
</td><td align="center"><code>checkbox</code>
</td><td>If checked, email field must be filled.</td></tr></tbody></table>


# Message

Adds a message textarea field with a label and the option to make it required.

<figure><img src="/files/8wLvOy7K894TWfXTpRpa" alt="Message field for describing the inquiry"><figcaption></figcaption></figure>

<table><thead><tr><th width="97.888916015625">Settings</th><th width="135" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Label
</td><td align="center"><code>textarea</code>
</td><td>Label for message input field.</td></tr><tr><td>Required
</td><td align="center"><code>checkbox</code>
</td><td>If checked, message is mandatory.</td></tr></tbody></table>


# Text line

Adds a single-line text input field with customizable label and the option to make it required.

<figure><img src="/files/vn4mEFPyHnBZTkATZYsp" alt="Single line text for information for example name"><figcaption></figcaption></figure>

<table><thead><tr><th width="101.22222900390625">Settings</th><th width="128.5555419921875" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Label
</td><td align="center"><code>text</code>
</td><td>Single-line input, e.g., for name.</td></tr><tr><td>Required
</td><td align="center"><code>checkbox</code>
</td><td>
Toggles whether the field is mandatory.</td></tr></tbody></table>


# Text area

Adds a multi-line textarea input with customizable label and the option to make it required.

<figure><img src="/files/6sAKV93G4s0RdTeEfv0L" alt="Additional message field"><figcaption></figcaption></figure>

<table><thead><tr><th width="102.33331298828125">Settings</th><th width="129.77777099609375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Label
</td><td align="center"><code>textarea</code>
</td><td>Multi-line input field for extended text.</td></tr><tr><td>Required
</td><td align="center"><code>checkbox</code>
</td><td>If checked, field is required.</td></tr></tbody></table>


# Telephone

Adds a telephone input field with a label and the option to make it required.

<figure><img src="/files/Cbava9NoLWjPLLQ0k71X" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="93.4444580078125">Settings</th><th width="111.4444580078125" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Label
</td><td align="center"><code>text</code>
</td><td>Input for phone number.</td></tr><tr><td>Required
</td><td align="center"><code>checkbox</code>
</td><td>
<br>Indicates whether the phone number is required.</td></tr></tbody></table>


# Heading

Adds a heading to better structure your contact form content for SEO.

<figure><img src="/files/nJ9GgEZomEvplntgogRG" alt="Heading title for the contact form"><figcaption></figcaption></figure>

<table><thead><tr><th width="98.99993896484375">Settings</th><th width="100.6666259765625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Heading
</td><td align="center"><code>text</code>
</td><td>Adds a heading label within the form layout.</td></tr></tbody></table>


# Spacer

Adds a horizontal line to divide content for better structure.

<figure><img src="/files/UZAYpmfY50gu1bfBMAaN" alt="Horizontal line to divide content"><figcaption></figcaption></figure>

<table><thead><tr><th width="102.33331298828125">Settings</th><th width="145.3333740234375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Show line</td><td align="center"><code>checkbox</code>
</td><td>Toggle on/off for the divider</td></tr></tbody></table>


# Single checkbox

Adds a single checkbox with customizable label and the option to make it required.

<figure><img src="/files/w3RiZGgGxl0osY9gry8M" alt="single checkbox for different purposes"><figcaption></figcaption></figure>

<table><thead><tr><th width="109">Settings</th><th width="136.77777099609375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Label
</td><td align="center"><code>text</code>
</td><td>Checkbox label, e.g., 'This is urgent'.</td></tr><tr><td>Required
</td><td align="center"><code>checkbox</code>
</td><td>Field must be checked before submission.</td></tr></tbody></table>


# Select dropdown

Adds a dropdown selector with up to six customizable options and the option to make it required.

<figure><img src="/files/w0l3jE6561zOcUr4ma7a" alt="Dropdown for different options selection"><figcaption></figcaption></figure>

<table><thead><tr><th width="150.111083984375">Settings</th><th width="122.4444580078125" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Heading
</td><td align="center"><code>text</code></td><td>Dropdown label shown to users.</td></tr><tr><td>Required
</td><td align="center"><code>checkbox</code>
</td><td>If enabled, a choice must be made.</td></tr><tr><td>Option one - six</td><td align="center"><code>text</code></td><td>
Labels for up to six selectable options.</td></tr></tbody></table>


# Radio buttons

Adds a set of radio buttons with up to six customizable options and the option to make them required.

<figure><img src="/files/3DYo3e7Z7EQxVu3P6qQX" alt="Radio buttons for different option selection"><figcaption></figcaption></figure>

<table><thead><tr><th width="145.6666259765625">Settings</th><th width="117.6666259765625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Heading
</td><td align="center"><code>text</code>
</td><td>Label for group of radio button options.</td></tr><tr><td>Required
</td><td align="center"><code>checkbox</code>
</td><td>Ensures one option is selected.</td></tr><tr><td>Option one - six</td><td align="center"><code>text</code>
</td><td>Radio button labels (up to 6). Blank labels are hidden.</td></tr></tbody></table>


# Newsletter

Add a quick and simple newsletter sign-up form to any page

Broadcast provides various methods for adding a newsletter sign-up option to your shop, including the footer and blocks in various sections. This section allows you to promote your newsletter on any page easily.&#x20;

<figure><img src="/files/tZtfsvF3dbpNwXPp9k9R" alt=""><figcaption></figcaption></figure>

The newsletter form collects the customer's email address and tags them in your customer base with "Accepts Marketing." When integrated with newsletter apps, you can target these customers with updates. New subscribers will be seen as new Customers in your Shopify admin tab.

### Section settings

<table><thead><tr><th width="126.66497802734375">Settings</th><th width="145.42535400390625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Controls the width of the section. Options: <code>Full width</code>, <code>Full width padded</code>, or <code>Normal</code>.</td></tr><tr><td><strong>Desktop</strong></td><td align="center"></td><td></td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Sets section height on desktop. Multiple screen heights and fixed pixel options available.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Sets section height on mobile. Similar options to desktop.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Choose from predefined color schemes.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top/Bottom</td><td align="center"><code>range</code></td><td>Sets top/bottom padding in pixels.</td></tr></tbody></table>

### Sending Newsletters

A third-party app from the Shopify App Store will be required for automated emails and the creation of custom mailing lists. The newsletter sign-up forms in all Shopify Themes can only collect the customer's email address and name. Apps help you build newsletters, add mailing lists, and automate sending messages to customers who have signed up.

Shopify email marketing apps can be found here:

{% embed url="<https://apps.shopify.com/categories/marketing-and-conversion-direct-marketing>" %}
Shopify App Store
{% endembed %}

Or search with this query:

{% embed url="<https://apps.shopify.com/search?q=email+marketing>" %}
Shopify App Store
{% endembed %}


# Image

Displays an image with optional heading, text, overlay, alignment, button, and customizable colors.

<figure><img src="/files/RhhBPk0AKocZ5GH9Xr7J" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
You can only choose two blocks to be shown at a time.
{% endhint %}

<table><thead><tr><th width="203.24908447265625">Settings</th><th width="157.93316650390625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Upload image (2000×1400px .jpg recommended).</td></tr><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Main headline text.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Controls heading font size. Options: <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Rich text content. Applies Text size only when set to Paragraph.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Sets body font size: <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Block alignment</td><td align="center"><code>select</code></td><td>Aligns the entire content block: <code>Top Left</code>, <code>Bottom right</code>, <code>Absolute center</code>, etc.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Show text background</td><td align="center"><code>checkbox</code></td><td>Displays a background color behind text.</td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Override for background color.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Override for text color.</td></tr><tr><td>Overlay type</td><td align="center"><code>select</code></td><td>Adds an overlay: <code>Disabled</code>, <code>Opacity</code>, or <code>Text underlay</code>.</td></tr><tr><td><strong>Button</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Button label. Leave blank to make the entire image clickable.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>URL for the button or image.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Button color style: <code>Black</code>, <code>White</code>, <code>Primary</code>, or <code>Secondary</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Button size: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Visual style: <code>Solid</code>, <code>Outline</code>, or <code>Text</code>.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Adds an arrow icon to the button.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>Sets HTML tag for heading: <code>Automatic</code>, or <code>H1</code> - <code>H6</code>.</td></tr></tbody></table>


# Text

Shows a heading, subheading, and rich text with options for font size, alignment, buttons, social icons, and background colors.

<figure><img src="/files/C43PXOTopImNB5YjcPS8" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
You can only choose two blocks to be shown at a time.
{% endhint %}

<table><thead><tr><th width="165.41497802734375">Settings</th><th width="126.525146484375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Subheading</td><td align="center"><code>text</code></td><td>Smaller text above heading.</td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Main heading.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Controls heading font size: <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Text block content with default sample text.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Font size for text content:<code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Columns</td><td align="center"><code>range</code></td><td>Number of text columns (1-3). Desktop only.</td></tr><tr><td>Text alignment</td><td align="center"><code>select</code></td><td><code>Left</code> or <code>Centered</code> align the text.</td></tr><tr><td><strong>Button</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Button label.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>Button URL.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Button color style: <code>Black</code>, <code>White</code>, <code>Primary</code>, or <code>Secondary</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Button size: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Visual style: <code>Solid</code>, <code>Outline</code>, or <code>Text</code>.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Adds arrow icon to button.</td></tr><tr><td><strong>Social media icons</strong></td><td align="center"></td><td></td></tr><tr><td>Show social icons</td><td align="center"><code>checkbox</code></td><td>Display social media icons. Editable in Theme Settings.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Override for background color.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Override for text color.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>Sets HTML tag for heading: <code>H1</code>-<code>H6</code> or <code>Automatic</code>.</td></tr></tbody></table>


# Newsletter

Provides a newsletter signup form with heading, subheading, description text, name field option, customizable button, and social icons.

<figure><img src="/files/gT4DOj97aotALlcbfZ0X" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
You can only choose two blocks to be shown at a time.
{% endhint %}

<table><thead><tr><th width="208.66583251953125">Settings</th><th width="127.3203125" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Subheading</td><td align="center"><code>text</code></td><td>Smaller text above heading.</td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Primary headline.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Controls heading font size: <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Rich text content.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Sets font size for text content:<code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Columns</td><td align="center"><code>range</code></td><td>Number of text columns. Desktop only.</td></tr><tr><td>Text alignment</td><td align="center"><code>select</code></td><td>Align <code>Left</code> or <code>Centered</code>.</td></tr><tr><td><strong>Form</strong></td><td align="center"></td><td></td></tr><tr><td>Show name field</td><td align="center"><code>checkbox</code></td><td>Displays an optional name input field.</td></tr><tr><td>Button text</td><td align="center"><code>text</code></td><td>Label for the submit button.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Displays an arrow on the button.</td></tr><tr><td>Show reCAPTCHA terms</td><td align="center"><code>checkbox</code></td><td>Shows reCAPTCHA terms (recommended if spam protection is enabled).</td></tr><tr><td><strong>Button</strong></td><td align="center"></td><td></td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Button color style. Options: <code>Black</code>, <code>White</code>, <code>Primary</code>, or <code>Secondary</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Button size: Options: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Button style: <code>Solid</code>, <code>Outline</code>, or <code>Text</code>.</td></tr><tr><td><strong>Social media icons</strong></td><td align="center"></td><td></td></tr><tr><td>Show social icons</td><td align="center"><code>checkbox</code></td><td>Toggle to show social media icons; editable in Theme Settings.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Custom background color.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Custom text color.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>HTML heading tag for SEO: Options: <code>Automatic</code>, or <code>H1</code>-<code>H6</code>.</td></tr></tbody></table>


# Layout

### Theme sections

Click to view details of individual sections included with Broadcast:

<table data-view="cards"><thead><tr><th></th><th></th><th data-type="rating" data-max="5"></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><strong>Custom code</strong></td><td>Add custom code to your theme or build a custom section</td><td>null</td><td><a href="/files/JpDaRCkugYoUHC8v4N4o">/files/JpDaRCkugYoUHC8v4N4o</a></td><td><a href="/pages/KMxlmOxjbfjfMqPvt5Y1">/pages/KMxlmOxjbfjfMqPvt5Y1</a></td></tr><tr><td><strong>Divider</strong></td><td>Display a horizontal line or separation between sections</td><td>null</td><td><a href="/files/5pj1mdX8cfPPyvLGdx4k">/files/5pj1mdX8cfPPyvLGdx4k</a></td><td><a href="/pages/XhmX0m8KegGwBdeJxx1U">/pages/XhmX0m8KegGwBdeJxx1U</a></td></tr></tbody></table>


# Custom code

Add custom code to your theme or build a custom section

Broadcast includes a custom code section to help you add Shopify App snippets, HTML or other Liquid code to create advanced customizations.

<figure><img src="/files/nmspLEzpe4xGfgTB31Is" alt=""><figcaption><p><strong>Example of a custom H1 heading</strong></p></figcaption></figure>

### Section settings

<table><thead><tr><th width="140.111083984375">Settings</th><th width="145.22222900390625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Custom code</td><td align="center"><code>liquid</code></td><td>Add custom Liquid code, app snippets, or embed tags. Advanced users only.</td></tr><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Controls the content width. Options: <code>Full width</code>, <code>Full width padded</code>, <code>Normal</code>, or <code>Narrow</code>.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Apply a global color scheme to the section background.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top</td><td align="center"><code>range</code></td><td>Padding above the section.</td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Padding below the section.</td></tr></tbody></table>

<figure><img src="/files/GtzmHR6lsrZknBdfn6KH" alt=""><figcaption></figcaption></figure>

### Video Overview

This video demonstrates adding custom HTML, Liquid code, and the Custom CSS feature:

{% embed url="<https://www.loom.com/share/0b676061ddeb44b0b034e30d9ef7db17?sid=ca719a8d-abb3-4042-9111-2fa9ffd3dd3f>" %}
**Video walkthrough for the Custom code section**
{% endembed %}


# Divider

Display a horizontal line or separation between sections

Create custom dividers to style your pages with Broadcast's divider section.

<figure><img src="/files/md3R3qVkPkBYH8Xw4wzJ" alt=""><figcaption><p><strong>Dividers added above and below the press section</strong></p></figcaption></figure>

### Section settings

<table><thead><tr><th width="131.52166748046875">Settings</th><th width="144.423583984375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Show line</td><td align="center"><code>checkbox</code></td><td>Toggle to display or hide the horizontal divider line.</td></tr><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Controls the container width of the divider section: <code>Full width</code>, <code>Full width padded</code>, <code>Normal</code>, or <code>Narrow</code>.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Apply a predefined color scheme for background and text.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top</td><td align="center"><code>range</code></td><td>Add space above the divider.</td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Add space below the divider.</td></tr></tbody></table>

<figure><img src="/files/q4Lxtp5vbagw6tcGuxIa" alt=""><figcaption></figcaption></figure>

### Video Overview

This video demonstrates different styles and designs that can be created with the divider section:

{% embed url="<https://www.loom.com/share/1fc9384b8f3e425ca3a30aaca02e4559?sid=83476375-62a6-4c3d-b4e1-9d49cd1ed94f>" %}
**Video walkthrough for the Divider section**
{% endembed %}


# Products

### Theme sections

Click to view details of individual sections included with Broadcast:

<table data-view="cards"><thead><tr><th></th><th></th><th data-type="rating" data-max="5"></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Featured product</strong></td><td>Bring a product gallery to your store pages.</td><td>null</td><td><a href="/files/vB0DpO4NGLFJcx8sEpSV">/files/vB0DpO4NGLFJcx8sEpSV</a></td><td><a href="/pages/Zpakwt6hgzUAVtqddTqu">/pages/Zpakwt6hgzUAVtqddTqu</a></td></tr><tr><td><strong>Image with product</strong></td><td>Combines a powerful visual with product highlights and call-to-action options, making it ideal for impactful storytelling and promotional campaigns.</td><td>null</td><td><a href="/files/LsekkvxtVIbusozoWyHh">/files/LsekkvxtVIbusozoWyHh</a></td><td><a href="/pages/Zudt33uHCZkrwYZAJN77">/pages/Zudt33uHCZkrwYZAJN77</a></td></tr><tr><td><strong>Product</strong></td><td>Displays a featured product with customizable layout, media, and design settings.</td><td>null</td><td><a href="/files/wnIrxliUP9uK2NXsMmWl">/files/wnIrxliUP9uK2NXsMmWl</a></td><td><a href="/pages/4k9bXyXAirTzHRTwpchF">/pages/4k9bXyXAirTzHRTwpchF</a></td></tr><tr><td><strong>Products with image</strong></td><td>Display a list of products with an image promotion.</td><td>null</td><td><a href="/files/lpYyR0pBVK4oNWSsCe0n">/files/lpYyR0pBVK4oNWSsCe0n</a></td><td><a href="/pages/FIonH1FARIlVuRuE4vKU">/pages/FIonH1FARIlVuRuE4vKU</a></td></tr><tr><td><strong>Recently viewed products</strong></td><td>Display a dynamic list of products the customer has recently viewed to boost engagement and encourage return visits.</td><td>null</td><td><a href="/files/GBBYqjI8vgXoanQ7S6Y3">/files/GBBYqjI8vgXoanQ7S6Y3</a></td><td><a href="/pages/ib5OiTqh2qgQHFgDe1JW">/pages/ib5OiTqh2qgQHFgDe1JW</a></td></tr><tr><td><strong>Shop the look</strong></td><td>Shoppers can find products from branded images.</td><td>null</td><td><a href="/files/PNW5UvsA77wAYz7niHPs">/files/PNW5UvsA77wAYz7niHPs</a></td><td><a href="/pages/XlnaWlHh2eDfy2qWHepk">/pages/XlnaWlHh2eDfy2qWHepk</a></td></tr><tr><td><strong>Text with products</strong></td><td>Highlight products, a collection or images alongside a brand message.</td><td>null</td><td><a href="/files/CTzQDfV4WR1LzOlBf0r7">/files/CTzQDfV4WR1LzOlBf0r7</a></td><td><a href="/pages/0haLop1Chd02E3tgpQxd">/pages/0haLop1Chd02E3tgpQxd</a></td></tr></tbody></table>


# Featured product

Display large background product images when promoting a product

Scroll through product images with Broadcast's modern product section. Highlight the featured product while shoppers scroll through the page.

<figure><img src="/files/IJRTSIWMpFIMbpwRQZXq" alt=""><figcaption></figcaption></figure>

The section remains sticky while product images are displayed. Shoppers can purchase directly with the **Quick Add** feature or click through to view the full product page.

### Section settings

<table><thead><tr><th width="174.484375">Settings</th><th width="147.26483154296875" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Content</strong></td><td align="center"></td><td></td></tr><tr><td>Product</td><td align="center"><code>product</code></td><td>Select the product to be featured.</td></tr><tr><td>Show product card</td><td align="center"><code>checkbox</code></td><td>Optionally display the product card instead of the detailed view.</td></tr><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Layout</td><td align="center"><code>select</code></td><td>Determines order of product and image: <code>Product left, image right</code> or <code>Image left ,product right</code>.</td></tr><tr><td>Images limit</td><td align="center"><code>range</code></td><td>Sets how many product images to display.</td></tr><tr><td><strong>Desktop</strong></td><td align="center"></td><td></td></tr><tr><td>Background image</td><td align="center"><code>image_picker</code></td><td>Upload a background image for desktop. Recommended: 2000x1400px JPG.</td></tr><tr><td>Scrolling styles</td><td align="center"><code>select</code></td><td>Choose how product images scroll: <code>Vertical</code> or <code>Horizontal</code>.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Background image</td><td align="center"><code>image_picker</code></td><td>Upload a mobile-specific background image. Recommended: 1200x1600px JPG.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Apply a color scheme to the section.</td></tr></tbody></table>

### Video Overview

This video demonstrates the layout options and scrolling styles for desktop and mobile. Plus, all the section settings for the Featured product:

{% embed url="<https://www.loom.com/share/83b17b5d1bbd406d95106b14c3c28b9f?sid=0bd32e02-2623-437b-be05-c1e3cc495780>" %}
**Video walkthrough for the Featured product section**
{% endembed %}


# Image with product

The **Image with product** section combines a full-width or padded image banner with an overlay and integrated product display, making it ideal for promotional storytelling. It supports various responsive image heights, custom overlay options, a connected product card, and flexible call-to-action buttons.

<figure><img src="/files/jQfFHs4xG7teCTwUWvxU" alt="image with product section"><figcaption></figcaption></figure>

This section is commonly used for **hero images**, **promotional features**, or **highlighting a product in a lifestyle context**. It supports up to 5 content blocks, including headings, text, buttons, and custom Liquid code.

<table><thead><tr><th width="206.7777099609375">Settings</th><th width="149.99993896484375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Content</strong></td><td align="center"></td><td></td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Upload image. Recommended size: 3200x1200px JPG. <a href="https://broadcast.presidiocreative.com/faq/frequently-asked-questions/how-to-prevent-your-images-from-getting-cropped">Learn more</a></td></tr><tr><td>Image link</td><td align="center"><code>url</code></td><td>Optional link to wrap the image.</td></tr><tr><td><strong>Product</strong></td><td align="center"></td><td></td></tr><tr><td>Product</td><td align="center"><code>product</code></td><td>Choose a Shopify product to display.</td></tr><tr><td>Text</td><td align="center"><code>textarea</code></td><td>Descriptive text to accompany the product.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Controls font size for the description text: <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code></td></tr><tr><td>Enable quick add</td><td align="center"><code>checkbox</code></td><td>Adds a button to allow quick add-to-cart.</td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Background color for the product card.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Text color for the product card.</td></tr><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Controls section width: <code>Full width</code> or <code>Full width padded</code>.</td></tr><tr><td><strong>Desktop</strong></td><td align="center"></td><td></td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Sets section height on desktop devices. Multiple fixed and screen-relative options.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Upload mobile-specific image. Recommended: 1200x1600px JPG.</td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Section height on mobile. Multiple options including screen-based and fixed pixel heights.</td></tr><tr><td>Text alignment</td><td align="center"><code>select</code></td><td>Vertical alignment of text on mobile: <code>Top</code>, <code>Middle</code>, or <code>Bottom</code>.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Choose from predefined color schemes.</td></tr><tr><td>Show text background</td><td align="center"><code>checkbox</code></td><td>Display a background behind the text content.</td></tr><tr><td>Overlay type</td><td align="center"><code>select</code></td><td>Adds an overlay: <code>Disabled</code>, <code>Opacity</code>, or <code>Text underlay</code>.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top</td><td align="center"><code>range</code></td><td>Padding above content.</td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Padding below content.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Show placeholder image</td><td align="center"><code>checkbox</code></td><td>Show a default placeholder if no image is set. Disable when using metafields.</td></tr></tbody></table>


# Heading

The **Heading block** allows you to add a SEO title or message over the image. It's perfect for  campaign headlines or strong product callouts.

<figure><img src="/files/7tpLQtCZ7plI2Xf6jQH9" alt="Heading field for the section"><figcaption></figcaption></figure>

<table><thead><tr><th width="162.33331298828125">Settings</th><th width="106.44439697265625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td align="center"><code>text</code></td><td>The heading text. Supports plain text or dynamic via metafields.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Size of the heading: <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>HTML tag used for semantic structure: <code>H1</code>-<code>H6</code> or <code>Automatic</code>.</td></tr></tbody></table>


# Text

The **Text block** lets you add supporting or descriptive content below the heading. Ideal for short explanations or promotional subtext.

<figure><img src="/files/E7oh480d8jbQqZtklt17" alt="Simple text field"><figcaption></figcaption></figure>

<table><thead><tr><th width="91.22222900390625">Settings</th><th width="128" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Rich text content.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Choose a style: <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr></tbody></table>


# Single button

The **Single button block** creates a standalone CTA button. This is useful if you only need one action instead of two (unlike the Side by Side Buttons block).

<figure><img src="/files/rQPxXN4Oz7E3GVYZZ5cL" alt="Single CTA Button"><figcaption></figcaption></figure>

<table><thead><tr><th width="124.5555419921875">Settings</th><th width="126.5555419921875" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Text</td><td align="center"><code>text</code></td><td>Button text label.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>Destination link.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Button color style: <code>Black</code>, <code>White</code>, <code>Primary</code>, or <code>Secondary</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Size of the button: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Button style: <code>Solid</code>, <code>Outline</code>, or <code>Text</code>.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Toggle to display an arrow icon.</td></tr><tr><td>Full-width</td><td align="center"><code>checkbox</code></td><td>Button stretches to container width.</td></tr></tbody></table>


# Side by side buttons

This block enables you to display **two horizontally aligned call-to-action buttons,** a primary and a secondary, ideal for highlighting dual CTA.

<figure><img src="/files/4yoYz7aX8dNMbp2o9UnN" alt="Dual CTA Buttons"><figcaption></figcaption></figure>

<table><thead><tr><th width="253.5225830078125">Settings</th><th width="128.99993896484375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Primary/Secondary buttons</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Label for the button.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>Link for the button.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Button color: <code>Black</code>, <code>White</code>, <code>Primary</code>, or <code>Secondary</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Size of the button: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Button style: <code>Solid</code>, <code>Outline</code>, or <code>Text</code>.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Show the arrow icon on the button.</td></tr></tbody></table>


# Product

The **Product** section is used to feature a single product with a flexible layout, media customization, and content blocks such as title, description, and app integrations. Ideal for product pages, landing pages, or marketing bundles.

Learn more about the section blocks:

{% embed url="<https://broadcast.presidiocreative.com/product-theme-blocks>" %}

<table><thead><tr><th width="203.396728515625">Settings</th><th width="163.44964599609375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Product</td><td align="center"><code>product</code></td><td>Select the product to display.</td></tr><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Set content width: <code>Full width padded</code> or <code>Normal</code>.</td></tr><tr><td><strong>Media</strong></td><td align="center"></td><td></td></tr><tr><td>Enable zoom</td><td align="center"><code>checkbox</code></td><td>Enable image zoom on hover (desktop only).</td></tr><tr><td>Enable video looping</td><td align="center"><code>checkbox</code></td><td>Automatically loop product videos.</td></tr><tr><td><strong>Desktop</strong></td><td align="center"></td><td></td></tr><tr><td>Product gallery</td><td align="center"><code>select</code></td><td>Choose thumbnail layout: <code>Bottom</code> or <code>Left</code>. Applies to desktop.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Product gallery</td><td align="center"><code>select</code></td><td>Display product media as <code>Thumbnails</code> or <code>Slider</code>.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Choose a theme color scheme.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top</td><td align="center"><code>range</code></td><td>Add space above the section.</td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Add space below the section. </td></tr></tbody></table>


# Products with image

Display a list of products with an image promotion

Build an engaging section showcasing products from a collection alongside a prominent image promotion. This modern design by Broadcast captures shoppers' attention while browsing your store pages.

<figure><img src="/files/lpYyR0pBVK4oNWSsCe0n" alt="products with image section"><figcaption></figcaption></figure>

### Section settings

<table><thead><tr><th width="218.59637451171875">Settings</th><th width="141.5130615234375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Defines section width: <code>Full width</code>, <code>Full width padded</code>, or <code>Normal</code>.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Reverse block placement</td><td align="center"><code>checkbox</code></td><td>Reverse order of blocks on mobile.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Select section-wide color scheme.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top</td><td align="center"><code>range</code></td><td>Space above the section.</td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Space below the section.</td></tr></tbody></table>

### Customize

* Mobile placement can be reversed to show the image first or after the products.

<figure><img src="/files/eGLNSll0dwNvPBrgW64A" alt="reverse block placement setting showcase"><figcaption></figcaption></figure>

* The mobile layout can have one or two items per row or a slider for less vertical scrolling.
* When using four products for your section, choose a tall image to span two rows of products. A wide-aspect ratio image will work best for two products.

<figure><img src="/files/1GBCEmRnOEueiMq14VB3" alt="products with image section"><figcaption><p><strong>Use a wide image for single row sections or a tall image for two rows</strong></p></figcaption></figure>

### Video Overview

This video demonstrates the section settings and block options for the **Products with image** section, including mobile layouts:

{% embed url="<https://www.loom.com/share/c372a87616c84ebe96d4b147eef6556c?sid=af314567-4f96-4fb2-8c1c-9785a363fc57>" %}
**Video walkthrough of the products with image section**
{% endembed %}


# Products

You can select up to four products to feature in this promotion. The **Quick Add** feature quickly adds items to the cart. The call-to-action button over the image allows shoppers to easily add a product to the cart.

<figure><img src="/files/cANvfOYzVWa4LQltubhD" alt="products displayed for products with image section"><figcaption></figcaption></figure>

<table><thead><tr><th width="136.82550048828125">Settings</th><th width="158.94097900390625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Product list</td><td align="center"><code>product_list</code></td><td>Choose up to 4 products to display.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Layout</td><td align="center"><code>select</code></td><td>Mobile layout: <code>1 item per row</code>, <code>2 items per row</code>, or <code>Slider</code>.</td></tr></tbody></table>


# Image

Displays an image with customizable mobile height, heading, text, overlay, alignment, button settings, and color options for flexible hero or banner designs.

<figure><img src="/files/PCciccuiH37tQgt95TkL" alt="image for products with image section"><figcaption></figcaption></figure>

<table><thead><tr><th width="212.87591552734375">Settings</th><th width="152.03472900390625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Upload image (recommended: 2000 × 1400px .jpg).</td></tr><tr><td>Mobile height</td><td align="center"><code>select</code></td><td>Controls image height on mobile.</td></tr><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Title or headline text.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Font size for heading: <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Additional paragraph or description.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Size for body text, only applies to paragraph content: <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Block alignment</td><td align="center"><code>select</code></td><td>Aligns the text block over the image: <code>Top left</code>, <code>Bottom right</code>, <code>Absolute center</code>, etc.</td></tr><tr><td>Overlay type</td><td align="center"><code>select</code></td><td>Adds an overlay: <code>Disabled</code>, <code>Opacity</code>, or <code>Text underlay</code>.</td></tr><tr><td><strong>Button</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Button label, leave blank to link the full image.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>Button or image link.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Button color: <code>Primary</code>, <code>Secondary</code>, <code>Black</code>, or <code>White</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Button size: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Button style: <code>Solid</code>, <code>Outline</code>, or <code>Text</code>.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Toggles an arrow icon on the button.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Show text background</td><td align="center"><code>checkbox</code></td><td>Adds background behind text.</td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Text block background color.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Text color.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>Defines semantic HTML tag: <code>H1</code> - <code>H6</code>, or <code>Automatic</code>.</td></tr></tbody></table>




---

[Next Page](/llms-full.txt/1)