Everything you need to display your store's logo across your Boardwalk theme — from uploading light and dark logo images to configuring text fallbacks and sizing for desktop and mobile.
A logo is the visual mark that represents your brand — it's usually the first thing visitors notice when they land on your store. A well-placed logo helps customers instantly recognise your business and builds trust across every page of your site.
In the Boardwalk theme, the Logo block lets you display your store's logo as an image or as styled text. The block supports two logo variants — a light version designed for dark backgrounds and a dark version designed for light backgrounds — so your logo always looks its best regardless of the colour scheme around it. If no image logo has been uploaded for the selected type, the block automatically falls back to a customisable text logo instead.
Follow these steps to upload your logo images and add the Logo block to any section in the Boardwalk theme.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. Open the
Theme settings panel (the paintbrush icon
at the bottom-left of the editor) and look for the
Logo area. Upload a
Light logo (a light-coloured version for
use on dark backgrounds) and a
Dark logo (a dark-coloured version for
use on light backgrounds).
Note: Logo images are uploaded in Theme settings, not inside the block itself. The Logo block pulls these images automatically based on which type (Light or Dark) you choose in the block settings.
While still in the Theme Editor, use the page selector dropdown at the top centre of the editor to navigate to the page where you want the logo to appear (for example, the home page or a landing page).
In the Theme Editor sidebar, find the section or group where you want to place the logo. Click Add block and select Logo from the block list. The block will appear and immediately display whichever logo image matches the selected type.
Click on the Logo block in the sidebar to
open its settings. Use the Type dropdown
to choose Light or Dark. Pick
the option that contrasts well with the background of the
section your logo sits in — for example, select
Light if the section has a dark
background.
Use the Desktop and Mobile width sliders to control how large the logo appears on each screen size. The logo will never exceed the width of its parent container, so it stays responsive even at higher values.
If you haven't uploaded an image logo for the selected type, the block shows a text-based logo instead. Enter your store name or brand text in the Text field and choose a Color to style it. These fields only appear when no matching image logo is available.
Click Save in the Theme Editor. Preview your page to verify the logo is displaying at the correct size and with the right variant for its background.
These settings are available when you click on a Logo block in the Theme Editor sidebar.
Selects which logo image to display. Choose
Light to show the light logo (best on dark
backgrounds) or Dark to show the dark logo
(best on light backgrounds). The block will display the
corresponding image uploaded in your Theme settings.
Sets the width of the logo on desktop screens. Range: 200px to 800px. The logo will never exceed the width of its parent container.
Sets the width of the logo on mobile screens. Range: 100px to 400px. The logo will never exceed the width of its parent container.
A text-based logo that is displayed when no image logo has been uploaded for the selected type. Enter your store name or brand name here. This setting only appears when the matching image logo is missing.
Sets the colour of the text logo. Use this to match the text to your brand colours or to ensure it contrasts well with the section background. This setting only appears when the matching image logo is missing.
Understanding a few key behaviours will help you get the most out of the Logo block.
The Boardwalk theme stores two versions of your logo in
Theme settings — a Light logo and a
Dark logo. The Logo block's
Type setting controls which one is shown.
When set to Light, only the light logo image
is displayed and the dark image is hidden, and vice versa.
This means you can place multiple Logo blocks across
different sections and set each one to the variant that
looks best on that section's background.
If you haven't uploaded an image for the selected logo
type (for example, you chose Light but no
light logo image exists), the block automatically switches
to a text-based logo. The text is rendered in bold at a
size proportional to the logo width setting, so it scales
naturally alongside image logos. You can customise the
text content and colour using the
Text and Color settings
that appear when no matching image is available.
The block uses separate width values for desktop and mobile, so your logo can be larger on desktop screens and more compact on phones. Regardless of the width value you set, the logo will never overflow its parent container — it automatically caps at 100% of the available space.
When using a text logo, the alignment of the text is inherited from the parent group that the Logo block sits inside. For example, if the parent group is set to centre alignment, the text logo will also appear centred. This keeps the logo consistent with the rest of the content in that group without needing a separate alignment setting.
Light but you haven't uploaded a Light logo
in Theme settings, the block will display the text logo
instead. Upload the matching image in
Theme settings → Logo to fix this.