• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More
Support Legacy SmugMug Customization thumbnail and shopping cart icon

Need some help with your New SmugMug Site?

Dgrin Challenges

Our Challenges moderator has lined up an new set of challenges for you. The Weekly Word Challenge. Get all the details and participate in the conversation Weekly Word Challenge.

Past DSS Challenge Winners, DSS Challenge Rules, and other important DSS Challenge information is here.

Looking for a little challenge? The Dgrin Mini-Challenges are a great way to challenge yourself. Take a moment to look through past winners and find the current Mini Challenge here.

From Around the Net

Enjoy a few of our favorite articles from around the 'net. If you have something you think we should see, post it here and we'll have a look.

Journeys

Landscapes

Sports

 
Thread Tools Display Modes
Old Oct-25-2010, 02:48 AM
#1
pnmd is offline pnmd OP
Beginner grinner
Sad thumbnail view and shopping cart icon way too obscure
http://petern.smugmug.com/

I like the thumbnail view. But once the client clicks on the picture, the shopping cart icon is so TINY AND OBSCURE. I asked 3 coworkers and not one knew she had to click the shopping cart icon to see prices and buy

Can I can do something to make the shopping cart icon more prominent or better yet change it to a bigger and red "buy" icon?

And how to get rid of all the sizes icons? And I'll just choose a default size in gallery settings or use Smug's default display size. Thx


Last edited by pnmd; Oct-25-2010 at 04:06 AM.
Old Oct-25-2010, 01:18 PM
#2
fabthi is offline fabthi
I love photography
fabthi's Avatar
I agree with pnmd, the shopping cart icon is inexplicably small, peripheral and doesn't make clear enough its purpose and meaning. When I browsed SmugMug in the beginning I thought it was (as usually in e-commerce sites) the link to view items already selected for purchase, not the actual "Buy" link.
Old Apr-29-2012, 06:01 PM
#3
rt2photo is offline rt2photo
Major grins
rt2photo's Avatar
I know it's an old thread, but 2 years on this is still an issue, and something I'm searching for an option to fix ... why on earth is there a template with such a small, unobvious cart icon?!

Can anyone offer guidance on how to make it more obvious what it does?

Thanks
Old Apr-30-2012, 01:23 AM
#4
bryanbrazil is offline bryanbrazil
Big grins
bryanbrazil's Avatar
I created a custom button for my shopping cart and moved it to the top left of the lightbox page.

The CSS code I used is:

Code:
.cart_add {
   width: 150px;
   background: url("http://www.bryanbrazil.net/images/buy.png") no-repeat scroll 0 0 transparent;
   height: 30px;
   vertical-align: middle;
   display: block;
   position: fixed;
   top: 15px;
   left: 15px;
   visibility: visible !important;
}
If you decide to use my image, please download it and host it on your smugmug site.

Quote:
Originally Posted by rt2photo View Post
I know it's an old thread, but 2 years on this is still an issue, and something I'm searching for an option to fix ... why on earth is there a template with such a small, unobvious cart icon?!

Can anyone offer guidance on how to make it more obvious what it does?

Thanks
__________________
www.bryanbrazil.com
Old Apr-30-2012, 12:53 PM
#5
byoshi is offline byoshi
Major grins
I have been searching for answers on this as well. The only thing I found was to make the button bigger by adding:

#buyButton { font-size: 30px;}

to the CSS.

Looks funky but makes the button more visible. Bryanbrazil I like your cart icon in your footer. I tried coping your CSS, but it did not seem to do anything.
__________________
Landscape and Nature photography
site - http://www.bay-photography.com/
blog - http://bayphotos.blogspot.com/
Old Apr-30-2012, 01:08 PM
#6
bryanbrazil is offline bryanbrazil
Big grins
bryanbrazil's Avatar
The code I shared above only affects the shopping cart link on the photo lightbox pages. I had to write some javascript to create the links for the shopping cart image I use in the footer on my gallery pages.

This goes in the top javascript box:

Code:
function getbuylink()
{
var buyresult;
buyresult = "http://www.smugmug.com/cart/batchadd/?url=" + window.location.href;
window.location.href = buyresult;
}
And I placed this in my footer and set it to only show on gallery pages:

Code:
<form>
<input type="button" value="" onclick="getbuylink()" />
</form>
Finally, here's the CSS. I have the form code in a div named "footer3":

Code:
#footer3 input {
  background:url("http://www.bryanbrazil.net/images/buy2.png") no-repeat;
  cursor:pointer;
  width: 110px;
  height: 22px;
  border: none;
}
Quote:
Originally Posted by byoshi View Post
I have been searching for answers on this as well. The only thing I found was to make the button bigger by adding:

#buyButton { font-size: 30px;}

to the CSS.

Looks funky but makes the button more visible. Bryanbrazil I like your cart icon in your footer. I tried coping your CSS, but it did not seem to do anything.
__________________
www.bryanbrazil.com
Old Apr-30-2012, 02:23 PM
#7
byoshi is offline byoshi
Major grins
Thanks, I mis-read that the original code was for the lightbox only.

Regarding your #footer3 input, does that mean there is additional code that needs to be entered that you have stored somewhere? I don't know much about CSS, so any help would be appreciated. I entered all the code, but all that shows on my footer is a white box. The link does work tho just not the graphic.
__________________
Landscape and Nature photography
site - http://www.bay-photography.com/
blog - http://bayphotos.blogspot.com/
Old Apr-30-2012, 06:03 PM
#8
bryanbrazil is offline bryanbrazil
Big grins
bryanbrazil's Avatar
Just change the form code to this:

Code:
<div id="footer3"><form>
<input type="button" value="" onclick="getbuylink()" />
</form></div>
You'll want to save the image and host it in your Smugmug gallery. There's a chance I could change my photo and it will no longer be available.


Quote:
Originally Posted by byoshi View Post
Thanks, I mis-read that the original code was for the lightbox only.

Regarding your #footer3 input, does that mean there is additional code that needs to be entered that you have stored somewhere? I don't know much about CSS, so any help would be appreciated. I entered all the code, but all that shows on my footer is a white box. The link does work tho just not the graphic.
__________________
www.bryanbrazil.com
Old Apr-30-2012, 08:03 PM
#9
byoshi is offline byoshi
Major grins
Awesome, I appreciate your assistance.

I downloaded the buttons to my gallery as well.

Thanks!
__________________
Landscape and Nature photography
site - http://www.bay-photography.com/
blog - http://bayphotos.blogspot.com/
Old Apr-30-2012, 08:53 PM
#10
bryanbrazil is offline bryanbrazil
Big grins
bryanbrazil's Avatar
Just looked at my code again. Here's how to hide the buy button, then only display it on gallery pages where there are photos for sale.

Code:
#footer3 {display: none;}
.galleryPage #footer3 {display:block;}
__________________
www.bryanbrazil.com
Old Jun-23-2012, 04:09 PM
#11
InMediasRes is offline InMediasRes
Ansel who?
InMediasRes's Avatar
Hi!

I tried this at www.imrphoto.com but it only moves the "original" cart icon to the left, it doesn't replace it with the image (which I've modified and I'm hosting in a gallery). Any ideas as to why?

Here's a gallery with purchases enabled: http://www.imrphoto.com/Store/Trinkets

Thanks!
__________________
http://www.imrphoto.com
We're in the midst of things!
Facebook
Twitter: @imrphoto
Blog
Old Jun-24-2012, 02:08 AM
#12
bryanbrazil is offline bryanbrazil
Big grins
bryanbrazil's Avatar
The background image is being overridden. Make this change to your CSS:

background: url("http://www.imrphoto.com/photos/i-WdX5jBC/0/O/i-WdX5jBC.png") no-repeat scroll 0 0 transparent !important;

Quote:
Originally Posted by InMediasRes View Post
Hi!

I tried this at www.imrphoto.com but it only moves the "original" cart icon to the left, it doesn't replace it with the image (which I've modified and I'm hosting in a gallery). Any ideas as to why?

Here's a gallery with purchases enabled: http://www.imrphoto.com/Store/Trinkets

Thanks!
__________________
www.bryanbrazil.com
Old Jun-24-2012, 10:40 AM
#13
InMediasRes is offline InMediasRes
Ansel who?
InMediasRes's Avatar
Quote:
Originally Posted by bryanbrazil View Post
The background image is being overridden. Make this change to your CSS:

background: url("http://www.imrphoto.com/photos/i-WdX5jBC/0/O/i-WdX5jBC.png") no-repeat scroll 0 0 transparent !important;
That works most excellently, thank you sir!

It wasn't showing it well still, so I added a few more "!important" tags and got it to work:

Code:
.cart_add {
   width: 150px !important;
   background: url("http://www.imrphoto.com/photos/i-WdX5jBC/0/O/i-WdX5jBC.png") no-repeat scroll 0 0 transparent !important;
   height: 30px !important;
   vertical-align: middle;
   display: block;
   position: fixed;
   top: 5px !important;
   left: 15px;
   visibility: visible !important;
}
Will all these "!important" tags make the page load slower or mess things up in the future? Seems to me we're fighting against the original code and adding bloat
__________________
http://www.imrphoto.com
We're in the midst of things!
Facebook
Twitter: @imrphoto
Blog
Old Jun-25-2012, 04:39 PM
#14
Smug Eric is offline Smug Eric
Smug Hero
Smug Eric's Avatar
All of the code is being loaded anyways. With this you are just having your code take priority over ours.
__________________
Eric
Support Hero and Customeister
http://www.smugmug.com/help
Tell The World!  
Similar Threads Thread Starter Forum Replies Last Post
launch lightbox from thumbnail in Search Results display JLDTifft Legacy SmugMug Customization 5 Nov-22-2009 01:16 PM
SmugMug Feature Requests #5 Andy SmugMug Support 460 Aug-11-2006 11:46 AM
Smugmug bugs and feature requests #7 darryl SmugMug Support 501 Dec-02-2005 10:01 AM
Major change: new shopping cart is live Baldy SmugMug Support 26 Aug-24-2004 12:55 AM


Thread Tools
Display Modes

Posting Rules  
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump