Broadcast v6.2 has been released - Learn more about
What's new
Broadcast Documentation
NewSupport
Latest version
Latest version
  • About Broadcast
    • Broadcast theme documentation
    • Feature requests
  • Updates
    • What's new in Broadcast
      • Release Notes
      • About v6.2 release
      • About v6.1 release
      • About v6.0 release
      • About v5.8 release
      • About v5.7 release
      • About v5.6 release
      • About v5.5 release
      • About v5.4 release
      • About v5.3 release
      • About v5.2 release
      • About v5.1 release
      • About v5.0 release
      • About v4.0 release
  • Sections
    • Broadcast sections
      • Demo store sections
      • Accordion
        • Text column block
        • Image column block
        • Icon column block
        • Custom code block
        • Contact form block
      • Accordion group
        • Heading block
        • Question block
      • Before and After
        • Heading block
        • Subheading block
        • Text block
        • Button block
      • Blog posts
      • Collection list
        • Collection block
      • Collection list hover
        • Collection block
      • Countdown timer
        • Subheading block
        • Heading block
        • Text block
        • Buttons block
      • Contact form
        • Email block
        • Message block
        • Text line block
        • Text area block
        • Telephone block
        • Heading block
        • Spacer block
        • Single checkbox block
        • Select dropdown block
        • Radio buttons block
      • Custom code
      • Custom content
        • Image block
        • Text block
        • Newsletter block
        • Testimonial block
        • Product block
        • Video block
        • Collection block
        • Before and after block
      • Divider
      • Featured blog posts
        • Featured post block
      • Featured collection
      • Featured product
      • Highlights
        • Highlight block
      • Image banner
      • Image with scrolling text
      • Image with text
      • Image with text slider
      • Map
      • Multicolumn
      • Newsletter
      • Press logos
      • Products with image
      • Rich text
      • Rich text with columns
      • Scrolling text
      • Shop the look
      • Sidebar
      • Slideshow
      • Tab collections
      • Testimonials
      • Text columns with icons
      • Text columns with images
      • Text promo
      • Text with products
      • Timeline
      • Video
  • Theme settings
    • Theme settings
      • Colors
      • Typography
      • Buttons
      • Layout
      • Search
      • Social media
      • Product Grid
      • Product Form
      • Cart
  • Header
    • Announcement bar
      • Announcement bar settings
      • Free shipping message
      • Countdown timer
      • Text announcement
      • Custom code
      • Target settings
    • Header
      • Demo store header settings
      • Header section
      • Navigation images
      • Quantity indicators
      • Transparent header
      • Header icons
      • Social icons
      • Sticky header
      • Target settings
    • Toolbar
      • Header toolbar
      • Video walkthrough
    • Mobile menu
      • Getting started
      • Mobile menu blocks
  • Footer
    • Footer settings
    • Footer blocks
      • Link list
      • Newsletter
      • Social
      • Text
      • Page
  • Products
    • Product pages
      • Accordion section
      • Custom form field
      • FAQ Accordions
      • Final Sale
      • Free products
      • Low inventory message
      • Out-of-stock notification
      • Pre-order using metafields
      • Pre-order products using tags
      • Related products
      • Sale items
      • Settings and layout
      • Siblings
      • Size charts
      • Swatches (Updated)
      • Swatch collection styles
      • Tabs and accordions
      • Tab content using metafields
      • Unique image banners
      • Upselling
      • Variant images
  • Product Theme Blocks
    • Title
    • Price
    • Variant picker
    • Buy buttons
    • Siblings
    • Description
    • Upsell
    • Inventory countdown
    • Sharing
    • Local pickup
    • Text
    • Custom code
    • Icon
    • Divider
    • Line item property
    • Feature
    • Complementary products
    • Popup
  • Collections
    • Collection pages
      • Collection page settings
      • Swatch collection styles
      • Product badges
      • Product badges with metafields
      • Product filtering
      • Quick add
      • Sub-collections
      • Cutline second line
      • Featured image
  • Pages
    • Page templates
      • Demo store about page
      • Creating page templates
      • Page section
      • About page templates
  • Blogs
    • Blogs and articles
      • About blogs and articles
      • Featured posts
      • Article page
      • Product links in blog posts
      • Article theme blocks
  • Overlay
    • Popups
      • Popups Theme Blocks
      • Large newsletter
      • Text promo
      • Small newsletter
      • Cookie consent
      • Coupon codes
      • Popup Behavior and Target
  • Promotions
    • Upselling
      • Upselling with metafields
      • Upselling with tags
  • Siblings
    • Product siblings
      • About product siblings
      • How to setup siblings
      • Siblings metafields
      • Siblings color
      • Siblings collection
      • Siblings product setup
      • Siblings block
      • Customizations
  • FAQ
    • Frequently asked questions
      • How to update Broadcast
      • Default theme content
      • Share preview link
      • Hiding prices
      • How to use sections
      • Section blocks
      • How to remove Powered by Shopify
      • Improving the speed of your site
      • How to prevent your images from getting cropped
      • Check your theme version
      • CSS customizations
  • License
    • Theme license
  • Support
    • Contacting support
    • Hire a Shopify Expert
    • Missing Cart Drawer after Updating
Powered by GitBook
On this page
  • Theme Customizer
  • Product pages
  • Theme Sections
  • Global CSS
  • Example of code snippet
  • Alternative method
Export as PDF
  1. FAQ
  2. Frequently asked questions

CSS customizations

Adding your own custom styles and CSS overrides to the theme

PreviousCheck your theme versionNextTheme license

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.

Advantages

  • When updating Broadcast to newer versions, these CSS changes will automatically be applied to your new theme.

  • The Shopify Update tool migrates any Custom CSS added to the Theme Customizer.

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.

Disadvantages

  • Code added using the Code Editor will not automatically migrate when you update your theme.

Please use the above methods to avoid manually adding CSS code changes after each time you update Broadcast.

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.