About
Your logo is the visual identity of your brand. It appears in key areas of your store — like the header, mobile menu, and password page — and helps customers instantly recognize your business. A well-configured logo gives your store a polished, professional look across all devices.
In the Boardwalk theme, the Logo settings are found under Theme Settings and let you upload two versions of your logo (dark and light), control the display width on desktop, and set a favicon for browser tabs. The theme automatically selects the correct logo version based on the background it's displayed against, ensuring your logo always looks clear and legible.
How to Set Up Your Logo
Follow these steps to upload and configure your store's logo in the Boardwalk theme.
Open Theme Settings
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. In the Theme Editor,
click the gear icon (⚙) in the left
sidebar to open Theme settings.
Navigate to the Logo Section
Inside Theme settings, click on Logo. You'll see options for uploading your dark logo, light logo, setting the desktop logo width, and adding a favicon.
Upload Your Dark Logo
Click the Dark logo image picker and upload a dark-colored version of your logo. This version is designed for use on light backgrounds. For best results, use a PNG file with a transparent background.
Upload Your Light Logo
Click the Light logo image picker and upload a light-colored version of your logo. This version is designed for use on dark backgrounds. Again, a PNG with a transparent background works best.
Tip: If you only have one version of your logo, upload it to both slots. However, uploading both a dark and a light version ensures your logo is always readable no matter what color scheme a section uses.
Set the Desktop Logo Width
Use the Desktop logo width slider to control how wide your logo displays on desktop screens. The range is 50px to 300px. Adjust this until your logo looks balanced alongside your navigation and header elements.
Add a Favicon (Optional)
Click the Favicon image picker and upload a small icon for your store. This image appears in browser tabs, bookmarks, and mobile home screens. It will be scaled down to 32 × 32 pixels, so use a simple, recognizable image.
Save and Preview
Click Save in the Theme Editor. Preview your store to verify your logo appears correctly in the header, and check that the favicon shows in the browser tab.
Settings Reference
These settings are found under Theme settings → Logo in the Theme Editor.
Logo Settings
A dark-colored version of your logo, designed for use on light backgrounds. Upload a PNG with a transparent background for the cleanest result.
A light-colored version of your logo, designed for use on dark backgrounds. Upload a PNG with a transparent background for the cleanest result.
Controls the maximum display width of your logo image on desktop screens. Range: 50px to 300px (in 10px increments). The logo height adjusts automatically to maintain its original proportions.
A small icon that represents your store in browser tabs, bookmarks, and mobile device home screens. The uploaded image will be scaled down to 32 × 32 pixels. Use a simple, square image for the best appearance at small sizes.
How Logos Are Used in the Theme
The logo images you upload here are shared across multiple areas of the theme. Understanding where they appear helps you choose the right images.
Where Your Logo Appears
Your logo displays in the site header across all pages. The header section has a Logo type setting that lets you choose which version — dark or light — to display. The theme selects the appropriate version based on this setting and your header's color scheme.
When visitors open the hamburger menu on smaller screens, your logo appears at the top of the slide-out panel.
The theme includes a reusable Logo block that you can add to sections like the Footer or other customizable areas. This block pulls directly from the logos uploaded here. If no logo images are uploaded, the Logo block displays a text-based fallback instead.
If you don't upload any logo images, the theme displays a text-based logo using your store name. The Logo block includes settings for the fallback text content and its color.
Understanding Dark and Light Logos
Boardwalk supports two logo versions so your branding looks great on any background color.
Dark Logo
This is a dark-colored version of your logo — for example, black or dark gray text/icon — intended to display on light or white backgrounds. When your header or section uses a light color scheme, the theme will show this version.
Light Logo
This is a light-colored version of your logo — for example, white or cream text/icon — intended to display on dark backgrounds. When your header or section uses a dark color scheme, the theme will show this version.
Tip: For the best results, prepare both logo versions as PNG files with transparent backgrounds. This ensures they blend seamlessly into any section background without visible white or colored boxes around the logo.
Important Notes
Keep these details in mind when working with the Logo settings.
Things to Know
The logos you upload here are used across the entire theme. Any section or block that displays a logo pulls from these same images. You only need to upload your logos once.
The Header section has its own Logo type setting that controls which logo version is displayed. After uploading your logos here, go to the Header section settings and choose the appropriate logo type.
The Desktop logo width setting controls the logo size on desktop only. On mobile devices, the logo automatically scales down to fit the available header space.
PNG is recommended for logos because it supports transparency. SVG, JPG, and WebP formats are also supported by Shopify, but PNG gives the most consistent results for logos with transparent backgrounds.
The dark and light logo versions work in tandem with the color schemes you've defined in Theme settings → Colors. Make sure you've set up your color schemes before deciding which logo version to use in each area.