Squarespace: How to Use Manage Custom Files

Image for How to Use Manage Custom Files in Squarespce by The Qurious Effect, Squarespace website design studio

If you’ve used Wordpress, you’re probably very familiar with the media library and uploading images to it in order to use them on your site. If you’re not familiar, media libraries house images for use on your website (when you don't want to place the image on a page) and provide a unique location (web address) for each image that can then be called on to load the photo in its desired location. 

Squarespace isn’t set up with a Wordpress-like media library. Instead we have the Manage Custom Files option in the Custom CSS window. Once you get the hang of how to use it, you can do things all sorts of creative things like adding hidden images for pinning to Pinterest or creating hover effects for images on your site.


Before getting started, I’d recommend getting your images organized and optimized for web use.


Here's How to Use Manage Custom Files in Squarespace

After logging into your Squarespace website, from the home screen, go to Design>Custom CSS.

At the bottom of the Custom CSS menu on the left is a button called Manage Custom Files, click that button.

Step 1: Adding an image to Squarespace using Manage Custom Files. Accessing the Manage Custom Files menu.

When the menu opens, click on Add images or fonts.

Step 2: Adding an Image to Squarespace using Manage Custom Files. Click on Add images or fonts.

You’ll be prompted to navigate to the image you want to add from your computer. Once you select the image, click Open and your image will be uploaded to your site. (You can only upload one image at a time.)

Once you see the image appear in the window, click the image within the menu and it’s URL/address will appear at the top of your Custom CSS window (you may need to scroll to the top of the window).

Using Manage Custom Files in Squarespace. Click on the image you just uploaded to get it's unique address.

Open your text editor or a Word doc so you can save the image’s web address.

Cut the address and paste it into the text doc so you can use it in the code you’ll be adding to your page where you’d like the image to appear. In the image below, the image URL (web address) is highlighted in pink below. It starts with https: and ends with .jpg. Make sure you delete the image address from your Custom CSS window so it’s not left in the code.

Adding images to Squarespace using Manage Custom Files. Copy the address from the top of your Custom CSS window.

Repeat the process for any other images you’d like to use.


Example of how you can use images uploaded via Manage Custom Files

Now that you’ve got the addresses, you can then use the images creatively on your Squarespace website. On my About page, I use images with hover effects to share fun tidbits about myself. Much more interesting and engaging than a boring old text list, wouldn't you agree?! You can check it out for yourself here!



Example of Squarespace image with hover effect, initial view.

VIEW when hovering on top left image

Example of image on Squarespace with hover state, hovering over the image.

Interested to learn how to create your own hover effect images? Check out this post on how you can create your own fun image grid with hover effects in Squarespace!



Wondering where the media library is in Squarespace? Looking for how to add images to your site that you want to hide (hello Pinterest!)? Use Manage Custom Files in Squarespace to add images to your website without having to place them into a post or on a page. Click through to read the post for the full how to.
squarespacesharon newsom