The accordion section in Broadcast includes a robust selection of blocks to visually improve content displayed on product detail pages, blogs, pages, and more.

Content blocks include:

• Text column

• Image column

• Icon column

• Custom HTML

• Contact form

Video Overview

Full details about each block type for accordions:

Adding images to accordions

Images in accordions are added by using the Image column block. Here's a quick 1-minute video demonstrating how to add images:

Broadcast includes the "Line item property" block, which helps you collect additional information from your customer and attach that to the product.

This can be helpful when you need the customer's input and attach it to the order:

The information will be included in the order, and the customer will see it in the cart:

Styles

The block can be used for different types of input:

• Text

• Checkbox

• Dropdown select options

Checkbox example

Dropdown example

Video Overview

Here's a short video to learn how to add the block and general usage:

Broadcast can display a custom value or text for products that are sold at no cost. You can change the price from $0 to a text message:

Examples:

• Sample

• Free Gift

• No charge

How to setup

In the Shopify Admin under Products, set the Price to a zero value for the base currency:

Use the Language Editor (now called 'Edit default theme content') to set your text value:

To modify the text 'free' change the text value found under Product -> Free.

Save your changes to finish.

The 'Out-of-stock notification' feature in Broadcast helps customers engage with you when items are out of stock.

Customers can easily submit an email request for an item or variant that is currently out of stock:

How to enable the feature

Using the Theme Customizer, enable the global feature under the Theme settings -> Product form:

Check the box to turn on the feature. Uncheck to turn it off. Save your changes.

All out-of-stock items, including variants, will now display a custom 'Sold out' button with the 'Notify me when it's available' message.

How to customize the button text

Using the Theme Customizer, click on the ellipsis icon (three dots) at the top-left next to the Theme name, and then choose 'Edit default theme content':

Under the 'General' tab:

Scroll down to the 'Newsletter form' section, under 'Newsletter product availability' and modify the text to your preference:

Save your changes.

Processing requests

The out-of-stock form will appear in a drawer (similar to a cart drawer) for the customer to complete. The name of the product and variant is shown to the customer:

After adding their email address, a confirmation message appears in the drawer:

The merchant will receive an email to the same account, and the merchant will receive store contact form messages. Here is an example:

Introduced in Broadcast v5.6

Broadcast includes a Final sale message feature, which allows shoppers to easily identify products on final sale and view details about the sale.

The message can be triggered to appear on all sale items or individual products only.

All sale items

Use the Theme settings -> Product form -> Final sale to toggle the feature for all sale items and also configure the details displayed on hover:

• When this toggle is checked, all sale items will display the 'Final sale' message and details on hover.

Individual products

Broadcast uses a custom metafield which can be added to individual products. Each product in your store can be individually toggled to display the final sale message.

How to video

This short video demonstrates creating a required custom metafield to display the final sale message on only individual items:

Required custom metafield

Customize language

The theme will default the main message to 'Final sale'. You can change the text by modifying the default theme content.

In the Theme Customizer, click on the ellipsis icon on top and choose 'Edit default theme content':

In the editor, type in 'final sale' in the search box to find the correct entry to modify:

To manually find the text snippet, use the Products tab and under the Product section, find Final sale

Broadcast includes an accordion section with the default product template to help you provide frequently asked questions.

A place to promote your services and brand strengths. Include product reviews for the current product.

Theme blocks

Broadcast includes flexible content block types to help you quickly build rich accordions:

Content block types can be mixed and combined in each accordion section

Example of adding a new icon column

Changing the heading

Hiding an entire accordion section

Displaying product reviews

When reviews are enabled, they will appear in the accordion. Broadcast has built-in support for the Shopify Reviews app (required).

Toggle under Reviews:

Custom content inside accordions

Using metafields, we can add custom unique content to accordion blocks for individual products.

Video tutorial - How to add custom content using metafields

Showing the product price is one of the most important things on product pages. We have a few tricks here as well.

If the product price is set to $0, it's replaced by a translatable string - 'Free'.

Learn more about free products by clicking the link below:

To add items to the cart, we use two main buttons: our theme's own 'add to cart' button and a Shopify button called 'buy it now'

To enable the 'buy it now' button, you can check the 'dynamic checkout button' checkbox.

Displays product price, title, and star rating when using the Shopify Ratings app.

Includes an option to display the navigation breadcrumb above the title (including vendor option, see settings).

Broadcast supports metafields for creating pre-order products.

When you define a preorder metafield, you can easily toggle on or off the preorder feature which converts the Add to Cart button to a Pre-order button.

On the main product page, the Add to Cart button is replaced with a Pre-order button:

When viewing a collection page or any product grid-style section, a Pre-order badge is added to the product:

Quick Add button is changed to Pre-Order:

In the cart drawer and cart page, a message is included to indicate that the item is a preorder:

How to setup

Setting up a preorder metafield is very simple and can be done right in your Shopify Admin.

This video covers all the steps needed for creating a preorder metafield plus additional customization options:

Reference

You can use the following reference information to help with the steps covered in the video.

Metafield definition

Create a product metafield with the namespace and key set to theme.preorder . Set the content type to 'True or false'.

Product setup

In the Metafields section of any product that you'd like to use the feature, change the preorder value to True:

Preorder template

To remove the Buy it now button as shown in the video, you can create a preorder product template and uncheck Show dynamic checkout buttons inside the Form block:

Additional information

When selling pre-order products on your store, you may want to manually capture payments:

Manually capture payments

You can customize the button text for pre-orders to match your language or simply use different wording:

Customize the button text

If you have a product that is not yet ready to be shipped to customers, you can set it up as a pre-order product. Broadcast can replace the add-to-cart button with a pre-order button by using a _preorder tag.

How to use

• From your Shopify admin, choose 'Products'

• Choose the product you want to change into a preorder

• Add the tag _preorder

• Save the product

When Broadcast sees a product with this tag, the 'Add to cart' button will automatically be changed to 'Pre-order'.

Customize the button text

Use the language editor to customize the button text for pre-order.

Search for pre-order in the Filter bar:

Manually capture payment

Pre-orders require that you set up payment options to manually capture payments instead of automatically.

From your Shopify admin, click Settings (bottom left), and then click Payments:

Scroll down to find the Payment capture section, and choose Manage for Payment capture set to Manual:

Choose Manually capture payment for orders:

Learn more about Capturing payments from Shopify:

Build a sense of urgency with Broadcast's low inventory message option in the product form:

Inventory count value can be hidden:

The message is customizable in Theme content and supports HTML. You can change the message and add basic styles:

How to setup

There are three basic steps needed for the inventory countdown to appear correctly:

Enable inventory tracking

The first step is to ensure your products in the main Product setup are using the 'Track quantity' option:

Add the Inventory countdown block

In the next step, we'll use the Theme Editor and add the Inventory countdown block to the Product form:

Move the block up to a preferred position on your product form. We've moved it right about the Buy buttons:

Customize inventory features

The Inventory countdown block has a range of options to help you configure when and what is shown to your customers.

Save your changes to view the Inventory countdown message on your product pages. If a product does not have inventory tracking activated in the Product setup, the message will not appear for that product. The next step is optional, it allows you to modify the message text for your current language and additional languages.

Optional - Change message text

The message you display for any/all languages can be customized under Edit default theme content (language editor):

Theme content allows you to customize the text for various components within the theme. In the search box at the top, type in 'inventory', then at the bottom, you'll find two fields that can be customized in your current language:

Here you can customize the message. Use the key code {{ inventory }} to display the counter value.

Update for all your languages if your shop supports multiple languages.

Here's an example of what we used to bring in the theme's primary color:

Code snippet:

<span style='color:var(---color-primary)'>&#9658;</span> Hurry, Only <strong>{{ inventory }}</strong> Left!

Displays the product description from the product setup. Also displays tabs or accordions when configured.

Settings

• Tab style (none, tabs, accordions)

• Tab headings - dynamic source supported

• Tab content - dynamic source supported

Note: When the type style is set to none, no tabs or accordions are shown. See the article to learn more.

Broadcast Product page theme blocks help you customize the primary or core content for your product pages and product templates.

Adding blocks further enhances your merchandising.

Siblings are a powerful tool that helps link products together.

Learn more about siblings here:

For products with variants, you can add a variant picker block.

This block is not rendered when the product has no variants so it won't slow down your pages.

A key feature of the variant picker is the option to add a size chart. Use a regular store page to link into this block.

Displays upsell promotion when paired with a custom tag

Settings

Display a list of available locations where your customers can get your products. The closest one to them will be selected automatically.

Learn how to set up local pickup for your store here:

A text block can be used to add additional details for specific products.

Use metafields to add different text for different products:

Tip: Do not use regular text in combination with metafields. For best results always use one or the other.

Add a clickable icon to let users easily share content on social media platforms like Facebook or X.

Use an inventory countdown block to display the remaining quantity of items in stock. It helps businesses and customers easily see how many products are available before they run out.

Read about our inventory countdown in more detail at the link below:

Include products from similar collections or products that complete the look. Upsell more products together.

The title for this block is a translatable string. Go into your online store > themes and click on actions (the three dots icon) > edit default theme content to access the translatable string editor:

Use a divider to break apart the product form and separate blocks from each other.

Add a custom feature to your product detail pages.

Utilize a line item property block to provide additional details about the product within the order. This feature is ideal for including gift notes or engravings.

There are three different options for line item properties:

• Text

• Checkbox

• Dropdown

You also have the option to make this a required step in the customer's order.

Use our custom code block for older app integrations or to add your HTML into the product pages section:

Broadcast includes a product detail block called 'icon' that can be added to the product form on any of your product templates. The block can be positioned in various locations on the form and has easy-to-use block settings to quickly choose a predefined icon and color choice or upload your custom icon.

Feature introduced in Broadcast 3.2

Example of an icon block added below the call to action buttons:

Customization

Use the block settings to customize the icon by choosing a predefined icon from the drop-down list or adding your icon image.

In the block settings, you can choose a custom color for the icon to help draw attention to features or promotions or to simply match the design of the page.

Dynamic data sources are supported if you'd like to have a unique icon and message for certain products.

Broadcast adds sale elements to your Product Detail page, Collection pages, and Product Grid sections to help your customers visually see sale times and their savings.

On the product pages, Broadcast adds a sale badge next to the sale price displaying the savings percentage:

On a Collection page or any section that uses the product grid, Broadcast can add a custom color sale badge over the product image:

How to setup

Sale pricing is managed in the Product setup for each product where 'Price' is the discounted price and 'Compare at price' is the original price or more expensive value:

Use the Theme Editor to customize the Sale badge feature used on Collection pages and product grid sections.

Under Theme Settings, select Product Grid:

Here, you can customize the badge colors and also toggle on/off the badge feature:

Customize language

With the Language Editor, you can modify the text used for both styles of badges. Begin by opening the Language Editor:

Sale badge on Collection pages and Product Grid sections

To modify the text 'sale' change the text value found under Product -> On sale.

Percent 'off' text on Product Detail pages

To modify the text 'off' change the text value found under Product -> Off.

Save your changes.

This article is for Broadcast version 3 and newer. For earlier versions of Broadcast, click here

Broadcast can show your product description in tabbed or accordion format. Add extra content to your product pages to help improve customer confidence in your products and brand.

How to use

Start by clicking on the product description block on any product template, to open the product description settings:

Tab style

Choosing 'Accordion' will convert tabs to accordions:

Choosing 'Disable tabs' will hide all tabs:

Hiding a single tab

To hide or disable a tab, remove the title or description of that tab. Both the title and description are required to display a tab.

Metafields for displaying unique and custom content

Product description tabs in Broadcast support Shopify's Dynamic source feature. Using metafields will allow you to attach custom content to each product and then display them on the product page.

Learn how to add unique content into each tab using metafields:

Add info text inside a small popup. Combine it with an informative icon to showcase any additional details or your products.

To add unique content to your product tabs or accordions, we can use metafields. With metafields, we can easily display unique content and information for all products or only specific products.

Example of unique tab content for one product:

Example tab content from another product:

Tabs are dynamic when using metafields. Some products may not display the tab entirely:

How to setup

There are three easy steps when configuring your product template and products to use metafields.

The first two steps only need to be performed once. The third step is done to any or all your products individually.

Video walk-through

All steps are covered in this video:

Reference

You can use the following reference information to help with the steps covered in the video.

Define a product metafield

The first step is to create a product metafield under Shopify Admin -> Settings -> Metafields

Create or define a product metafield for your tab content using multi-line text as the content type.

Link the metafield to a product description tab

Using the Theme Editor, use the Insert Dynamic Source icon to link the metafield you created with the tab text section in the Product description settings.

Add unique tab content under Product Setup

You are now ready to add unique content to any of your products. All content is added in the main Shopify Admin -> Products

Find a product that will have custom tab content and scroll to the very bottom of the product setup. Under Metafields, add your text to the metafield you created:

You can customize the list of related products or product recommendations for each product in your store. Using the Shopify Search & Discovery app, each product can have a list of products you can choose to help customers find similar or to cross-sell:

You can configure the title and number of items to display under Related Products using the Product recommendations section.

Customization

Next, use the Shopify Search & Discovery app to customize which items to display. Watch this short video on how to use the app feature:

Where to download the Shopify Search & Discovery app:

Without customization

If you choose not to customize recommendations with the Shopify Search & Discovery app, Shopify will use its own algorithm or AI to display random products. Therefore, products that don't have custom products selected using the app will still display some random items from your store.

The the Image Banner section in Broadcast, you can display unique images and messages for each individual product without creating custom product templates.

We cover all the steps in this video:

Note: The Advanced checkbox option was introduced in Broadcast 5.6.

Introduced in Broadcast 5.6

Broadcast can display variants with images to help your customers choose the right product type or size. You can combine swatches for colors and other variant types with images to represent your products visually.

Styles

Enable with the checkbox option and choose the layout style. Two layout styles are available, in-line and stacked:

In-line style

Stacked style

Product setup

Associate images to variants in your product setup. Broadcast will use the 'Size' variant images or any other variant type. In the example below, we've used 'Type' for the variant images:

Variant type

You can customize which variant types will use the Variant image feature in Broadcast. By default, Broadcast will use the 'Size' variant. To use other variant types, edit the default theme content (Language editor). Click on the ellipsis icon in the top left and choose 'Edit default theme content':

Choose the 'Products' tab:

Scroll down the long list of options under the 'Products' tab to a group called 'Product'. In this group, you'll find an option called 'Variant option image':

You can change the default 'Size' value to a different value like 'Type':

Save your changes to complete.

Broadcast includes a feature to display a custom size chart for any product you sell or a single size chart for all products when using the default product template:

Custom size chart for any product

Broadcast uses product metafields to display a unique Size chart on each product page. This allows you to create multiple size charts and assign them to different products in your store.

How to setup

Create size chart pages

To begin, create as many size chart pages as needed in your Shopify Admin Page editor. If you have an image already created for your size chart, add that to the content section of the page:

Create a reference metafield

The next step is to define a Product metafield using Page as the reference type:

Setup products

Your products will now have a Metafields section at the bottom. Use this to select which size chart page should be displayed when a customer is viewing this product.

Connect dynamic data source

In the Theme editor, choose your Size chart metafield as the dynamic source:

Video tutorial

Watch all the steps required to set up a custom metafield and connect to your products:

Single Size chart for all products

If your store requires only one Size chart for all product pages, you can skip a few steps and simply choose a page the theme settings:

Click on 'Product pages' to view the section settings and options:

Product Description

Enable sticky form

The product form stays in view while scrolling stacked images. This view is recommended for long pages with large images.

The main benefit is that it allows shoppers to have access to the call-to-action buttons while scrolling product images.

Sticky behavior ends when the shopper has reached the last product image and continues to the content below. This is best used with the 'stacked' image gallery.

Layout

Image display

Broadcast includes a few different layout styles for displaying your product images and thumbnails:

Thumbnails - Bottom

Thumbnails - Left

Stacked

Mosaic

The mosaic layout displays a large first image followed by 2-column smaller images. A popular design choice as thumbnails are large and less scrolling is needed over the stacked layout design:

Grid

The grid layout shows two rows of images side-by-side.

Image size

Broadcast also includes three image sizes to choose from to help match your product images:

Cart bar

Enable cart bar

The cart bar remains visible to shoppers while scrolling through long product pages.

It includes the product name, price, and Add to Cart button making it easy for customers to add your product to the cart:

Media

Broadcast includes a powerful image zoom feature that allows customers to easily zoom in on product images and cycle through them in a full-screen browser window mode:

Section padding

Section padding gives you granular control over the spacing above and below sections.

With product pages, the controls will help you increase or reduce white space at the top and bottom of the main product information:

Broadcast makes swatches simple. The theme supports solid color swatches, variant images, and siblings. Let's discover these swatch types and how to use them with your store.

• Solid color swatches - Pick solid colors to help customers find products and variant options. Broadcast lets you customize the color to match your variant color name.

• Swatch images - Match images in your Shopify image library to variant names. Similar to solid color swatches, you can map images directly to variant names.

• Siblings - Display product images as variant options. This option is ideal for earlier versions of Broadcast and requires each variant option to be a separate product. While this is a more complex method of setting up your products, it provides a professional look to collection and product pages.

• Variant images - This option displays the image associated with a product variant to help shoppers choose the right variant. You'll need Broadcast v5.6 or higher for this feature.

Solid color swatches

• Configure your swatch options in the Theme Settings -> Swatches. Here, you can customize the solid color swatches to appear in Regular or Large sizes and the shape, Circle or Square:

• We've included HEX color codes that you can customize directly in the Theme Settings. Each variant name can be mapped to a custom HEX color code for the perfect solid color swatch.

Customize colors

Here's how we can customize the colors and match them with the names used for our variants:

We can use a site like Color Hunt to find HEX color codes easily:

• Broadcast can automatically detect 140 color names. A default grey color swatch represents all other more complex names. Here is a full list of color names that will automatically be converted to swatches: Color names list. You can easily override the colors, as shown in the above video.

Trigger words

• The trigger word for color swatches is configured in the Content Editor. By default, Broadcast uses variant types "Color and Colour" to trigger swatches.

If your store uses different labels for the variant name, you can trigger swatches with a custom name:

Swatch images

Similar to customizing the colors for swatches, you can also use images to represent a swatch color. An image from your Shopify content library is used. Instead of using a HEX color code, the filename of your image is used in the swatch settings:

Siblings

The Siblings feature is a fully integrated feature that displays product images as swatches in the product grid and product pages:

• The feature requires each variant option to be configured as a separate product, resulting in a much richer shopping experience for customers.

• Product images are displayed as swatches on both the collection grid and product pages.

Learn more

There are several steps involved with the Siblings feature; we have an entire section to cover them:

Variant Images

Broadcast can also display images with a feature called Variant Images. This option shows the associated variant image as a variant option on the product form:

• Variant images were introduced in Broadcast 5.6. Be sure your theme has been updated to use this feature.

• The variant images feature is best suited for measurements or sizes:

• It can be configured for color use but won't display in the product grid. Here are some important steps about the feature:

Learn more

Full details about variant images:

Earlier versions of Broadcast

The following instructions are for Broadcast 5.0 and earlier.

Customizing

If your products have color names other than the listed colors in the Color names list, you can add your own color names and values or upload images to the Assets folder:

Add custom color names and values to swatches.json

Use the swatches.json file located in the Assets folder to add your own custom names and HEX color values:

Add custom images to the assets folder

Upload your own custom swatch images and display them on product and collection pages:

How to:

Video tutorial

Reference from the video:

    {
      "Stripes": "stripes.jpg"
    },

Avoid spaces in the filename

For the JSON file, your multiword variant can look like this:

    {
      "Light Navy": "light_navy.png"
    },

The variant name can have spaces. However, we recommend for the filename of the image, use an underscore or dash instead of a space.

Video tutorial - More tips for custom images

In this short video, we'll look at filenames and an example of creating a custom image for a swatch:

Disabling swatches

Swatches can be toggled on and off in the Theme settings from the Swatches tab:

Broadcast supports both a simple global product upsell option and also custom metafields to match any product with another. Both features can be used together.

Upsell block

After adding the Upsell block to a Product page template, you can easily add one product as your primary Upsell item which will instantly appear for all products using the same Product template:

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. Using multiple product templates, you can customize which product is selected for each template.

Metafields

With metafields, you can link any of your products to a certain product. This method allows you to customize each product to have its own cross-sell or upsell product. How to: