Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Setting up the primary heading and body fonts for your site
Broadcast uses two primary fonts: Heading and Body. You can choose these font values from a large library of professional fonts provided for free from Shopify by Google. After choosing these two font types, you can customize different elements throughout the theme with these default choices.
Begin by choosing a Heading font that will be used for various types of headings throughout the site:
Adjust the default Font size to set the size of the heading font. Many sections and blocks allow you to override this setting with their own font size option.
Adjust the default Letter spacing. This is the spacing between each of the letters. This setting helps you configure a wide or narrow style heading.
You can use the checkbox option for Uppercase to set the default heading style to always be in uppercase. This will convert lowercase heading entries into uppercase.
Let's look at the body text font next. Choose a font for your primary body text, which will be used for descriptions, blog posts, product information, and more.
Now that you've chosen both a Heading font and a Body text font, we can pick which font to use as our default choice for subheadings and navigation.
We've chosen the Heading font for our default Subheadings font.
We've chosen the Body font as our default option for the Navigation links and text.
The Font size setting under Navigation will target both the top menu links and the dropdown menu links:
Many sections in Broadcast will have different block types, like a Heading block, a Subheading block, and a Text block. These blocks will use the font choices you've made in the Theme settings above.
In the above Countdown section example, the Subheading block is used above the Heading block.
The Shopify font library contains a large variety of free fonts provided by Google that you can use for your store. These professionally designed fonts are widely used in most E-Commerce stores.
We recommend using a font from the Shopify Font Library, as it's integrated into the theme and provided by Shopify.
If your store requires custom fonts that are unavailable in the library, you can add them manually to the theme by using some CSS and modifying the theme code. Please remember that these fonts will not appear in the Shopify Font Library.
We strongly recommend using a Shopify Expert to implement this code change to your theme for best results. Our support staff cannot assist you or make this change for you.
The font choices in the Shopify Font Library cannot be modified. It's managed by Shopify, and you cannot add or remove fonts into this library directly. Custom fonts can only be added using CSS and editing the Theme code.
Our support staff cannot assist you or make this change for you.
To help those who are familiar with making code changes and have already done this with a previous theme, we have a video with some advanced steps:
Display a custom brand logo or animation during page loads.
Broadcast can display a pulsing custom icon or image during page loads. This branding feature is very easy to implement and is ideal for shops with media-rich pages.
View this short video to demonstrate the effect and how to easily set it up:
Tip: Build an animation sequence by using two custom images during page loads
In the Layout tab, you will also find the option to:
Change the grid style
Change the slider navigation style
Change the icon thickness
Enable parallax
Show outlines
Add links to your social media pages and enable social sharing buttons.
Settings to adjust the general, heading and footer colors using in the theme
Configure your brand colors in the color settings. These color elements are used in all the general sections, header, and footer.
Tip: These are your primary brand colors used throughout the theme. Some sections or blocks have their own color settings for even greater control.
Here are some common color elements to demonstrate how the color settings work:
The light background setting is used for background accents like the coupon message in the cart drawer. It's also used in the free shipping indicator with the bright accent color setting.
The bright accent is a highlight color for elements like the free shipping progress bar shown above in red and also the cart bubble indicator in the header:
The sale color is used for the prices on product grid listings like collections:
The sale badge uses a different setting, which can be found under the Product grid settings.
The background color adjusts the text inside the cart bubble indicator:
The social, search, account, cart icons area is adjusted with this setting:
Note: When using a transparent header, these colors are used when the dropdown is activated. The transparent header has a separate setting while inactive. That setting is in the next group.
The links setting adjusts the main header navigation links:
For dropdown menus, including the MegaNav, the background color can be adjusted:
Inside the dropdowns, you can adjust the color of the links:
When using a transparent header, the main colors in the header area include the social, search, account, and cart icons. Also, main navigation links:
Adjust the main footer background color:
Border elements are used within the footer for the forms and buttons:
The grey horizontal and vertical lines are "Divider" blocks. These have their own color settings within the block.
The default text for content in the footer:
All the links, including social icons and navigation links:
Try to use colors that are high in contrast. It will make your text easier to read. Here is a great contrast checker:
Example of a good score, 21:1 - White foreground on Black background:
Poor score, 2.44:1 - Blue foreground on Black background:
With Broadcast you can easily add search suggestions:
In this tab, you can add a navigation menu and select products.
Global settings for your theme
The theme settings help you configure theme-wide options and settings in Broadcast. These are considered global settings as they affect how your theme looks and functions on all pages.
You'll find some of the most important settings here: colors, typography, buttons, social media accounts, layouts and more. The theme settings can be found in the Theme Customizer by clicking on the settings icon on the left icon bar:
Tip: Most theme-wide settings are found here. When designing your store, you'll find many important options in the theme settings. Explore each accordion to find all the global settings and options found in Broadcast.
Settings to configure the default button styles and colors for call to action buttons
Choose the default style and colors for your call-to-action buttons. These button settings allow you to manage the style and appearance of the default buttons. Many sections and blocks will use the choices selected in these settings.
Broadcast allows you to choose any font from the Shopify Font Library for the buttons in your theme. Use the font selector to select the font choice for your buttons.
Broadcast includes different button style options. In these settings, choose a style that will be applied to all buttons throughout your shop. Button shapes included are square, rounded, and pill.
The pill shape brings a modern design to buttons, with a large radius on each corner. Shorter buttons like variant options will appear circular.
The square shape has 90-degree corners on all sides.
Similar to the square style, the rounded style has slightly rounded corners.
There is an option to force uppercase lettering inside the buttons. Uncheck the option to display lettering as it is entered in the button text fields, or check the option to make all letters uppercase.
Broadcast includes a range of color settings for the buttons used in the theme. Most sections will have button color options for style and color, including primary and secondary colors, pulled from the theme settings choices.
Product pages can display two buttons: an 'Add to Cart' button and a 'Buy it Now' button.
The 'Add to Cart' button is the default call-to-action button. It's the only button shown unless you configure and set up to use Shopify's 'Dynamic checkout buttons.' When only the 'Add to Cart' button is shown, the primary solid colors are used from the theme settings.
When only displaying the Add to Cart button, the primary solid colors are used:
Primary Solid background color
Primary Solit text color
This is the default call-to-action button and uses the Primary solid color choices:
The 'Buy it Now' button is activated when the 'Show dynamic checkout buttons' option is checked.
When both buttons, 'Add to Cart' and 'Buy it Now,' are used, the 'Buy it Now' button adopts the primary solid background and primary solid text colors.
Both buttons are displayed next when the 'Dynamic checkout buttons' option is checked.
The Buy it Now button inherits the Primary solid colors:
Primary Solid background color
Primary Solid text color
The Add to Cart inherits the Primary outline and text colors:
Primary Outline and text color
This video demonstrates how to change colors for the 'Add to Cart' and 'Buy it Now' buttons on product pages in Broadcast:
The video also covers changing the 'Add to Cart' button text.
The secondary color options are used for sections and blocks that can choose a button color. You can pre-select secondary button colors and use them throughout the theme.
In the example below, two buttons are displayed for the slideshow slide. The second is using the color settings from the secondary color palette:
In the second button block settings, you can select different color options under Color. We've used the Secondary choice to quickly insert our brand colors from the theme settings.
The primary and secondary colors are pulled from the theme settings. The white and black options are also available as quick presets.
The product form is home to variants, a quantity picker, and an 'Add to cart' button on all product pages.
Use the options in this tab to create the layout you like the most.
Broadcast allows your customers to add items to the cart without the need to refresh the page.
This is done by using asynchronous JavaScript and XML (AJAX) to get the information we need to populate the cart.
This feature can be disabled if you need to integrate an application into the cart page.
In this tab you will also find the options to toggle:
Order notes
Gift notes
Shipping estimates
Additional checkout buttons
Our product grid is the base of our collection pages and the base for a lot of our sections.
In this tab, you can:
Set the aspect ratio for your grid images
Show the second image on hover (for non-touch devices only)
Enable different badges
Enable quick add
Enable sibling swatches
Enable cutline
Enable reviews - star rating
