You're looking for the Shopify logo. Most of the time, it's for one of these reasons: displaying a "powered by Shopify" badge on a site, illustrating a presentation, or integrating the brand into a visual. Here's where to find the official file, the exact colors, the formats to use on the web, and how to display it without breaking Shopify's brand rules.
Where to download the official logo
Shopify makes its logos available on its brand resources page, at shopify.com/brand-assets. You'll find three families there:
- The main logo: the shopping bag (the "brandmark") next to the name in italics, in color.
- The inverted version: the name in white, designed for dark backgrounds.
- The monotone versions: black or white, for single-color printing or busy backgrounds.
Always download from that source. The versions floating around on Google Images are often the old logo, distorted or in low resolution. Shopify rebranded, and an old version gives you away instantly.
The official Shopify logo colors
The iconic green of the logo is #95BF47. The brand pairs it with a darker green for contrast and variations, plus black and white for the monotone versions.
| Color | Hex |
|---|---|
| Shopify green | #95BF47 |
| Dark green | #5E8E3E |
| Black | #000000 |
| White | #FFFFFF |
If you reproduce the shade by hand, for a button or a badge, start from #95BF47. Avoid picking an approximate color from a screenshot: the rendering varies from one screen to another, and you end up with a green that clashes next to the real one.
Which format to use on the web
For a website, SVG is almost always the right choice. It's a vector format: it stays crisp at any size, from favicon to large high-density screen, and it weighs a few kilobytes. PNG, on the other hand, forces you to lock a resolution, and a PNG large enough to stay sharp on a high-density mobile quickly weighs ten times more than an equivalent SVG.
My rule on the themes I code: inline SVG for logos visible from the first load, which avoids one more network request. The weight of a logo seems trivial, but multiplied by each page and each visitor, it counts in the performance budget I keep an eye on. I've laid out this reasoning in my article on Shopify store speed.
The usage rules to respect
Shopify governs the use of its logo. The points to know:
- Don't use the old logo.
- Don't isolate the name (the "wordmark") on its own.
- Don't stretch it, compress it, or rotate it.
- No gradient, no drop shadow.
- Don't stack it vertically and don't create your own variant.
- Give it breathing room around it, and respect the minimum sizes: 80 pixels in digital, 28 mm in print.
- Avoid busy or low-contrast backgrounds. On a dark background, use the inverted version or the white monotone.
The principle that sums it all up: the logo must stay legible and identifiable at a glance. The moment someone hesitates about what they're looking at, it's a miss.
The "Powered by Shopify" badge in your theme
If your goal is to show that your site runs on Shopify, the free theme already places one in the footer ("Powered by Shopify"). You can remove it or customize it from the theme editor, it's a standard setting.
For a custom badge (partner page, "built on Shopify" mention), take the official SVG logo, keep the regulation colors and spacing, and link it to shopify.com. It's a detail, but it's the kind of finishing touch you notice on a well-cared-for store. You'll see others in my selection of Shopify stores that inspire.
In short
The official logo downloads from shopify.com/brand-assets, the reference green is #95BF47, and on the web you favor SVG. The rest is just brand common sense: don't distort it, give it air, keep it legible.
The logo is just a small piece of a store's image. If you want everything else to follow (speed, design, finishing touches that inspire trust), that's exactly what I work on for the sites I take over. You can see my work in the portfolio section.
