Skip to main content

Are you still looking for something?

More results...

Try these: contact form button buy photos

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:

CSS

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

CSS

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:

CSS

.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%;
}

CSS

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

CSS

/*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%;
}

CSS

Product: OTHER SIZES

CSS

/*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%;
}

CSS

Product: PANORAMIC SIZES

CSS

/*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%;
}

CSS

Product: SQUARE SIZES

CSS

/*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%;
}

CSS

Category: WALL ART

Product: CANVAS

CSS

/*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%;
}

CSS

Product: FRAMED PRINTS

CSS

/*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%;
}

CSS

Product: ALUMINI PRINTS

CSS

/*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%;
}

CSS

Product: EDGE PRINTS

CSS

/*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%;
}

CSS

Product: ACRYLIC GALLERY

CSS

/*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%;
}

CSS

Product: TRADITIONAL CANVAS

CSS

/*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%;
}

CSS

Product: STRETCHED CANVAS

CSS

/*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%;
}

CSS

Product: FLAT MOUNTED CANVAS

CSS

/*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%;
}

CSS

Product: THIN WRAPS

CSS

/*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%;
}

CSS

Product: Metal

CSS

/*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%;
}

CSS

Category: DESK ART

Product: SINGLE COLOUR DESK FRAME

CSS

/*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%;
}

CSS

Product: DUAL COLOUR DESK FRAME

CSS

/*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%;
}

CSS

Product: GLACIER BLOCK

CSS

/*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%;
}

CSS

Category: KEEPSAKES

Product: SMALL REFRIGERATOR MAGNET

CSS

/*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%;
}

CSS

Product: LARGE REFRIGERATOR MAGNET

CSS

/*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%;
}

CSS

Product: 11oz BLACK MUG

CSS

/*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%;
}

CSS

Product: 11oz WHITE MUG

CSS

/*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%;
}

CSS

Product: 15oz WHITE MUG

CSS

/*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%;
}

CSS

Product: 5 x 7 PHOTO PANEL

CSS

/*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%;
}

CSS

Product: 8 x 10 PHOTO PANEL

CSS

/*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%;
}

CSS

Product: KEEPSAKE BOX

CSS

/*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%;
}

CSS

Product: PHOTO PUZZLE WITH BOX

CSS

/*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%;
}

CSS

Product: 3in ROUND BUTTON

CSS

/*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%;
}

CSS

Product: 4in ROUND BUTTON

CSS

/*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%;
}

CSS

Product: PHOTO KEY TAG

CSS

/*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%;
}

CSS

Product: PHOTO LUGGAGE TAG

CSS

/*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%;
}

CSS

Product: MOUSE PAD

CSS

/*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%;
}

CSS

Product: COASTERS

CSS

/*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%;
}

CSS

Product: 4 x 6 POSTCARDS

CSS

/*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%;
}

CSS

Product: PLAYING CARDS

CSS

/*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%;
}

CSS

Product: 6 x 6 CERAMIC TILE

CSS

/*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%;
}

CSS

Category: GREETING CARDS

Product: HOLIDAYS

CSS

/*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%;
}

CSS

Product: CHRISTMAS

CSS

/*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%;
}

CSS

Product: HANUKKAH

CSS

/*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%;
}

CSS

Product: BABY

CSS

/*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%;
}

CSS

Product: WEDDING

CSS

/*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%;
}

CSS

Product: GRADUATION

CSS

/*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%;
}

CSS

Product: NEW YEARS

CSS

/*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%;
}

CSS

Category: DOWNLOADS

Product: PERSONAL PHOTO LICENSE

CSS

/*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%;
}

CSS

Product: COMMERCIAL PHOTO LICENSE

CSS

/*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%;
}

CSS

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.

Related articles

Hide BUY MULTIPLE PHOTOS button from the shopping cart
This CSS code will hide the “BUY MULTIPLE PHOTOS” button from the shopping cart for…
Read more

Comments (2)

Julia Rivera
15th July 2021 at 05:34
Reply
Is there a way to do this, and have the image for the each category be the same as the product the site guest has clicked on? For instance, if a guest on the site clicks on the first piece of artwork and goes to checkout, the shopping cart image would be of Artwork 1. If the guest clicks on the second piece of artwork, the shopping cart image would be of Artwork 2.
- Tomasz Nowicki
  15th July 2021 at 13:31
  Reply
  Currently there is no such possibility – even with custom coding. Sorry.

Leave a Reply Cancel reply

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

Support me

I am writing this portal in my free time and I pay for it myself. So, if you want to support my work – use this button to buy me a coffee 🙂 Which will help towards the hosting costs of the portal.

Buy me a coffee