Support Center

How do I install Fotomoto on Weebly?

Last Updated: Oct 31, 2013 07:41PM PDT

Important! Before you begin...

  • You will need to have a Fotomoto account - if you don't already have one you can sign up here.
  • Fotomoto will work with the Weebly (Basic) Picture and Gallery elements, but not with the Slideshow element.
  • Weebly is not compatible with Auto Pickup, as Weebly will rename the image files that you upload to your site.


 

Installing Fotomoto on Weebly

  1. Copy the custom CSS code below

    /* Fotomoto styling for Weebly sites */
    .FotomotoToolbarClass a,
    .FotomotoToolbarClass a:link,
    .FotomotoToolbarClass a:visited,
    .FotomotoToolbarClass a:active,
    .FotomotoToolbarClass a:hover {
    color: #000 !important;
    }
    
    .FotomotoSeparator{
    margin: 0 4px !important;
    }
    
    .FotomotoToolbarClass{
    text-align:left !important;
    z-index: 10000;
    background-color: #FFF !important;
    }
    
    .fancybox-wrap{
    margin: 15px 0 0 0 !important;
    }

     
  2. Paste the Custom CSS into your Fotomoto Dashboard

    Go to the Settings page of the Fotomoto Dashboard, click Store Appearance on the left, click the Show CSS button, then replace everything in the Custom CSS field with the code you copied above, and click the Save Appearance button.

    Screenshot of the Show CSS button on the Settings page of the Fotomoto Dashboard

    Screenshot of the Custom CSS input on the Settings page of the Fotomoto Dashboard
     
  3. Change your Settings and copy the Fotomoto Script

    Click the Settings tab again, select "I don't know" as your Publishing Platform. If you're using an Image element, select "None, I'm not using any script or template" as your Script Library, or if you're using a Gallery element select "FancyBox", then click the Get Script button and copy the Fotomoto Script.

    Screenshot of Weebly settings on the Settings page of the Fotomoto Dashboard

    Screenshot of the modal window that contains the Fotomoto Script to copy
     
  4. Edit your Weebly site

    Click the Edit button next to your Weebly site

    Screenshot of the Edit site button in the Weebly editor
     
  5. Edit the HTML/CSS

    Click the Design tab at the top of the Weebly editor, then click the Edit HTML/CSS link found This should bring up the HTML/CSS text editor.


    Screenshot of the Design and Edit HTML/CSS buttons in Weebly editor
     
  6. Paste the Fotomoto Script in to your Page Layout

    Select the Page Layout that you're using in the left sidebar under Page Layouts, then scroll down to the bottom of the code on the right and paste your Fotomoto script on the line before the </body> tag, and click the Save button.


    Screenshot of pasting the Fotomoto Script in to the Weebly page editor
     
  7. Publish

    Now just Publish your Weebly site as you usually do.


    Screenshot showing site Publish button in the Weebly editor
     
  8. Success!

    Images on your Weebly site should now appear with the Fotomoto Buy Buttons. Note the Buy Buttons will appear above the image when using the Gallery element, but below the image as usual when using an Image element.

    Screenshot of Fotomoto Buy Buttons on an image in a Weebly site
     

    Now that you've installed Fotomoto on your site, you might want to read our article "I've installed Fotomoto - now what?".

    If you have trouble installing Fotomoto on your site, take a look at the Troubleshooting articles in our Support Center or contact Fotomoto Support for help.

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