Logo
Your brand’s logo is a key element in shaping trust and first impressions. The Materia theme gives you full control over how your logo appears across your site, including on transparent headers, desktop, and mobile.
Here’s how to customize everything under Logo Settings:
Logo Uploads
Logo Image
Upload your main logo here. This will be displayed in the site header and throughout your store.
📂 Recommended format: PNG or SVG 📐 Best size: around 110 x 70px for optimal clarity
Logo on Transparent Header
Use this to upload an alternate version of your logo that appears on transparent headers or sticky sections.
Why it matters: If your main logo is dark, and your header background is also dark, it won’t be visible. That’s why having a lighter version for transparent or overlay backgrounds is essential.
📂 Supported: JPG, PNG, SVG 📐 Recommended size: 110 x 70px 🎨 You can fine-tune positioning, color, and size in the Header section settings.
Logo Sizes
Customize how large or small your logo appears on different devices.
Desktop Logo Size
Control the width (in pixels) of the logo on larger screens like laptops and desktops.
Default: 100 Tip: Adjust this depending on how prominent you want your brand shown in the header.
Mobile Logo Size
Adjust the logo size specifically for mobile screens.
Default: 105 Note: Use slightly larger sizes for better mobile visibility without overcrowding the menu.
Logo General Positioning
Fine-tune where your logo sits inside the header.
Mobile Logo Horizontal Position
Adjust the left-right alignment of your logo on mobile.
Value range: Negative values move it left, positive values move it right. Default: 0 (centered)
Desktop Logo Horizontal Position
Change the horizontal placement of your logo on desktop.
Use this if:
You have a larger menu on one side
You want your logo to appear more aligned with your layout
Default: 0 (centered)
Don’t Have a Logo Yet?
If you don’t have a logo, you can create one for free using tools like Shopify's logo maker or other design platforms.
Last updated