--- title: How do I use the Branding tab in BlockLab? description: Learn how to use the Branding tab in BlockLab to set your colours, fonts, logo, and button styles for a consistent look across your whole website's design. --- [Skip to content](https://resources.symphonycommerce.io/knowledge-base/how-do-i-use-the-branding-tab-in-blocklab#main-content) [File a Ticket](https://resources.symphonycommerce.io/knowledge-base/kb-tickets/new?hsLang=en) [Go to Customer Portal](https://clienthub.symphonycommerce.io/tickets-view?hsLang=en) [![symphony-commerce-logo-mark-white-rgb-1500px-w-350ppi](https://resources.symphonycommerce.io/hs-fs/hubfs/Design/Logo/symphony-commerce-logo-mark-white-rgb-1500px-w-350ppi.png?width=40&height=40&name=symphony-commerce-logo-mark-white-rgb-1500px-w-350ppi.png)](https://resources.symphonycommerce.io/knowledge-base?hsLang=en) - [WHY SYMPHONY?](https://www.symphonycommerce.io/pages/why-shopblocks) Show submenu for WHY SYMPHONY? - [EXCLUSIVELY B2B ECOMMERCE](https://www.symphonycommerce.io/pages/why-shopblocks#exclusivelyB2B) - [LIMITLESS INTEGRATION](https://www.symphonycommerce.io/pages/why-shopblocks#ftv) - [FASTEST TIME TO VALUE](https://www.symphonycommerce.io/pages/why-shopblocks#limitlessIntegration) - [SEAMLESS MIGRATION](https://www.symphonycommerce.io/pages/why-shopblocks#seamlessMigration) - [CUSTOMER SUCCESS](https://www.symphonycommerce.io/pages/customer-success) Show submenu for CUSTOMER SUCCESS - [CASE STUDIES](https://www.symphonycommerce.io/pages/case-studies) - [FEATURES](https://www.symphonycommerce.io/pages/features-in-focus) Show submenu for FEATURES - [NEXUS – WHITE LABEL STOREFRONT PLATFORM](https://www.symphonycommerce.io/pages/nexus) - [INTEGRATIONS](https://www.symphonycommerce.io/pages/api-integrations-to-power-up-your-ecommerce) - [FORTIS – SMARTER DISCOUNTS FOR BIGGER B2B DEALS](https://www.symphonycommerce.io/pages/fortis) - [SYMPHONY PAY – TRUSTED PAYMENT OPTIONS FOR MODERN B2B COMMERCE](https://www.symphonycommerce.io/pages/symphony-pay) - [PRICING](https://www.symphonycommerce.io/pages/pricing) - [PARTNERSHIPS](https://www.symphonycommerce.io/pages/ensemble) - [INSIGHTS HUB](https://resources.symphonycommerce.io/blog) Open main navigation Close main navigation - [WHY SYMPHONY?](https://www.symphonycommerce.io/pages/why-shopblocks) Show submenu for WHY SYMPHONY? - [EXCLUSIVELY B2B ECOMMERCE](https://www.symphonycommerce.io/pages/why-shopblocks#exclusivelyB2B) - [LIMITLESS INTEGRATION](https://www.symphonycommerce.io/pages/why-shopblocks#ftv) - [FASTEST TIME TO VALUE](https://www.symphonycommerce.io/pages/why-shopblocks#limitlessIntegration) - [SEAMLESS MIGRATION](https://www.symphonycommerce.io/pages/why-shopblocks#seamlessMigration) - [CUSTOMER SUCCESS](https://www.symphonycommerce.io/pages/customer-success) Show submenu for CUSTOMER SUCCESS - [CASE STUDIES](https://www.symphonycommerce.io/pages/case-studies) - [FEATURES](https://www.symphonycommerce.io/pages/features-in-focus) Show submenu for FEATURES - [NEXUS – WHITE LABEL STOREFRONT PLATFORM](https://www.symphonycommerce.io/pages/nexus) - [INTEGRATIONS](https://www.symphonycommerce.io/pages/api-integrations-to-power-up-your-ecommerce) - [FORTIS – SMARTER DISCOUNTS FOR BIGGER B2B DEALS](https://www.symphonycommerce.io/pages/fortis) - [SYMPHONY PAY – TRUSTED PAYMENT OPTIONS FOR MODERN B2B COMMERCE](https://www.symphonycommerce.io/pages/symphony-pay) - [PRICING](https://www.symphonycommerce.io/pages/pricing) - [PARTNERSHIPS](https://www.symphonycommerce.io/pages/ensemble) - [INSIGHTS HUB](https://resources.symphonycommerce.io/blog) - [File a Ticket](https://resources.symphonycommerce.io/knowledge-base/kb-tickets/new) - [Go to Customer Portal](https://clienthub.symphonycommerce.io/tickets-view) - [VISIT OUR WEBSITE](https://www.symphonycommerce.io/) [VISIT OUR WEBSITE](https://www.symphonycommerce.io/) How can we help you? - There are no suggestions because the search field is empty. 1. [Symphony Knowledge Base](https://resources.symphonycommerce.io/knowledge-base?hsLang=en) 2. [BlockLab](https://resources.symphonycommerce.io/knowledge-base/blocklab?hsLang=en) # How do I use the Branding tab in BlockLab? ## The Branding tab in BlockLab is where you set the core styling for your whole website: colours, fonts, your logo, and button styles, all in one place, so everything stays consistent across every page. ### How do I access the Branding tab? 1. Open a page in **BlockLab**. 2. Click on the **Branding** tab at the top. ![](https://resources.symphonycommerce.io/hs-fs/hubfs/image-png-Aug-04-2026-12-54-53-3470-PM.png?width=235&height=32&name=image-png-Aug-04-2026-12-54-53-3470-PM.png) You'll see four sections: **Design**, **Fonts**, **Logo**, and **Buttons**. ![](https://resources.symphonycommerce.io/hs-fs/hubfs/image-png-Aug-04-2026-12-55-13-5515-PM.png?width=232&height=62&name=image-png-Aug-04-2026-12-55-13-5515-PM.png) ### Design **Design** is where you set the overall look and feel of your site, from your brand colours and background through to how wide your pages display. ![](https://resources.symphonycommerce.io/hs-fs/hubfs/Screenshot%202026-08-04%20at%2010-54-52-png.png?width=670&height=59&name=Screenshot%202026-08-04%20at%2010-54-52-png.png) - **Brand Colours** give you instant access to your key hex codes, so you're not hunting them down every time you need one. - **Main BG** sets a solid background colour for your website, or you can click **Choose BG Image** to use an image instead. Once an image is set, use **BG Style** and **BG Size** to control how it displays, for example whether it repeats or scales to fit. - You can also set **Maximum Page Width** here, choosing between Narrow (960px), Default (1170px), or Extra Wide (1280px), to control how wide your site displays on larger screens. ![](https://resources.symphonycommerce.io/hs-fs/hubfs/image-png-Aug-04-2026-11-11-38-2819-AM.png?width=169&height=171&name=image-png-Aug-04-2026-11-11-38-2819-AM.png) ### Fonts **Fonts** is where you set the typography for your whole website, so every heading, body of text, button, and link stays consistent wherever it appears. ![](https://resources.symphonycommerce.io/hs-fs/hubfs/Screenshot%202026-08-04%20at%2011-08-33-png.png?width=670&height=56&name=Screenshot%202026-08-04%20at%2011-08-33-png.png) - Use the **Choose Font to Edit** dropdown to pick which text type you'd like to update: Heading 1, Heading 2, Body Text, Buttons, Links, or Links (hover). ![](https://resources.symphonycommerce.io/hs-fs/hubfs/image-png-Aug-04-2026-12-52-27-1677-PM.png?width=134&height=265&name=image-png-Aug-04-2026-12-52-27-1677-PM.png) - For each one, choose a font from the list of Google Fonts, set its size in pixels, and apply Bold, Italic, Underline, or capitalisation as needed. ![](https://resources.symphonycommerce.io/hs-fs/hubfs/image-png-Aug-04-2026-12-53-03-5083-PM.png?width=412&height=304&name=image-png-Aug-04-2026-12-53-03-5083-PM.png) - If the font you want isn't in the list, click **Custom Fonts**. ![](https://resources.symphonycommerce.io/hs-fs/hubfs/image-png-Aug-04-2026-12-53-33-2438-PM.png?width=164&height=47&name=image-png-Aug-04-2026-12-53-33-2438-PM.png) - Enter the exact Google Font Name as it appears on Google Fonts, for example Major Mono Display, set the Font Weight, then click Add Google Font. - You can review everything you've added so far from the Existing Fonts panel, using Edit Font/CSS Theme. ![](https://resources.symphonycommerce.io/hs-fs/hubfs/Screenshot%202026-08-04%20at%2011-25-49-png.png?width=550&height=274&name=Screenshot%202026-08-04%20at%2011-25-49-png.png) ### Logo **Logo** is where you upload the logo and favicon your website uses wherever the Logo block appears. ![](https://resources.symphonycommerce.io/hs-fs/hubfs/Screenshot%202026-08-04%20at%2011-08-46-png.png?width=670&height=82&name=Screenshot%202026-08-04%20at%2011-08-46-png.png) - Upload your main logo and favicon here. - Your logo then becomes available directly through the **Logo** block, so you can add it to any page without needing to find it in the image library each time. ### Buttons **Buttons** is where you define a consistent style for every button on your site, so you don't need to style each one individually. ![](https://resources.symphonycommerce.io/hs-fs/hubfs/Screenshot%202026-08-04%20at%2011-09-09-png.png?width=670&height=72&name=Screenshot%202026-08-04%20at%2011-09-09-png.png) - Choose between Flat, Gradient, or Ghost, then pick your Background (BG) and Border colours. ![](https://resources.symphonycommerce.io/hs-fs/hubfs/Screenshot%202026-08-04%20at%2011-31-25-png.png?width=84&height=143&name=Screenshot%202026-08-04%20at%2011-31-25-png.png) - Turn on **Auto Border** if you'd like the border colour generated for you. It will be set slightly darker than your chosen background colour.   ![](https://resources.symphonycommerce.io/hs-fs/hubfs/Screenshot%202026-08-04%20at%2011-33-00-png.png?width=248&height=113&name=Screenshot%202026-08-04%20at%2011-33-00-png.png) ### Tips - Changes made in the Branding tab apply across your whole website, so it's worth checking a few different pages after editing to make sure nothing looks off elsewhere. - Set your fonts and Maximum Page Width early on. Most other blocks and rows will follow these settings by default, saving you from adjusting them individually later. - Remember to publish your changes. They won't appear on the live website until you do. - [Getting started](https://resources.symphonycommerce.io/knowledge-base/getting-started?hsLang=en) - [Settings](https://resources.symphonycommerce.io/knowledge-base/settings?hsLang=en#main-content) - [Payment Methods](https://resources.symphonycommerce.io/knowledge-base/settings?hsLang=en#payment-methods) - [Redirects](https://resources.symphonycommerce.io/knowledge-base/settings?hsLang=en#redirects) - [Deliveries](https://resources.symphonycommerce.io/knowledge-base/settings?hsLang=en#deliveries) - [Notifications And Emails](https://resources.symphonycommerce.io/knowledge-base/settings?hsLang=en#notifications-and-emails) - [Users](https://resources.symphonycommerce.io/knowledge-base/settings?hsLang=en#users) - [Site Settings](https://resources.symphonycommerce.io/knowledge-base/settings?hsLang=en#site-settings) - [Varnish Cache](https://resources.symphonycommerce.io/knowledge-base/settings?hsLang=en#varnish-cache) - [Tracking, SEO And Javascript](https://resources.symphonycommerce.io/knowledge-base/settings?hsLang=en#tracking-seo-and-javascript) - [Reports](https://resources.symphonycommerce.io/knowledge-base/reports?hsLang=en) - [BlockLab](https://resources.symphonycommerce.io/knowledge-base/blocklab?hsLang=en) - [Content](https://resources.symphonycommerce.io/knowledge-base/content?hsLang=en#main-content) - [Pages](https://resources.symphonycommerce.io/knowledge-base/content?hsLang=en#pages) - [Menus](https://resources.symphonycommerce.io/knowledge-base/content?hsLang=en#menus) - [Strings](https://resources.symphonycommerce.io/knowledge-base/content?hsLang=en#strings) - [Blogs / News](https://resources.symphonycommerce.io/knowledge-base/content?hsLang=en#blogs-news) - [Snippets](https://resources.symphonycommerce.io/knowledge-base/content?hsLang=en#snippets) - [Forms](https://resources.symphonycommerce.io/knowledge-base/content?hsLang=en#forms) - [Downloads](https://resources.symphonycommerce.io/knowledge-base/content?hsLang=en#downloads) - [Products](https://resources.symphonycommerce.io/knowledge-base/products?hsLang=en#main-content) - [Groups](https://resources.symphonycommerce.io/knowledge-base/products?hsLang=en#groups) - [Categories](https://resources.symphonycommerce.io/knowledge-base/products?hsLang=en#categories) - [Brands](https://resources.symphonycommerce.io/knowledge-base/products?hsLang=en#brands) - [Reviews](https://resources.symphonycommerce.io/knowledge-base/products?hsLang=en#reviews) - [Products](https://resources.symphonycommerce.io/knowledge-base/products?hsLang=en#products) - [Stock](https://resources.symphonycommerce.io/knowledge-base/products?hsLang=en#stock) - [Catalogues](https://resources.symphonycommerce.io/knowledge-base/products?hsLang=en#catalogues) - [Customisations](https://resources.symphonycommerce.io/knowledge-base/products?hsLang=en#customisations) - [Discounts](https://resources.symphonycommerce.io/knowledge-base/discounts?hsLang=en#main-content) - [Discounts Fortis](https://resources.symphonycommerce.io/knowledge-base/discounts?hsLang=en#discounts-fortis) - [Plugins](https://resources.symphonycommerce.io/knowledge-base/plugins?hsLang=en#main-content) - [Google Shopping Feed](https://resources.symphonycommerce.io/knowledge-base/plugins?hsLang=en#google-shopping-feed) - [One-Time Passcode](https://resources.symphonycommerce.io/knowledge-base/plugins?hsLang=en#one-time-passcode) - [Out Of Stock Notify](https://resources.symphonycommerce.io/knowledge-base/plugins?hsLang=en#out-of-stock-notify) - [Auto Tags](https://resources.symphonycommerce.io/knowledge-base/plugins?hsLang=en#auto-tags) - [Compare Products](https://resources.symphonycommerce.io/knowledge-base/plugins?hsLang=en#compare-products) - [Business Customers](https://resources.symphonycommerce.io/knowledge-base/plugins?hsLang=en#business-customers) - [Stickers](https://resources.symphonycommerce.io/knowledge-base/plugins?hsLang=en#stickers) - [Custom Fields](https://resources.symphonycommerce.io/knowledge-base/plugins?hsLang=en#custom-fields) - [B2B Sales](https://resources.symphonycommerce.io/knowledge-base/plugins?hsLang=en#b2b-sales) - [Auto Checkout](https://resources.symphonycommerce.io/knowledge-base/plugins?hsLang=en#auto-checkout) - [Tempus](https://resources.symphonycommerce.io/knowledge-base/plugins?hsLang=en#tempus) - [Orders](https://resources.symphonycommerce.io/knowledge-base/orders?hsLang=en#main-content) - [Returns](https://resources.symphonycommerce.io/knowledge-base/orders?hsLang=en#returns) - [Customers](https://resources.symphonycommerce.io/knowledge-base/customers?hsLang=en) - [My Account](https://resources.symphonycommerce.io/knowledge-base/my-account?hsLang=en) - [Marketing](https://resources.symphonycommerce.io/knowledge-base/marketing?hsLang=en#main-content) - [Merchandising](https://resources.symphonycommerce.io/knowledge-base/marketing?hsLang=en#merchandising) - [Email](https://resources.symphonycommerce.io/knowledge-base/marketing?hsLang=en#email) [![symphony-commerce\_logo-mark](https://resources.symphonycommerce.io/hubfs/logo-mark-symphony-commerce-black-ergb.svg "symphony-commerce_logo-mark")](http://www.symphonycommerce.io) 1 St Peter's Square  Stockport, SK1 1NZ [support@symphonycommerce.io](mailto:support@symphonycommerce.io) [(+44)161 399 7467](tel:01613997467) Copyright © 2026, Symphony Commerce