Tutorial to add view cart text and icon to your navigation menu or SmugMug site

Soul Gaze Photography

Here's another tutorial by me thanks to the following question asked in my tutorial to remove SmugMug footer branding here.

Dreadnote wrote: »

Any thoughts on having an actual cart image in the navbar instead of the words "view cart"?

Here is my tutorial for the solution to Dreadnote's question:

1. First, download a cart icon. It needs to have a transparent PNG background so you can use it regardless of the background on your SmugMug site.
2. Upload the icon to your chosen SmugMug gallery.
3. Open up customize. Select 'entire site' (the red block).
4. Select 'photo' > 'single photo' content block. Drag it to where you want your cart icon.
5. Click the tool icon to edit the content block if the menu doesn't open automatically.
6. Select your image by clicking the photo button. In the 'action on click' box of the same menu, choose 'go to URL'. Insert: https://secure.smugmug.com/cart/
7. Photo size should be custom with original aspect ratio due to the tiny size of the image. Resize until your file looks clear. Mine is currently 35 x 35 which is smaller than the 52x52 file size, so should look clear on other browsers too.
8. Then drag the title content block to where you want it. Title it 'cart' or 'view cart' etc.
9. Lastly, play with the locations of the title and cart icon via the tool icon on the content block in order to control left, right & center orientation and also via the ruler icon to adjust the margin spacing. After some playing, I got both of mine to line up with 'View Cart' on the left and the cart icon on the right. Both are below my left hand navigation and scroll down with the page.

Here is a cart icon that matches the SmugMug logo style:
http://findicons.com/icon/222087/cart?id=331347


Here is the source for the cart icon I used:
http://app-bits.com/free-icons.html


Check it out on my site, live! http://www.soulgazephotography.smugmug.com
If you need help or additional explanations, let me know!

This tutorial will work to move this either in navigation as I have, or in your header, footer or other areas. Good luck!
I'm sure there are other ways to do this too, so feel free to comment.