Support Center

Customizing the Buy Buttons

Last Updated: Jan 31, 2013 11:33AM PST

Fotomoto gives you full control over which images you sell on your site, and how the Buy Button links will look.

screenshot of Fotomoto buy buttons


How to change which images are for sale (turning Buy Buttons on/off)

By default, Fotomoto detects every image on a page where it is installed. As long as the images are bigger than the Minimum Width or Height' setting, buy buttons will be shown under the images and the images are added to the Images page of your Fotomoto Dashboard.

Of course there will be some images that you don't want to sell, so you have a few options:



How to change the Buy Button link text

To change what the links say (the text):

  1. Go to the Store Appearance page in your Dashboard
  2. Roll your cursor over the Buy Buttons that appear in the Preview, and click the "Change Label" button that pops up.
  3. Enter the desired text and click OK.


Putting the Buy Buttons above the image instead of below

By default, the Buy Buttons will appear under your image. You can easily put the Buy Buttons above the image by changing the Position setting in the Site > Settings > Toolbar section of the Fotomoto Dashboard.

Note that this option may not work with certain lightbox-style galleries.


Changing the appearance & position of the Buy Buttons

You can change the look of the Buy Buttons to match your site using Cascading Style Sheets (CSS). You can change fonts, colors, position and much more - all using CSS.

Important: You'll need to know a bit about CSS to do this correctly, as we do not offer CSS support. We've posted a few examples to get you started, otherwise we recommend you seek the assistance of a web designer or other CSS expert if you need further assistance.

We recommend that you add any custom Buy Button CSS to your Fotomoto Dashboard:

  1. Go to the Store Appearance page in your Dashboard, and click the "Show CSS" button under Buy Button Appearance.

    Screenshot of the Store Appearance page in the Fotomoto Dashboard

    Note: there is no way to restore the default CSS once changed, so you may wish to copy it and save it in a safe location.
     
  2. Edit the default buy button CSS or add rules for the Buy Button elements, then click the Preview button to see how your Buy Buttons will look in the Preview section.
  3. Click the Save Appearance button to save your changes.

    Screenshot of the Custom CSS editor in the Fotomoto Dashboard


Manually placing the Buy Buttons in a fixed position on your page

If you need to manually place the Buy Buttons on your page (not near your images), please see the instructions in this article.


Buy Button HTML/CSS

For reference, here is an explanation of the HTML and CSS that controls the Buy Buttons.

The Buy Buttons are contained in a DIV with the class "FotomotoToolbarClass". Buy Button links are anchors within unordered list items. The separators that go between the links are enclosed in spans within unordered list items. All of these elements have their own class attribute so you can change them individually or all at once.

Here is a simplified view of the HTML structure and classes that control presentation. Note we have removed some of the code for readability.

<div class="FotomotoToolbarClass">

	 <ul class="FotomotoBar">
	  <li class="FotomotoPrintButton">
	   <a class="FotomotoBarLink">Buy Print</a>
	   </li>

	  <li class="FotomotoSeparator">
	   <span class="FotomotoSep1"></span>
	   </li>

	  <li class="FotomotoCardButton">
	   <a class="FotomotoBarLink">Buy Card</a>
	   </li>

	  <li class="FotomotoSeparator">
	   <span class="FotomotoSep2"></span>
	   </li>
	
	  <li class="FotomotoLicenseButton">
	   <a class="FotomotoBarLink">Download</a>
	   </li>

	  <li class="FotomotoSeparator">
	   <span class="FotomotoSep3"></span>
	   </li>
	
	  <li class="FotomotoShareButton">
	   <a class="FotomotoBarLink">Share</a>
	   </li>

	  <li class="FotomotoSeparator FotomotoShareSeparator">
	   <span class="FotomotoSep4"></span>
	   </li>
	
	  <li class="FotomotoECardButton">
	   <a class="FotomotoBarLink">Send eCard</a>
	   </li>

	 </ul>
	</div>

Here's an example - say we want to change the color of the anchor within the print button class to red:

.FotomotoPrintButton a {color: red !important;}

 

Here's another example showing how you can move the Buy Buttons down a bit (by 8 pixels)

.FotomotoToolbarClass { margin-top: 8px !important; /* move 8 pixels down */ }

 

Note that you may need to use the "!important" declaration to override the normal declaration.

Want more examples? You can find a few "official" examples on this page.


Be careful!

Because we want you to have full control over the presentation of links on your site, we've given you...well, full control =). Note that improper customizations can make your Buy Buttons look funny, appear in weird places, or even disappear completely!


A note about theme support

We receive a lot of requests for help with code because custom CSS code can make our Buy Buttons appear to be "broken". These issues are often caused by 3rd party CSS (often from a theme) used in your website.

We do not provide support for conflicts with 3rd party CSS, so before contacting Fotomoto Support, please follow these steps to disable any non-Fotomoto CSS and re-testing your page.

Don't find what you are looking for? Try our community discussions.

Announcements View Discussions

Have A Question?

Recent Discussions

Go to Discussion Forums ​​

Track Your Package

Track your FedEx package
Track Your UPS package


powered by Desk.com