Skip to main content

How do I install Fotomoto on Weebly?

Updated

Before you begin...

  • You will need to have a Fotomoto account - if you don't already have one you can sign up here.
  • Fotomoto is compatible with the Weebly (Basic) Picture element. It also works with the Gallery element (instructions below), 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.

Check your Settings and copy the Fotomoto Script

  1. Log in to your Fotomoto Dashboard and click the Settings tab.
  2. Make sure "I don't know" is selected as your Publishing Platform and "None, I'm not using any script or template" as your Script Library.
  3. Click the "Get Script" button and copy the Fotomoto Script.
    Edit theme HTML in Weebly Editor

Paste the Fotomoto Script in to your Weebly Theme

  1. Log in to Weebly, make sure the correct website is selected, and then click the Edit Site button.
  2. Click the Theme link in the top navigation bar of the Weebly Editor.
  3. Click the Edit HTML / CSS button.
    edit-theme-in-weebly.png
  4. Click the header you wish to edit.
    If you don’t know which header types your pages use, click the Pages menu in the Weebly editor, select the page to check under the Pages menu and you can see the header type shown under the HEADER TYPE.
  5. Paste the Fotomoto script in to the header file just before the </body> tag and click the Save button.
    You'll need to make sure the Fotomoto Script is pasted in any header files that your pages use. In this example we are editing the "tall-header.html" header type.
  6. Click the Save button to save your changes.
    Paste Fotomoto Script in to Weebly site header and save

If You Use the Weebly Gallery Element

If you prefer to use the Gallery element, please note that the Fotomoto Buy Buttons will show at the top of the page when the lightbox is open, and they will no longer appear automatically under Image elements.

To make Fotomoto work with the Gallery element:

  1. Go to the Settings page of your Fotomoto Dashboard.
  2. Select "FancyBox" as your Script Library.
    Select fancybox as Script Library in the Fotomoto Dashboard
  3. Click Store Appearance on the left, and click the Show CSS button in the Buy Button Appearance section.
  4. Copy the custom CSS code below then replace everything in the Custom CSS field with the copied code.
  5. Click the Save Appearance button.
/* 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;
}
Add custom CSS in Fotomoto Dashboard and click Save

Publish your Site and Done!

Click the Publish button in your Weebly Editor. Now Fotomoto Buy Buttons will appear on your images...success!

Fotomoto Buy Buttons on an image on a Weebly page

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, just contact Fotomoto Support for help.

Related articles