My Logo is blurry, how do I fix it?

When adding a logo to your store the theme will show that at it's true uploaded size.
This will on retina screens blur the images as they are being shown on a greater scale than their true size.

Correcting the sharpness is simple and does not require that you have 2 different logo images for different resolutions, here is how to sharpen that up.

  1. From your Shopify Admin click on Themes > Customize Theme > Actions > Edit Code
  2. On the next page open the Assets folder and choose Stylesheet.css.liquid
  3. Scroll to the bottom of the page and after all other code paste in the following:
#logo img { max-width: 220px; }

You can increase the 220px or decrease this as needed, but click save when done. Then go to Themes > Customize Theme and open the section named Header upload a large version of your logo that would be oversized for the site.

This will upload that large logo but the code that you added above will limit its size helping it to display in sharp quality on all screen sizes.