Making the Buy Button blend in

HenrikSundholm

Been working a lot with my new photography site for the past couple of weeks. Thanks to your CSS codes, it's starting to come together nicely! The only issue left, I think, is surprisingly the buy button.

I've found code to change the color or text of the buy button, but it's unyieldingly big and stuck to the right side! As you can see from my screen grab, I prefer a minimalist approach with not too much cluttering the screen, and that button looks very out of place. Basically I'm wondering:

1. How do I align the buy button the the left of the screen?
2. How do I resize the buy button to make it slightly smaller?
3. Could the button be replaced by a "from this gallery" text link?
4. Could the button be replaced by an image?
5. Any general tips at all on how to make the button blend with the design?

Thanks a lot for all the help on this forum by the way. It's been a life saver for someone who knows very little about web design...

!

denisegoldberg

@HenrikSundholm said:
5. Any general tips at all on how to make the button blend with the design?

You can change the background color of all of the buttons on your site. See @leftquark 's sitewide tweek Change the Button Background Colors.

HenrikSundholm

@denisegoldberg said:
You can change the background color of all of the buttons on your site. See @leftquark 's sitewide tweek Change the Button Background Colors.

True! Changing the color and text helps out a little, but mostly it's the awkward placement that gets to me. Is there a way to make it symmetrical, by aligning it to the left side perhaps? Or moving it off the far right side of the gallery to basically anywhere else....

Hikin' Mike

Can you post your site.

HenrikSundholm

@Hikin' Mike said:
Can you post your site.

Well, it's henriksundholm.com but the content is private until I'm done with the design

Hikin' Mike

I understand.

Hikin' Mike

You can try this:

.sm-user-ui .sm-gallery-cover-buttons {
    position:relative;
    }

That should move it to the left site. You can add margin to move it around.

Just a bit of advice. I would NOT try to make your buy button blend in. You want your customers to be able to find it without trying to find it.

Hikin' Mike

This will replace the icon and text of the "Buy Button" to your custom image button. Just replace ''your-photo-url-here.jpg` to your image.

.sm-user-ui .sm-gallery-cover-buy-button {
    background-image: url('your-photo-url-here.jpg');
    }

.sm-user-ui .sm-gallery-cover-buy-button .sm-icon-CartAdd,
.sm-user-ui .sm-gallery-cover-buy-button .sm-button-label {
    visibility:hidden;
    }

HenrikSundholm

@Hikin' Mike said:
You can try this:

.sm-user-ui .sm-gallery-cover-buttons {
  position:relative;
  }

That should move it to the left site. You can add margin to move it around.

Just a bit of advice. I would NOT try to make your buy button blend in. You want your customers to be able to find it without trying to find it.

Thanks! That works great. But now I feel like the button takes focus off the images instead. It never gets any easier huh... I'll see how I'll eventually do it.

I guess it's a balance of trade offs. I want my images to look as beautiful as possible without distracting elements, but I also don't want any key features (let alone the potential money-maker) to be obscured. I think the ideal solution for me would be to have a purchase icon underneath each photo, next to the "share", "tools" and "download", as I find these features both unobtrusive and accessible. Then again I'm not out to make a living doing photography so I can see how other people would make different priorities.

HenrikSundholm

@Hikin' Mike said:
This will replace the icon and text of the "Buy Button" to your custom image button. Just replace ''your-photo-url-here.jpg` to your image.

.sm-user-ui .sm-gallery-cover-buy-button {
  background-image: url('your-photo-url-here.jpg');
  }
  
.sm-user-ui .sm-gallery-cover-buy-button .sm-icon-CartAdd,
.sm-user-ui .sm-gallery-cover-buy-button .sm-button-label {
  visibility:hidden;
  }

Oh, thanks a lot! Now I have some options to consider and try out. Thank you very much!