Options

Personalize your shopping cart

tomnovytomnovy Registered Users Posts: 1,101 SmugMug Employee
edited October 4, 2015 in SmugMug Customization
Hi friends,

I have been playing with our shopping cart little bit and I have created little bit of code that will allow you to customize it so that it looks more presonal.

So from this look:
ZI1ErQj51idYabQnU9CKKkgT9NLKjB.png

To this:
ZWjG6nFAXBb2S9UijLovdN4KmDVgou.png

This code needs to be added to the THEME that you are using → ADVANCED tab → CSS:
/*** before you use this code make sure that you create three images that will represent those three sections in the shopping cart - each image has to be exactly 336px by 132px upload them to unlisted gallery - then replace the link to your images in the CSS code below ***/

/*** code to change the background image for WALL ART section in the shopping cart ***/
.sm-addtocart-step-categories .sm-catalog-category-wall-art {
       background-image: url(http://www.photom.me/photos/i-f5vk4V6/0/O/i-f5vk4V6.jpg) !important;
}

/*** code to change the background image for PAPER PRINTS section in the shopping cart ***/
.sm-addtocart-step-categories .sm-catalog-category-paper-prints {
background-image: url(http://www.photom.me/photos/i-VMzSVkH/0/O/i-VMzSVkH.jpg) !important;
}

/*** code to change the background image for DESK ART section in the shopping cart ***/
.sm-addtocart-step-categories .sm-catalog-category-desk-art {
background-image: url(http://www.photom.me/photos/i-9vzvJBG/0/O/i-9vzvJBG.jpg) !important;
}
/*** code to change the bacground image for DIGITAL DOWNLOADS section in the shopping cart ***/
.sm-addtocart-step-categories .sm-catalog-category-downloads {
background-image: url(http://www.photom.me/photos/i-bmmjb2b/0/O/i-bmmjb2b.jpg) !important;
}

/*** Change the font in shopping cart ***/
.sm-user-ui .sm-addtocart-step-categories .sm-addtocart-product-list p {
    font-size: 32px;
    line-height: 1.231;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/*** change the size of the arrow in the shopping cart ***/
.sm-user-ui .sm-addtocart-step-categories .sm-addtocart-product-list li .sm-fonticon {
    color: #fff;
    font-size: 36px !important;
    font-weight: 700 !important;
}
/*** moving cart product name to the middle ***/
.sm-addtocart-step-categories .sm-addtocart-product-list p {
    bottom: 50px !important;
}
/*** moving cart arrow to the middle ***/
.sm-addtocart-step-categories .sm-addtocart-product-list li>.sm-fonticon {
    bottom: 52px !important;
}
/*** adding black border to the shopping cart pannel ***/
.sm-user-ui .sm-panel-container {
    border-color: #212121 !important;
}
/*** removing shadow from the shopping cart panel ***/
.sm-user-ui .sm-modal .sm-panel-container {
    box-shadow: none !important;
}

Enjoy :)
SmugMug Support Hero | Customizer | My SmugMug site - http://www.photom.me | Customization Portal - https://portal.photom.me

Comments

  • Options
    ShinryaShinrya Registered Users Posts: 197 Major grins
    edited August 7, 2015
    Thank you so much for this code :)

    Glad I can finally get rid of that stupid grinning chocolate faced kid off my cart page. Have replaced the stock photos for now with some of my own, will look into customising this further.

    My thanks again *fist bump*
    www.peterstewartphotography.com

    Follow me on:
    Instagram | Facebook | Flickr
  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,458 Major grins
    edited August 8, 2015
    Good job! Could be my theme but I don't have a 'Desk Art' category. Instead I have a 'Keepsake' category. Also your line-height was way different then mine, so mine didn't line up w/o changing my CSS. I added a rollover (hover) effect on mine:
    /**
* Cart Page
************************************************/    
.sm-user-ui .sm-addtocart-step-categories .sm-catalog-category-wall-art {
    background-image: url('http://www.imagesinthebackcountry.com/images/smugmug/wall-art.jpg');
    }
    .sm-user-ui .sm-addtocart-step-categories .sm-catalog-category-wall-art:hover {
        background-image: url('http://www.imagesinthebackcountry.com/images/smugmug/wall-art-hover.jpg');
        }

.sm-user-ui .sm-addtocart-step-categories .sm-catalog-category-paper-prints {
    background-image: url('http://www.imagesinthebackcountry.com/images/smugmug/paper-prints.jpg');
    }
    .sm-user-ui .sm-addtocart-step-categories .sm-catalog-category-paper-prints:hover {
        background-image: url('http://www.imagesinthebackcountry.com/images/smugmug/paper-prints-hover.jpg');
        }

.sm-user-ui .sm-addtocart-step-categories .sm-catalog-category-keepsakes {
    background-image: url('http://www.imagesinthebackcountry.com/images/smugmug/keepsakes.jpg');
    }
    .sm-user-ui .sm-addtocart-step-categories .sm-catalog-category-keepsakes:hover  {
        background-image: url('http://www.imagesinthebackcountry.com/images/smugmug/keepsakes-hover.jpg');
        }

.sm-user-ui .sm-addtocart-step-categories .sm-catalog-category-downloads {
    background-image: url('http://www.imagesinthebackcountry.com/images/smugmug/downloads.jpg');
    }    
    .sm-user-ui .sm-addtocart-step-categories .sm-catalog-category-downloads:hover  {
        background-image: url('http://www.imagesinthebackcountry.com/images/smugmug/downloads-hover.jpg');
        }

.sm-user-ui .sm-addtocart-step-categories .sm-addtocart-product-list p {
    font-size: 32px;
    line-height: 0;
    font-weight: 700;
    text-transform: uppercase;
    }

.sm-user-ui .sm-addtocart-step-categories .sm-addtocart-product-list li .sm-fonticon {
    font-size: 36px;
    line-height: 1.5;
    font-weight: 700;
    }
    
.sm-user-ui .sm-addtocart-step-categories .sm-addtocart-product-list p,
.sm-user-ui .sm-addtocart-step-categories .sm-addtocart-product-list li .sm-fonticon {
    bottom: 42px;
    }
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • Options
    Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited August 9, 2015
    Thank you, tomnovy & Hikin' Mike for some great enhancement of the shopping cards.bowdown.gif
    I actually implemented a "mix of both worlds" - the hover from Hikin' Mike was too nice to leave out, but it worked with the other settings from tomnovy and I figured that implementing it for all five categories right away even though I don't offer Downloads or Desk Art yet, would not be a brainer and would make it easier if I ever choose to add products from these categories.
    So if anybody needs it here is the code for all five categories including the hoover effect: 
    /*** before you use this code make sure that you create three images that will represent those three sections in the shopping cart - each image has to be exactly 336px by 132px upload them to unlisted gallery - then replace the link to your images in the CSS code below ***/

/*** code to change the background image for DESK ART section in the shopping cart Cades Cove***/
.sm-addtocart-step-categories .sm-catalog-category-desk-art {
background-image: url('http://www.lilleulven.com/photos/i-tgRD6dt/0/O/i-tgRD6dt.jpg') !important;
}
.sm-addtocart-step-categories .sm-catalog-category-desk-art:hover {
background-image: url('http://www.lilleulven.com/photos/i-TPhjRLs/0/O/i-TPhjRLs.jpg') !important;
}

/*** code to change the background image for WALL ART section in the shopping cart Lake Matheson ***/
.sm-user-ui .sm-addtocart-step-categories .sm-catalog-category-wall-art {
    background-image: url('http://www.lilleulven.com/photos/i-ZWjfKK2/0/O/i-ZWjfKK2.jpg');
    }
.sm-user-ui .sm-addtocart-step-categories .sm-catalog-category-wall-art:hover {
    background-image: url('http://www.lilleulven.com/photos/i-8rGhFPd/0/O/i-8rGhFPd.jpg');
    }

/*** code to change the background image for PAPER PRINTS section in the shopping cart Hokitika***/
.sm-user-ui .sm-addtocart-step-categories .sm-catalog-category-paper-prints {
    background-image: url('http://www.lilleulven.com/photos/i-36kpkL2/0/O/i-36kpkL2.jpg');
    }
.sm-user-ui .sm-addtocart-step-categories .sm-catalog-category-paper-prints:hover {
    background-image: url('http://www.lilleulven.com/photos/i-xbTVDDf/0/O/i-xbTVDDf.jpg');
    }

/*** code to change the bacground image for KEEPSAKES section in the shopping cart Ronda***/
.sm-user-ui .sm-addtocart-step-categories .sm-catalog-category-keepsakes {
    background-image: url('http://www.lilleulven.com/photos/i-KPjQngD/0/O/i-KPjQngD.jpg');
    }
.sm-user-ui .sm-addtocart-step-categories .sm-catalog-category-keepsakes:hover  {
    background-image: url('http://www.lilleulven.com/photos/i-zLSCFSN/0/O/i-zLSCFSN.jpg');
    }

/*** code to change the bacground image for DIGITAL DOWNLOADS section in the shopping cart Flagstadøya***/
.sm-user-ui .sm-addtocart-step-categories .sm-catalog-category-downloads {
    background-image: url('http://www.lilleulven.com/photos/i-KFX3wR4/0/O/i-KFX3wR4.jpg');
    }    
.sm-user-ui .sm-addtocart-step-categories .sm-catalog-category-downloads:hover  {
    background-image: url('http://www.lilleulven.com/photos/i-cmDJZMw/0/O/i-cmDJZMw.jpg');
    }


/*** Change the font in shopping cart ***/
.sm-user-ui .sm-addtocart-step-categories .sm-addtocart-product-list p {
    font-size: 32px;
    line-height: 1.231;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/*** change the size of the arrow in the shopping cart ***/
.sm-user-ui .sm-addtocart-step-categories .sm-addtocart-product-list li .sm-fonticon {
    color: #fff;
    font-size: 36px !important;
    font-weight: 700 !important;
}
/*** moving cart product name to the middle ***/
.sm-addtocart-step-categories .sm-addtocart-product-list p {
    bottom: 50px !important;
}
/*** moving cart arrow to the middle ***/
.sm-addtocart-step-categories .sm-addtocart-product-list li>.sm-fonticon {
    bottom: 52px !important;
}
/*** adding black border to the shopping cart pannel ***/
.sm-user-ui .sm-panel-container {
    border-color: #212121 !important;
}
/*** removing shadow from the shopping cart panel ***/
.sm-user-ui .sm-modal .sm-panel-container {
    box-shadow: none !important;
}
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • Options
    Su2zSu2z Registered Users Posts: 25 Big grins
    edited October 4, 2015
    Thank you everyone for the codes! I love how it works :D
Sign In or Register to comment.