New Look To The Shopping Cart

2»

Comments

  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited November 30, 2013
    chrismoore wrote: »
    The cart has had, and continues to have, many problems. If it's not intuitive, a customer will bail on the order instead of trying to wade through all those checkboxes, product video, etc. And please, get rid of "The Goods." It's beyond unprofessional.

    I looked but must be missing it... where do you see "The Goods"?
  • chrismoorechrismoore Registered Users Posts: 1,083 Major grins
    edited December 2, 2013
    I looked but must be missing it... where do you see "The Goods"?

    On the checkout page.
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited April 18, 2014
    You can hide checkboxes by using any of the following code:
    /* Remove the "Lustre" checkbox */
    .sm-cart-l-finish-filters #filterLustre{
      display: none !important;
    }
    
    /* Remove the "Matte" checkbox */
    .sm-cart-l-finish-filters #filterMatte {
      display: none !important;
    }
    
    /* Remove the "Glossy" checkbox */
    .sm-cart-l-finish-filters #filterGloss {
      display: none !important;
    }
    
    /* Remove the "Metallic" checkbox */
    .sm-cart-l-finish-filters #filterMetal {
      display: none !important;
    }
    
    /* Remove the "Gliclee Watercolor checkbox */
    .sm-cart-l-finish-filters #filterWatercolor {
      display: none !important;
    }
    
    /* Remove the "Require Cropping" checkbox */
    .sm-cart-l-product-filters #filterCrop {
      display: none !important;
    }
    
    /* Remove the "Not in my cart" checkbox */
    .sm-cart-l-product-filters #filterCart {
      display: none !important;
    }
    
    /* Remove the "Cannot be Purchased" checkbox */
    .sm-cart-l-product-filters #filterPrint {
      display: none !important;
    }
    
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited April 18, 2014
    leftquark wrote: »
    You can hide checkboxes by using any of the following code:
    /* Remove the "Lustre" checkbox */
    .sm-cart-l-finish-filters #filterLustre{
      display: none !important;
    }
    
    /* Remove the "Matte" checkbox */
    .sm-cart-l-finish-filters #filterMatte {
      display: none !important;
    }
    
    /* Remove the "Glossy" checkbox */
    .sm-cart-l-finish-filters #filterGloss {
      display: none !important;
    }
    
    /* Remove the "Metallic" checkbox */
    .sm-cart-l-finish-filters #filterMetal {
      display: none !important;
    }
    
    /* Remove the "Gliclee Watercolor checkbox */
    .sm-cart-l-finish-filters #filterWatercolor {
      display: none !important;
    }
    
    /* Remove the "Require Cropping" checkbox */
    .sm-cart-l-product-filters #filterCrop {
      display: none !important;
    }
    
    /* Remove the "Not in my cart" checkbox */
    .sm-cart-l-product-filters #filterCart {
      display: none !important;
    }
    
    /* Remove the "Cannot be Purchased" checkbox */
    .sm-cart-l-product-filters #filterPrint {
      display: none !important;
    }
    

    If you can target that, could other elements be targeted too?
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited April 19, 2014
    If you can target that, could other elements be targeted too?

    Yep!
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited April 19, 2014
    If you can target that, could other elements be targeted too?

    I modified my "Cart Screen" to match my theme using this. Feel free to change the colors to suit...
    /**
    * Cart Page
    ************************************************/    
        /* Background Colors */
    .mask,
    #cartUI.sm-nui .sm-button {    
        background-color: #a69f8b !important;
        }    
        
    #infoPanel,
    .subCatLinks li,
    .categoryTabs .yui-nav li, 
    #itemsPanel #cartContinue,
    #cartUI .productsList > h3,
    .productsList .product.hover,
    .productsList .product.selected {
        background-color: #d9ceba !important;
        }
        
    #itemsPanel,
    #catalogPanel, 
    #itemsPanel #cartContinue:hover,
    #helpVideoPanel #helpVideoFrame,
    .sm-nui .sm-form-field-checkbox-item .sm-form-field-checkbox-icon-container, 
    .sm-nui .sm-form-field-radio-item .sm-form-field-radio-icon-container {
        background-color: #e3d7c3 !important;
        }    
        
    .sm-nui .sm-form-field-select-wrapper {
        background-color: rgba(0, 0, 0, 0) !important;
        }
        
    #cartUI .hd {
        background-color: rgba(0, 0, 0, .2) !important;
        }    
        
    div.sm-spinner .sm-form-field-textarea,
    div.sm-spinner .sm-form-field-text-input {
        background-color: #fff;
        }    
        
    #itemsPanel #cartCheckout {    
        background-color: #7b1d20 !important;    
        }
        
    #itemsPanel #cartCheckout:hover {
        background-color: #8c2129 !important;
        }
        
        /* Text Colors */
    #cartUI h3, 
    #cartUI h4, 
    #cartUI h5  {
        color:#4d4e44 !important;
        }    
        
    #itemsPanel .itemSummary {
        color: #111 !important;
        }
        
    #cartUI h1,
    .sm-nui .sm-form-field-select {
        color: #e3d7c3 !important;
        }    
        
    #showOptions a, 
    div.sm-spinner .sm-fonticon-ArrowTriangleLeft:hover, 
    div.sm-spinner .sm-fonticon-ArrowTriangleRight:hover,    
    .sm-nui .sm-form-field-checkbox-item.yui3-button-selected .sm-form-field-checkbox-icon, 
    .sm-nui .sm-form-field-radio-item.yui3-button-selected .sm-form-field-radio-icon {
        color: #7b1d20 !important;
        }        
        
    #itemsPanel #cartCheckout,    
    #cartUI.sm-nui .sm-button {
        color: #fff !important;
        }    
        
    #itemsPanel #cartContinue,    
    .productsList .productName, 
    .productsList .costEach, 
    .productsList .quantity, 
    .productsList .costTotal,
    div.sm-spinner .sm-form-field-textarea,
    div.sm-spinner .sm-form-field-text-input,
    div.sm-spinner .sm-fonticon-ArrowTriangleLeft, 
    div.sm-spinner .sm-fonticon-ArrowTriangleRight {
        color: #333 !important;
        }    
        
    #photoInfo,    
    #cartUI .sm-text-mini,
    .sm-nui .sm-form-field-checkbox-item.yui3-button-selected, 
    .sm-nui .sm-form-field-radio-item.yui3-button-selected {
        color: #616161 !important;
        }
        
        /* No Border */
    #itemsPanel, 
    #cartUI .bd, 
    #cartUI .hd h1,
    .productsContainer,
    #itemsPanel #cartCheckout,
    #helpVideoPanel #helpVideoFrame,
    .sm-nui .sm-form-field-select-wrapper {
        border: none !important;
        }    
        
        /* Border */
    .subCatLinks li {
        border: 1px solid !important;
        }    
        
        /* Border Color */
    .productsList .productName, 
    .productsList .costEach, 
    .productsList .quantity, 
    .productsList .costTotal,     
    .categoryTabs .yui-nav li ,    
    .categoryTabs .yui-nav li:hover,
    div.sm-spinner .sm-form-field-textarea,
    div.sm-spinner .sm-form-field-text-input,
    #itemsPanel #cartContinue,
    .sm-nui .sm-form-field-checkbox-item .sm-form-field-checkbox-icon-container, 
    .sm-nui .sm-form-field-radio-item .sm-form-field-radio-icon-container {
        border-color: #a69f8b !important;
        } 
    
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited April 20, 2014
    I modified my "Cart Screen" to match my theme using this. Feel free to change the colors to suit...
    /**
    * Cart Page
    ************************************************/    
        /* Background Colors */
    .mask,
    #cartUI.sm-nui .sm-button {    
        background-color: #a69f8b !important;
        }    
        
    #infoPanel,
    .subCatLinks li,
    .categoryTabs .yui-nav li, 
    #itemsPanel #cartContinue,
    #cartUI .productsList > h3,
    .productsList .product.hover,
    .productsList .product.selected {
        background-color: #d9ceba !important;
        }
        
    #itemsPanel,
    #catalogPanel, 
    #itemsPanel #cartContinue:hover,
    #helpVideoPanel #helpVideoFrame,
    .sm-nui .sm-form-field-checkbox-item .sm-form-field-checkbox-icon-container, 
    .sm-nui .sm-form-field-radio-item .sm-form-field-radio-icon-container {
        background-color: #e3d7c3 !important;
        }    
        
    .sm-nui .sm-form-field-select-wrapper {
        background-color: rgba(0, 0, 0, 0) !important;
        }
        
    #cartUI .hd {
        background-color: rgba(0, 0, 0, .2) !important;
        }    
        
    div.sm-spinner .sm-form-field-textarea,
    div.sm-spinner .sm-form-field-text-input {
        background-color: #fff;
        }    
        
    #itemsPanel #cartCheckout {    
        background-color: #7b1d20 !important;    
        }
        
    #itemsPanel #cartCheckout:hover {
        background-color: #8c2129 !important;
        }
        
        /* Text Colors */
    #cartUI h3, 
    #cartUI h4, 
    #cartUI h5  {
        color:#4d4e44 !important;
        }    
        
    #itemsPanel .itemSummary {
        color: #111 !important;
        }
        
    #cartUI h1,
    .sm-nui .sm-form-field-select {
        color: #e3d7c3 !important;
        }    
        
    #showOptions a, 
    div.sm-spinner .sm-fonticon-ArrowTriangleLeft:hover, 
    div.sm-spinner .sm-fonticon-ArrowTriangleRight:hover,    
    .sm-nui .sm-form-field-checkbox-item.yui3-button-selected .sm-form-field-checkbox-icon, 
    .sm-nui .sm-form-field-radio-item.yui3-button-selected .sm-form-field-radio-icon {
        color: #7b1d20 !important;
        }        
        
    #itemsPanel #cartCheckout,    
    #cartUI.sm-nui .sm-button {
        color: #fff !important;
        }    
        
    #itemsPanel #cartContinue,    
    .productsList .productName, 
    .productsList .costEach, 
    .productsList .quantity, 
    .productsList .costTotal,
    div.sm-spinner .sm-form-field-textarea,
    div.sm-spinner .sm-form-field-text-input,
    div.sm-spinner .sm-fonticon-ArrowTriangleLeft, 
    div.sm-spinner .sm-fonticon-ArrowTriangleRight {
        color: #333 !important;
        }    
        
    #photoInfo,    
    #cartUI .sm-text-mini,
    .sm-nui .sm-form-field-checkbox-item.yui3-button-selected, 
    .sm-nui .sm-form-field-radio-item.yui3-button-selected {
        color: #616161 !important;
        }
        
        /* No Border */
    #itemsPanel, 
    #cartUI .bd, 
    #cartUI .hd h1,
    .productsContainer,
    #itemsPanel #cartCheckout,
    #helpVideoPanel #helpVideoFrame,
    .sm-nui .sm-form-field-select-wrapper {
        border: none !important;
        }    
        
        /* Border */
    .subCatLinks li {
        border: 1px solid !important;
        }    
        
        /* Border Color */
    .productsList .productName, 
    .productsList .costEach, 
    .productsList .quantity, 
    .productsList .costTotal,     
    .categoryTabs .yui-nav li ,    
    .categoryTabs .yui-nav li:hover,
    div.sm-spinner .sm-form-field-textarea,
    div.sm-spinner .sm-form-field-text-input,
    #itemsPanel #cartContinue,
    .sm-nui .sm-form-field-checkbox-item .sm-form-field-checkbox-icon-container, 
    .sm-nui .sm-form-field-radio-item .sm-form-field-radio-icon-container {
        border-color: #a69f8b !important;
        } 
    

    Thanks for the code. I've been modifying to fit my theme. All the code goes out the window once you hit continue though...ne_nau.gif
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited April 20, 2014
    leftquark wrote: »
    Yep!

    Is there a way to customize the screen when you are buying multiple photos from a gallery and the check out screen?
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited April 20, 2014
    Thanks for the code. I've been modifying to fit my theme. All the code goes out the window once you hit continue though...ne_nau.gif

    Unfortunately once you hit 'Continue', it takes you to Smugmug's secure site, so you can't modify that page. I'm sure in about 5 years Smugmug will allow us to customize that page....rolleyes1.gifrolleyes1.gif
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited April 21, 2014
    I'm sure in about 5 years Smugmug will allow us to customize that page....rolleyes1.gifrolleyes1.gif

    I doubt it, because when you Continue, the next page takes you to your global cart across all SmugMug sites, so your cart can contain photos from multiple photographers at once. This means that there isn't a good way of deciding which photographer should get to style the page, so none of them will.
  • Traces of TexasTraces of Texas Registered Users Posts: 77 Big grins
    edited June 1, 2014
    Here's some feedback. I have 90,000 fans following me on Facebook. My sales on smugmug have dropped to almost zero. Out of desperation, I asked ten of my FB readers (randomly, but people who interact with my Facebook page quite a bit) to go and look at buy page for my photos and almost every single one said that it is way too complicated, it's too confusing, that they could not figure out how to use it, and would most likely give up in frustration were they trying to figure out how to buy something. Somewhat related, I suppose, is that I also get emails/private messages on Facebook from folks who have visited my galleries and then turn around and ask me if my photos are for sale. It is as if the buy button is invisible to them. I reply and say "click on the 'buy' button" and then get no sales, so I never know if the actually went back to the page to buy and couldn't figure out how to use the shopping cart or if they simply never returned to the gallery.
  • psenior1psenior1 Registered Users Posts: 125 Major grins
    edited June 2, 2014
    having some sort of 'simple shopping cart' option would be good, dumbed down usability that was designed around a few core print sizes. We also need something that FORCES the user to confirm they are happy with the crop of each and every image that requires adjustment.
    website - http://www.snrmac.com
    facebook - my facebook page please LIKE me!
  • mbonocorembonocore Registered Users Posts: 2,299 Major grins
    edited June 2, 2014
    Here's some feedback. I have 90,000 fans following me on Facebook. My sales on smugmug have dropped to almost zero. Out of desperation, I asked ten of my FB readers (randomly, but people who interact with my Facebook page quite a bit) to go and look at buy page for my photos and almost every single one said that it is way too complicated, it's too confusing, that they could not figure out how to use it, and would most likely give up in frustration were they trying to figure out how to buy something. Somewhat related, I suppose, is that I also get emails/private messages on Facebook from folks who have visited my galleries and then turn around and ask me if my photos are for sale. It is as if the buy button is invisible to them. I reply and say "click on the 'buy' button" and then get no sales, so I never know if the actually went back to the page to buy and couldn't figure out how to use the shopping cart or if they simply never returned to the gallery.

    Thank you for your feedback. We are aware the shopping cart could use a reworking, and we agree that we can make it much easier for your customers to use. As for the "Buy" button, there are some CSS modifications you can do that may help, such as changing the wording, size, color, etc. Have you seen any of these?
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited June 2, 2014
    mbonocore wrote: »
    Thank you for your feedback. We are aware the shopping cart could use a reworking, and we agree that we can make it much easier for your customers to use.

    :Drolleyes1.giflustclap.gifivarthumb.gifwings.gifdeal wahoo! can't wait! bowdown.gif

    (definitely in an emoticon mood today!)
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Sign In or Register to comment.