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;
}
CSSThe 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%;
}
CSSEasy 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSCategory: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSCategory: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSCategory: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSCategory: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSProduct: 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%;
}
CSSCategory: 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%;
}
CSSProduct: 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%;
}
CSSThere 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.