My second guide is how to change the standard Prettify banners and avatar to your own design.

Prettify has four colour choices so first thing to do is find the one that closest matches your brand. There’s a guide here on how to change the colours.

Once you’ve chosen your colour scheme, you can create your banner and avatar images. The Prettify banner is 900×100 pixels in size and the avatar is 75×75 pixels. You should try to keep yours to a similar size. You can create your images using any graphics program and you should save them as either .gif, .jpg or .png files. Keep a note of the image names and dimensions as you’ll need these later. Your avatar should be saved with the filename avatar.jpg if possible as this will make things much easier later.

Again, we’ll be making the changes in the Assets area of your Shopify Admin, using the Theme Editor.

Click the link to Upload a new theme asset and upload your new banner and/or avatar images. They’ll now appear in the list of files.

To change the banner

Open the corresponding stylesheet for the colour theme you are using. If you’re using the blue theme, then open blue.css, the red uses red.css etc. For this example I’m using the blue.css.

Find this piece of code (near the top)

#header { background-color: #fff; background-image:url(header-blue.gif); }

and change header-blue.gif to the name of your banner file. It may be something like banner.gif, or logo.jpg. You only need the file name, not a full url.

Save the file and view your shop in a new window. You may need to refresh your browser to see the changes.

If your new banner image is not 100 pixels high then there is one more change to make. Go back to the Theme Editor and open the shop.css file. Scroll down until you see this code:

#header { clear:both; background-repeat:no-repeat; height:100px; padding-bottom:10px; }

and change the height (100px) to the height of your new banner. Save and view your shop.

Removing the Shop Name from the banner

If you don’t want your shop name written over your banner image then open the shop.css file. Look for the following code:

#header h1 { text-align:left; }

and edit so it looks like this:

#header h1 { text-align:left; display: none; }

This will hide the header text. Save and view your shop.

Changing the avatar image

If your avatar was named avatar.jpg it will have replaced the old avatar image. View your shop to see your new avatar in place. You may need to refresh the page to see it.

If your file has a different filename then open the theme.liquid file and look for the following code (about half way down the page):

<div class="avatar">{{"avatar.jpg" | asset_url | img_tag }}</div>

Change avatar.jpg to your new file name. Save and view your shop.

I hope this helped you. Please leave a comment if you have any problems.