1. Home
  2. Customization
  3. Personalize your SmugMug shopping cart

Personalize your SmugMug shopping cart

Intro

Today I am going to show you how to personalise the shopping cart on your SmugMug site by adding some custom images to product labels and by tweaking the way they are displayed.  So we are going to start with the default SmugMug shopping cart look:

SmugMug Shopping cart before change

 

We will then add some CSS code to make the shopping cart look like this:

customize-smugmug-shopping-cart-after

 

Preparation

The only thing that you will need to prepare is images for all the sections that you would like to customise in the shopping cart.  The default SmugMug shopping cart offers these categories WALL ART, DESK ART, PAPER PRINTS, KEEPSAKES, DIGITAL DOWNLOADS.

So you will need an image that is exactly 336px by 132px or 672px by 264 ( I recommend using the second resolution so your cart images look sharp on retina displays ) for each of the categories that you would need to modify.  These images need to be uploaded into an UNLISTED gallery on your SmugMug account.

 

CSS code

This CSS code needs to be added to your THEME → ADVANCED tab → CSS:

 

YOUR IMAGE LINKS

Make sure that you replace links in the above code “http://www.linktoyourimage.com/image.jpg” with links to your own images that you have uploaded into your UNLISTED gallery.

Updated on July 13, 2017

Was this article helpful?

Related Articles

Comments

  1. Wee bit lost with the link to the images. I am using site/gallery/image.jpg and nothing is showing up. My images are in an unlisted gallery and are 672×264. Where have I gone wrong?

    1. Hey Mark. Can you please send me a link to your site – make sure that the code and image links are already on your site.

Leave a Comment