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;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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%;
}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.
Comments (2)
Leave a Reply Cancel reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Support this PORTAL
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.
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.
Currently there is no such possibility – even with custom coding. Sorry.