Found what you have been looking for?

Search
Generic filters
Exact matches only
Filter by Categories
Customization
Domains
Lightroom Plugin
Tools and Tips
Replace SmugMug Shopping cart product images

Replacing product photos in the shopping cart

Video tutorial

In this tutorial, I am going to show you how to replace product images in the shopping cart. I have been asked about this by one SmugMug user who wants to display his own work in the shopping cart – instead of the default product photos provided by SmugMug.

Because there are loads of products that SmugMug is offering – there will be loads of code that you can use. You don’t need to use all of them – just check your shopping cart to see which product categories you are using and then pick the right code for your needs.

Preparation

You will need to add a CSS content block to the ENTIRE SITE section of your website. Each code links to an image that should be stored on your SmugMug website in a PUBLIC or UNLISTED gallery. You cannot use images that are located in PASSWORDED or PRIVATE galleries. I recommend using horizontal images – they will look better in the shopping cart.

How does this code work?

The first part of the code is to tell the web browser to remove the original product image:

/*Replace Standard Sizes product image*/
.user-ui-com-lb-product-standard-sizes > * {
  display: none;
}

The second part of the code is to tell the web browser to load your image for that particular product preview image. The only thing that you need to remember is to replace my image URL between the two “” with your own image URL:

.user-ui-com-lb-product-standard-sizes:after {
  content: "";
  background-image: url("https://photos.smugmug.com/photos/i-PBWjHbk/10/X2/i-PBWjHbk-X2.jpg"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Easy Navigation

I have created a small navigation because this tutorial is quite long- this will allow you to jump to the category that you are looking for, without the need to scroll through the whole content.

Category: PAPER PRINTS

Product: STANDARD SIZES

/*Replace Standard Sizes product image*/
.user-ui-com-lb-product-standard-sizes > * {
  display: none;
}

.user-ui-com-lb-product-standard-sizes:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: OTHER SIZES

/*Replace Other Sizes product image*/
.user-ui-com-lb-product-other-sizes > * {
  display: none;
}

.user-ui-com-lb-product-other-sizes:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: PANORAMIC SIZES

/*Replace Panoramic Sizes product image*/
.user-ui-com-lb-product-panoramic-sizes > * {
  display: none;
}

.user-ui-com-lb-product-panoramic-sizes:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: SQUARE SIZES

/*Replace Square Sizes product image*/
.user-ui-com-lb-product-square-sizes > * {
  display: none;
}

.user-ui-com-lb-product-square-sizes:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Category: WALL ART

Product: CANVAS

/*Replace Canvas product image*/
.user-ui-com-lb-product-canvas > * {
  display: none;
}

.user-ui-com-lb-product-canvas:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: FRAMED PRINTS

/*Replace Framed product image*/
.user-ui-com-lb-product-framed > * {
  display: none;
}

.user-ui-com-lb-product-framed:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: ALUMINI PRINTS

/*Replace Alumini product image*/
.user-ui-com-lb-product-alumini > * {
  display: none;
}

.user-ui-com-lb-product-alumini:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: EDGE PRINTS

/*Replace Edge Prints product image*/
.user-ui-com-lb-product-edge-prints > * {
  display: none;
}

.user-ui-com-lb-product-edge-prints:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: ACRYLIC GALLERY

/*Replace Acrylic Gallery product image*/
.user-ui-com-lb-product-acrylic-gallery > * {
  display: none;
}

.user-ui-com-lb-product-acrylic-gallery:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: TRADITIONAL CANVAS

/*Replace Traditional Canvas product image*/
.user-ui-com-lb-product-traditional-canvas > * {
  display: none;
}

.user-ui-com-lb-product-traditional-canvas:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: STRETCHED CANVAS

/*Replace Stretched Canvas product image*/
.user-ui-com-lb-product-stretched-canvas > * {
  display: none;
}

.user-ui-com-lb-product-stretched-canvas:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: FLAT MOUNTED CANVAS

/*Replace Flat Mounted Canvas product image*/
.user-ui-com-lb-product-flat-mounted-canvas > * {
  display: none;
}

.user-ui-com-lb-product-flat-mounted-canvas:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: THIN WRAPS

/*Replace Thin Wrap product image*/
.user-ui-com-lb-product-thin-wraps > * {
  display: none;
}

.user-ui-com-lb-product-thin-wraps:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: Metal

/*Replace Metal product image*/
.user-ui-com-lb-product-metal > * {
  display: none;
}

.user-ui-com-lb-product-metal:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Category: DESK ART

Product: SINGLE COLOUR DESK FRAME

/*Replace Single Colour Desk Frame product image*/
.user-ui-com-lb-product-single-colour-desk-frame > * {
  display: none;
}

.user-ui-com-lb-product-single-colour-desk-frame:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: DUAL COLOUR DESK FRAME

/*Replace Dual Colour Desk Frame product image*/
.user-ui-com-lb-product-dual-colour-desk-frame > * {
  display: none;
}

.user-ui-com-lb-product-dual-colour-desk-frame:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: GLACIER BLOCK

/*Replace Glacier Block product image*/
.user-ui-com-lb-product-glacier-block > * {
  display: none;
}

.user-ui-com-lb-product-glacier-block:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Category: KEEPSAKES

Product: SMALL REFRIGERATOR MAGNET

/*Replace Small Refrigerator Magnet product image*/
.user-ui-com-lb-product-small-refrigerator-magnet > * {
  display: none;
}

.user-ui-com-lb-product-small-refrigerator-magnet:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: LARGE REFRIGERATOR MAGNET

/*Replace Large Refrigerator Magnet product image*/
.user-ui-com-lb-product-large-refrigerator-magnet > * {
  display: none;
}

.user-ui-com-lb-product-large-refrigerator-magnet:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: 11oz BLACK MUG

/*Replace 11oz Black Mug product image*/
.user-ui-com-lb-product-11-oz-black-mug > * {
  display: none;
}

.user-ui-com-lb-product-11-oz-black-mug:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: 11oz WHITE MUG

/*Replace 11oz White Mug product image*/
.user-ui-com-lb-product-11-oz-white-mug > * {
  display: none;
}

.user-ui-com-lb-product-11-oz-white-mug:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: 15oz WHITE MUG

/*Replace 15oz White Mug product image*/
.user-ui-com-lb-product-15-oz-white-mug > * {
  display: none;
}

.user-ui-com-lb-product-15-oz-white-mug:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: 5 x 7 PHOTO PANEL

/*Replace 5 x 7 Photo Panel product image*/
.user-ui-com-lb-product-5-x-7-photo-panel > * {
  display: none;
}

.user-ui-com-lb-product-5-x-7-photo-panel:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: 8 x 10 PHOTO PANEL

/*Replace 8 x 10 Photo Panel product image*/
.user-ui-com-lb-product-8-x-10-photo-panel  > * {
  display: none;
}

.user-ui-com-lb-product-8-x-10-photo-panel :after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: KEEPSAKE BOX

/*Replace Keepsake Box product image*/
.user-ui-com-lb-product-keepsake-box > * {
  display: none;
}

.user-ui-com-lb-product-keepsake-box:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: PHOTO PUZZLE WITH BOX

/*Replace Photo Puzzle With Box product image*/
.user-ui-com-lb-product-photo-puzzle-with-box > * {
  display: none;
}

.user-ui-com-lb-product-photo-puzzle-with-box:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: 3in ROUND BUTTON

/*Replace 3in Round Button product image*/
.user-ui-com-lb-product-3-in-round-button > * {
  display: none;
}

.user-ui-com-lb-product-3-in-round-button:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: 4in ROUND BUTTON

/*Replace 4in Round Button product image*/
.user-ui-com-lb-product-4-in-round-button > * {
  display: none;
}

.user-ui-com-lb-product-4-in-round-button:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: PHOTO KEY TAG

/*Replace Photo Key Tag product image*/
.user-ui-com-lb-product-photo-key-tag > * {
  display: none;
}

.user-ui-com-lb-product-photo-key-tag:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: PHOTO LUGGAGE TAG

/*Replace Photo Luggage Tag product image*/
.user-ui-com-lb-product-photo-luggage-tag > * {
  display: none;
}

.user-ui-com-lb-product-photo-luggage-tag:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: MOUSE PAD

/*Replace Mouse Pad product image*/
.user-ui-com-lb-product-mouse-pad > * {
  display: none;
}

.user-ui-com-lb-product-mouse-pad:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: COASTERS

/*Replace Coasters product image*/
.user-ui-com-lb-product-coasters > * {
  display: none;
}

.user-ui-com-lb-product-coasters:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: 4 x 6 POSTCARDS

/*Replace 4 x 6 Postcards product image*/
.user-ui-com-lb-product-4-x-6-postcard > * {
  display: none;
}

.user-ui-com-lb-product-4-x-6-postcard:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: PLAYING CARDS

/*Replace Playing Cards product image*/
.user-ui-com-lb-product-playing-cards > * {
  display: none;
}

.user-ui-com-lb-product-playing-cards:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: 6 x 6 CERAMIC TILE

/*Replace 6 x 6 Ceramic Tile product image*/
.user-ui-com-lb-product-6-x-6-ceramic-tile > * {
  display: none;
}

.user-ui-com-lb-product-6-x-6-ceramic-tile:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Category: GREETING CARDS

Product: HOLIDAYS

/*Replace Holidays product image*/
.user-ui-com-lb-product-holidays > * {
  display: none;
}

.user-ui-com-lb-product-holidays:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: CHRISTMAS

/*Replace Christmas product image*/
.user-ui-com-lb-product-christmas > * {
  display: none;
}

.user-ui-com-lb-product-christmas:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: HANUKKAH

/*Replace Hanukkah product image*/
.user-ui-com-lb-product-christmas > * {
  display: none;
}

.user-ui-com-lb-product-christmas:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: BABY

/*Replace Baby product image*/
.user-ui-com-lb-product-baby > * {
  display: none;
}

.user-ui-com-lb-product-baby:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: WEDDING

/*Replace Wedding product image*/
.user-ui-com-lb-product-wedding > * {
  display: none;
}

.user-ui-com-lb-product-wedding:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: GRADUATION

/*Replace Graduation product image*/
.user-ui-com-lb-product-graduation > * {
  display: none;
}

.user-ui-com-lb-product-graduation:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: NEW YEARS

/*Replace New Years product image*/
.user-ui-com-lb-product-new-years > * {
  display: none;
}

.user-ui-com-lb-product-new-years:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Category: DOWNLOADS

Product: PERSONAL PHOTO LICENSE

/*Replace DOWNLOADS - personal product image*/
.user-ui-com-lb-product-personal-photo-license  > * {
  display: none;
}

.user-ui-com-lb-product-personal-photo-license:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

Product: COMMERCIAL PHOTO LICENSE

/*Replace DOWNLOADS - personal product image*/
.user-ui-com-lb-product-commercial-photo-license > * {
  display: none;
}

.user-ui-com-lb-product-commercial-photo-license:after {
  content: "";
  background-image: url("url to your custom image"); /***Replace with your own image URL***/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

There may be other products that I have forgotten to add to this list – if you have found one that needs to be added here – please do let me know by sending me a message, using the contact page.

product categories, product images, replace image, shopping cart, smugmug video tutorial


Tomasz Nowicki

My name is Tomasz Nowicki and I am a PHOTOGRAPHER and WEB DESIGNER based in the UK. Few years ago I have created my first website using SmugMug - a powerful platform for any type of photographer. I fell in love with it and from day one I have started exploring the possibilities of customizing my website. PHOTOM Portal is a my personal SmugMug knowledge base website where you can find some tips and tricks on how to use and get the most out of your SmugMug website.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.