Skip to main content

How do I install Fotomoto on Squarespace?

Updated

Before you begin...

Note that Fotomoto only works on Images in Squarespace, not Galleries. If you would like to use our API to add custom Buy Buttons to a Gallery, please see Integrating Fotomoto into an image gallery.

Check your Dashboard Settings

  1. Click the Settings link at the top of your Fotomoto Dashboard.
  2. Make sure your Publishing Platform is set to "None, I have a custom made website" and your Script Library is set to "None, I'm not using any script or template".
    Fotomoto Dashboard Settings for Squarespace

Add the Fotomoto Script to Squarespace

  1. Click the "Get Script" button and copy the Fotomoto Script that appears in a pop-up window.
    Copy Fotomoto Script dialog box
  2. Paste the Fotomoto Script in to the Footer section of the Code Injection form of your Squarespace site according to the Squarespace Using code injection instructions, then click Save.
    Fotomoto Script in Squarespace Code Injection Footer

Change your Store Appearance

  1. Copy the CSS below
/* Default styling from Fotomoto */
.FotomotoToolbarClass a,
.FotomotoToolbarClass a:link,
.FotomotoToolbarClass a:visited,
.FotomotoToolbarClass a:active,
.FotomotoToolbarClass a:hover {
	/* increase font size */
	font-size: 18px !important;
}

.FotomotoSeparator{
	margin: 0 4px !important;
}

.FotomotoToolbarClass{
	text-align:left !important;
}

/* Overlay Buy Buttons on Squarespace Images */
.FotomotoToolbarClass {
	position: absolute;
	bottom: 0px;
	background-color: #FFFFFFA3 !important;
	color: #000 !important;
}
  1. Back in your Fotomoto Dashboard, click "Store Appearance" on the left, click the "Show CSS" button,  replace the Custom CSS with the CSS you copied above and click the "Save Appearance" button.
    Fotomoto Store Appearance and Show CSS button

    Squarespace custom CSS added in Store Appearance
  2. Finally, change your Block Detection setting to "Next to Image" and click the "Save Appearance" button.
    Fotomoto Dashboard Block Detection Next to Image

You're Done!

Now you should see Buy links over the images on your Squarespace site. If you opted to make your images for sale by default but there are some images you'd prefer not to sell, you might move them to "Not for Sale" or otherwise exclude them from sale as explained in How do I exclude a photo from my store?.

Related articles