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

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.

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

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:

.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.

Originally Posted by rt2photo 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

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.

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:

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:

<form>
<input type="button" value="" onclick="getbuylink()" />
</form>

Finally, here's the CSS. I have the form code in a div named "footer3":

#footer3 input {
  background:url("http://www.bryanbrazil.net/images/buy2.png") no-repeat;
  cursor:pointer;
  width: 110px;
  height: 22px;
  border: none;
}

Originally Posted by byoshi 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.

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.

Just change the form code to this:

<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.

Originally Posted by byoshi 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.

Awesome, I appreciate your assistance.

I downloaded the buttons to my gallery as well.

Thanks!

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.

#footer3 {display: none;}
.galleryPage #footer3 {display:block;}

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!

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;

Originally Posted by InMediasRes 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!

Originally Posted by bryanbrazil 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:

.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

All of the code is being loaded anyways. With this you are just having your code take priority over ours.