Broadcast comes complete with 30+ professional theme sections to help you merchandise your online store. Sections can be added to any page on your store.

Discover the complete range of sections and their settings. Experiment by adding different types of sections and section blocks to the homepage and the other pages within your store.

Section settings

To find the primary settings for each section, click on the section name to view the settings panel. These settings control

Wider desktop screens will display the settings panel on the right side of your screen:

Adding a section

Hiding a section

Use the eye icon next to the section title to toggle the display of the entire section:

Tip - Blocks have their own eye icon, be sure to select the section eye icon to toggle display of the entire section.

Reordering sections

Use the handle icon which is located next to the eye icon to drag a section and drop it in a new position:

Helpful when adding new sections as they appear at the bottom of your section list.

Why does it matter?

Your website's loading speed affects your customers' shopping experience, your conversion rates, and your store's discoverability.

Major factors impacting performance

Various factors can affect the performance of your online store. These include the apps you have installed, your Shopify theme, the speed of your network, and the Shopify platform itself. To enhance your store's performance, it is essential to focus on some of the significant factors, such as Apps, content, and theme. This support article will provide insights on what actions you can take to improve your store's performance.

Apps have the most significant impact on your theme's performance

• Each app adds its code to the theme, which takes time to execute

• Uninstalled apps can leave code behind that slows down your theme

• Code customizations should be carefully added since “quick fixes” from tutorials can solve a problem but increase thread work (e.g., adding jQuery reference, adding <style> code in the theme.liquid file, adding Javascript, particularly with <script> tags)

You can improve your website's performance by reducing the number of customer-facing apps, such as pop-ups and page builders, and increasing the number of back-end apps that connect to accounting or shipping services.

It's important to be cautious when removing apps from your store as some apps may make changes to your theme code, which can have an impact on your store's performance. Even if you uninstall the app, these changes may still remain in place. To effectively remove any leftover code, it's best to contact the app developer's support team for assistance.

The importance of website content

• The larger a page is, the longer it takes for a page to load

• Images, in particular, take longer to load than text or other types of content

• Larger images take longer to load

• Some sections, like videos (and, to a lesser degree, sliders), can quickly impact your page speed.

• This doesn’t mean you should remove content from your site

• Themes certainly impact your site’s speed, but they’re just one piece of the puzzle, regardless of where that report appears.

Above the fold

You can have a big impact by simplifying your content "above the fold," which means the content is immediately visible when your page loads. An example of simplifying this content would be to replace a slideshow with a single Image with a Text section.

Images

The theme you are using will automatically compress and optimize your images. You can upload high-quality, large images without worrying about the site's loading speed. The theme will automatically load the appropriate size image for each screen. For instance, mobile screens will get smaller images, while larger screens will get large images. The theme uses Shopify's compression algorithm, which adjusts its settings based on best practices. We advise against applying additional compression before uploading, as doing so can cause visible compression artifacts in the images without any increase in loading speed.

Links

To improve the loading speed of your website, it's important to reduce the number of unnecessary redirects. Redirects can cause an increase in the number of requests made by your site, which ultimately results in a slower load time. You can manage redirects by going to the Online Store > Navigation > URL Redirects section. Make sure to minimize the number of redirects as much as possible.

Next, you'll want to manually test your entire store for broken links (links that lead nowhere). This will improve page speed and customer experience.

Updating your theme

Keeping your theme updated with the latest version ensures that all the components, from script libraries to Shopify features to page speed-specific enhancements, are up to date. Every theme studio's support department will recommend that you start by updating your theme to the latest version.

If you have purchased your theme from the Shopify Theme Store and licensed it correctly, you can effortlessly update it by using Shopify's Update process. This process is safe and secure and copies your current theme settings and templates to a new version that is added to your drafts, unpublished section. It's important to note that the live theme will never be updated directly, so you don't have to worry about any changes being made to your live website without your knowledge or consent.

Shopify Speed Score

Understanding the limitations of the Shopify Speed Score

Reports are delayed by 1-3 days. The tool is not live or instant. After you make changes, an updated score can take up to three days to be reported.

Even though the speed report is positioned under the published theme, if you make changes to your store to improve speed or even switch the theme entirely, the speed report will not automatically update

“Similar store” is defined in a way such that it might not be “similar” to your store. Some metrics used are:

• Number of sales to date

• Gross sales

• Number of products and variants

• Types of products

• Traffic

• Apps installed

• Theme used

Shopify-required code slows down your theme, and it can’t be removed:

{{ content_for_header }} Loads resource-heavy functionality through dynamic buttons, analytics, and other scripts.

Your speed score is a score -- if you’re concerned about speed, check its actual speed:

Speed score fluctuations

Additionally, the "Speed Score" can change over time without changing your theme, apps, or content. The reason is that the score is not a measurement of your store but rather your store compared to other stores. The criteria for this comparison aren't fully transparent yet, and the comparison can take days to formulate, so it's still very difficult to identify exactly what changes result in a higher or lower score.

When setting up your store, you may want to initially hide prices from displaying on your store. Here are a few tips on hiding the prices in common areas of the theme:

Video

The CSS code that was used in the video:

.product-item__price {
  display: none;
}

Where to add

Be sure to add this code snippet in the main Theme settings -> Custom CSS

Product pages

The price block can be toggled with the "eye" icon:

When working with an unpublished theme (also known as a draft), you can send out a preview link, allowing anyone with the link to preview your work/store.

Three steps to generate

1. Start with your draft theme in the Theme Customizer. Click on the ellipses icon (three dots) at the top next to the theme name and choose Preview:

1. Next, at the bottom of the page, use the green Share preview button:

1. Click the "Copy link" button in the popup box:

Shared preview links expire after a certain number of days and are randomly generated by Shopify.

Many sections contain section blocks. These are blocks of content that you can add, configure, hide, reorder within a section, and remove.

An example of a content block is a slide in a slideshow section. You can configure each slide, hide a slide, reorder slides, and remove or delete a slide.

Adding blocks

Each section that supports blocks will have the option to add a block. For example, with the Slideshow section, adding a new block is called Add Slide.

Removing blocks to add new blocks

Some sections will have a limit to the number of blocks that can be added. For example, with the Custom content section, there is a limit of 2 blocks (2 columns). You can easily delete a block to add a different type of block:

Block settings

Similar to sections, each block has its own settings. These settings are where you customize the content inside your sections:

Explore sections and blocks

Build rich and creative sections on your homepage, product pages, collections, blogs, pages, and more by exploring different sections and block types.

Some sections include content in the section settings that complement content in blocks. For example, 'Shop the look' will have the primary image settings in the section:

Each block is then used in the product slideshow, allowing you to showcase multiple products on one image:

Hide and reorder blocks

Content blocks can be hidden to be used later or deleted if not required:

Content order can easily be changed using drag and drop:

To check your version of Broadcast, click on the ellipses (three dots) icon at the top of the Theme Editor to view theme actions including the version number:

How to remove

In the Shopify Code Editor, open the file:

section-supporting-menu.liquid

You'll find that easily when using the filter bar at the top:

1. Open the section-supporting-menu.liquid file in the Sections folder

2. Search for Powered by Shopify in the code area

3. Remove or comment out the line below the comment

4. Save the changes

How to open the code editor

Click on the ellipses (three dots) icon at the top of the Theme Editor to view theme actions, and choose Edit code:

All licensed customers of Broadcast can now easily update to newer versions of Broadcast using the Shopify update tool:

Updating process

When using the Shopify update tool with your current live theme:

• A copy of your existing theme is created and added to the drafts folder.

• The Shopify update tool will then apply the new theme code to this copied version.

• The live theme is never modified during the process, and it will not affect customers.

Tips on updating

• We recommend you start by manually duplicating your current live theme. This step is optional but good practice when performing any theme update.

• It's safe to update your live theme as the Shopify update tool first makes a copy of the live theme and then applies changes to the copied version. The live theme is never modified.

• After the update has been completed, you can review and customize it.

• We recommend viewing the release notes and the Broadcast documentation to see what's new. Then, experiment with the changes to enhance and optimize your store.

Video

Quick video demonstrating the entire process of using the Shopify update tool with Broadcast with a live theme:

Cropped images are a common issue when designing a website. Here is our answer to why your images are cropped and how to prevent cropping.

Understanding Image Aspect Ratio

The ratio between the width and height of your image forms its aspect ratio. Let's take, for example, 16:9. The first number (16) refers to the width, and the second (9) refers to the height. If you upload a 16:9 image to a 1:1 section, your image will be cropped due to the difference between the width and height of the section and your image. Cropping prevents your picture from being stretched and deformed.

However, if you upload an image with the same aspect ratio as the section, your image will not get cropped.

How do I get the aspect ratio that the section requires me to use?

You will need to crop the image placeholder of the section to get the image resolution.

You must turn on your snipping tool for Windows users to crop out the image section.

For Mac users, click Command + Shift + 4 to turn on the screen cropping tool.

Go to the section in which you would want to get the image aspect ratio:

Here is what your cropped image should look like. Be sure to be as precise as possible:

Save the image on your desktop, right-click, and click on properties or file info. From there, you must locate the image's dimensions to use them to calculate the aspect ratio.

Windows:

Mac:

In this situation, we will be working with 467x468 (Windows example). Use this aspect ratio calculator to identify the aspect ratio you must use: https://ww.digitalrebellion.com/webapps/aspectcalc.

After doing this, you now have the aspect ratio of the section, and you know what image resolution you need. Note: Your image resolution can be different and still have the same aspect ratio as shown in the example below:

Always select a low-mid resolution to make your images lighter and improve site speed.

Let's upload a 1000x1000 and 1920x1080 image into the section that we just worked with:

- 1000x1000 Dimensions / 1:1 Aspect Ratio

- 1920x1080 Dimensions / 16:9 Aspect Ratio

Since the 1000x1000 image has the same aspect ratio as the section, it does not get cropped as opposed to the 1920x1080 image.

When you need to edit text content in Broadcast outside of the theme sections and blocks, you can use Shopify's 'Default theme content editor', also known as the 'Language editor,' to manage the text.

How to use

While in the Theme Customizer, use the ellipsis icon at the top (three dots) and choose "Edit default theme content":

Once the editor loads, you'll find that the content is grouped into tabs. Broadcast stores many general items in the first tab, "General." Most of the product-related content is stored under the "Products" tab.

The filter/search box can be helpful to find items:

Sample modification

An example of using the Default content editor is to change the "From" text that appears on the product grid or collection pages to something else like "Starting at":

The "From" text automatically appears when a product has a range of prices. Some variants will be priced lower than others. We can modify the default theme content by changing the "From" text.

When the editor loads, you'll see a row of category tabs. In our example, we'll use the "Products" tab to find the "From" text:

You can modify this text and Save your changes.

Video Overview

Complete walkthrough on using the Default content editor to make the sample change:

Theme Customizer

Shopify has made adding global and local CSS changes to your theme easy. Broadcast supports these Theme Customer methods. Some examples are:

• Template Pages - Apply CSS overrides to Product templates, Blog posts, and standard Page templates.

• Sections - Customize elements only within a specific section. This includes the home page, header, cart drawer, and footer.

• Global - Apply CSS overrides for the entire store.

Product pages

1. Click on "Product pages" in the Theme Customizer sidebar.

2. Find "Custom CSS" towards the bottom of the settings.

1. Click on "Custom CSS" to expand the accordion. Here, you can paste the CSS code:

The CSS code snippet you use here will apply to all products that use the same template.

Be sure to paste valid CSS code and then save the changes in the Theme Customizer.

Theme Sections

The home page and other sections used throughout the theme will have a similar option for adding CSS code snippets. Changes made there are local to only that section.

1. Click on the section to which you'd like to add your CSS code snippet.

2. In the section settings, scroll to the bottom and click "Custom CSS" to expand. Then, add your CSS code snippet inside.

The CSS you add here will only affect this section and will not affect any other sections in your store.

Remember to Save your changes.

Global CSS

Use the Theme Settings in the Theme Customizer to add a CSS code snippet that will target all areas of your store.

1. Click on the Settings icon in the Theme Customizer.

2. Towards the bottom, click to expand the "Custom CSS" accordion and paste your code snippet into the main field.

Example of code snippet

We'll use this sample code snippet to demonstrate where the code will be added:

.btn.btn--scroll-top {
  background-color: red;
  border-color: red;
}

1. Copy all of the code, including the opening and closing curly brackets.

2. Paste the code snippet into the main box area.

Line numbers will be displayed next to your code snippet to help indicate how many lines of code have been added.

Save your changes.

Alternative method

Developers might be used to editing theme.css files. However, we no longer recommend this method as it's a legacy option.

For developers who would like to use the Code Editor, it's very important to add your custom CSS at the bottom of the theme.css file, which is located in the assets folder.