Support Center

How do I install Fotomoto on Weebly?

Last Updated: Jul 07, 2017 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

    Make sure the correct website is selected in Weebly and then click the Edit Site button.

    Screenshot of the Edit site button in the Weebly editor
     
  5. Edit your Theme

    Click the Theme link in the top navigation bar of the Weebly Editor.


    Screenshot of the Theme link in the Weebly editor
     
  6. Edit the HTML/CSS

    Click the Edit HTML / CSS button.


    Screenshot of Edit HTML/CSS link in the Weebly page editor
     
  7. Paste the Fotomoto Script in to the header file

    Click the header type you wish to edit under the Header Type section then paste the Fotomoto script in to the header file just before the </body> tag and click the Save button. Note in this example we are editing the "no-header.html" header type. If you don’t know what type of header your page is using, click the Pages menu in the Weebly editor, then select the page under the Pages menu, and you can see the header type shown under the HEADER TYPE.


    Screenshot the Fotomoto Script pasted in to the Edit HTML screen of the Weebly Editor
     
  8. Publish your Site

    Click the Publish button to publish your site with the Fotomoto Script added to the header file.

    Screenshot of the Publish button in the Weebly Editor
     
  9. 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