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.

  2. I’ve spent the last hour trying to figure out how to get this to work. I’ve tried generating the links according to Tomasz’s screenshot. Still, nothing happens when I go to the cart (not logged-in, in a different browser). Any help would be appreciated.

      1. Thanks Tomasz. I finally figured it out. I was doing two things incorrectly. I had the UNLISTED gallery set so that I couldn’t get a full-size shareable link (so I’m guessing the links I was pasting in were referencing photos that wouldn’t fit into the right size, 672×264.) When fixing that still didn’t work I realized I was pasting the CSS code into the theme of my homepage, not the “Entire Site.” Seems to be working for me now. I’m not very experienced with website building or code, but I’m glad I was able to change this. Those stock shopping cart photos are so jarring against the photos on my site. For what’s its worth, my site is: http://ouraybyflight.com/

        1. I have tested it and everything looks good…. except one thing – your domain. Your domain is not correctly configured – you are only forwarding the domain and you are masking the address. This is bad – because this will break your site – especially the shopping cart.

          You will need to contact your domain registrar and ask them to change the settings to:

          CNAME “www” pointing to “domains.smugmug.com”
          Also – they will need to set up forwarding on your domain:
          “ouraybyflight.com” forwarding to “www.ouraybyflight.com”

          After you change the settings on your domain – you will need to go to your SmugMug account – > open account settings – > me – > account – > now at the bottom insert your custom domain.

          SmugMug has a great article on how to do this correctly – here:
          http://help.smugmug.com/customer/portal/articles/93340-how-do-i-use-my-custom-domain-?b_id=1644

          1. Wow! Thanks for catching that. I followed the video and think I have it configured correctly now. Could you possibly confirm that I do?

          2. Mike I have tested your site and your domain and I can confirm that everything is set correctly. Your domain is working as it should :}

  3. Hi this is great customization. Any way to change the font colour and remove the drop shadow on the font ?

Leave a Comment