Add images and backgrounds to your Square Online site
About website images and backgrounds
Images are a crucial element of any website. They can add a personal touch, sell more items, and enhance the overall experience of your online presence. In the Square Online site editor, most sections include an image option you can customize.
The two primary types of images in the site editor are:
Non-background images: These images are part of the added content that appears on your site along with text. You can also think of them as foreground images.
Background images: These images aren't a part of the primary content that appears on your site, but are in the background (or behind) your non-background images and text. You can consider these as part of your site's design or style.
Before you begin
You can add and edit images from your Square Dashboard.
You can upload these supported image file types:
JPG
PNG
GIF
For background images, try to use an image that’s at least 2,000 x 1,000 pixels. For non-background images, use an image that’s no more than 1,000 pixels on its longest side.
If you want to upload multiple images in a gallery or slideshow, you can create an image gallery section. Learn how to add image galleries and slideshows to your Square Online site.
Add an image to your section
Make sure the section you selected allows background and/or non-background images. Learn more about how to manage your Square Online site sections.
- Sign in to your Square Dashboard and go to Sales channels > Online > Website > Site design.
- Choose the page where you want to add images.
- Select + > Section to open the sections menu.
- In the editing panel, go to Customize > Background and choose Image from the drop-down menu.
- Select Add image.
- Sign in to your Square Dashboard and go to Sales channels > Online > Website > Site design.
- Go to the section you want to add an image to or select + > Section to open the sections menu.
- Select Add image under the image option in the editing panel.
Edit an image
You can edit, replace, delete, or change your existing background image to a solid color.
You can improve the readability of a section in Square Online by adjusting the darkness or lightness of the background image. You can also zoom and straighten the background image.
- Sign in to your Square Dashboard and go to Sales channels > Online > Website > Site design.
- Click the page with the background image you’d like to adjust.
- Select the section with the image, and click Customize > Background in the editing panel.
- Select Edit and adjust the image’s readability by moving the slider.
- Save your edits and Publish your site to see the changes live.
To replace or delete a background image:
- From your editing panel, select … > Replace.
- To delete the image, select the trash can icon.
To change your background image to a color:
- From your site editor, go to the page with the background image you’d like to adjust.
- Select the section with the image, and go to Customize > Background.
- From the drop-down menu, choose either Your selected color to change it to your selected site color or select Custom color to change it to a different color.
You can edit your non-background images, replace or delete them, and add right-click protection
The editing options for non-background images depend on the layout of your sections.
To edit a non-background image on your Square Online site:
- Sign in to your Square Dashboard and go to Sales channels > Online > Website > Site design.
- Select the page with the image you’d like to edit.
- Select the section with the image, then select the image to see image options appear in the editing panel.
- Select Edit to adjust the available options. If you don’t like your changes, select Revert to original.
- Save your edits and publish your site to see the changes live.
To replace or delete a non-background image:
- From your editing panel, select Replace.
- To delete the image, select the trash can icon.
You can also disable right-clicking on your site in some browsers to prevent people from easily copying your pictures.
- In your Square Dashboard, go to Sales channels > Online > Settings > Tracking Tools.
- For Add custom header code, select Add new code.
- In the pop-up window, enter the code name and the code into the corresponding fields. Use the code: < body oncontextmenu=”return false;”>
- Place the code in the footer by selecting End of body.
- Select Save.
Adjust background images for mobile
You can adjust the focal point of a section’s background image so the subject of the image remains centered on your Square Online mobile site.
Sign in to your Square Dashboard and go to Sales channels > Online > Website > Site design.
Select the page with the background image you’d like to adjust for mobile.
Select the section with the image and go to Customize > Background in the editing panel.
Select ••• > Set image subject.
Place the indicator dot on the main subject of your background image to help make sure the subject of your photo is centered on your mobile site.
Select Save when finished. You can check the mobile site with this change by switching to the mobile view.
Publish your site to see the changes live.
Create image links
You can also add links to your images.
Sign in to your Square Dashboard and go to Sales channels > Online > Website > Site design.
Select the page with the image you’d like to edit.
Select the section with the image, then select the image to see image options in the editing panel.
Select the image you want to link, then select the Add link button in the editing panel to open the link pop-up window.
Set up your link destination and select Save when finished.