Customize Images and Backgrounds in Square Online
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 will include an image option for you to customize, including the following:
Upload multiple images with an image gallery section and choose from different layout styles like static galleries, slideshows, and more.
Connect your Instagram account with an Instagram feed section so you may sync and display your social images online.
Showcase your top items and categories with a featured items section to allow customers to quickly order or shop.
General text and image sections let you add multiple forms of content, with additional customization options to choose from.
Most other sections allow you to add a background image.
Note: You can also add item and category images to Square Online directly in the editor.
Learn more tips for managing both non-background and background images for your Square Online site.
Non-background Images vs. Background Images
When working with images in the site editor, you'll see these two primary types:
Non-background: These images are part of the added content that appears on your site along with text. They can usually be right-clicked and copied, or opened in a new browser tab. You can also think of them as foreground images.
Background: 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. They can be considered a part of your site's design or style, and cannot be right-clicked and copied, or opened in a new browser tab.
Add a Section with an Image Option to Your Site
Most of the sections in the Organize category include a non-background image. Select any section to see how it looks on the page. You can also add any other section and edit the background image. When you find one that you like, select Add to add it to your page.
Add an Image to Your Section
To add images to your section:
Non-background: Under the image option in the editing panel, select Add image.
Background: Under Customize > Background in the editing panel, choose Image in the dropdown menu and select Add image.
Either of these options will open the asset manager popup window so you may select or upload your images.
Edit Section Groups
Some section layouts let you copy parts of the section called Groups so you can add more content and images without adding another section to the page. Under Group in the editing panel, you'll see a list of the current groups in the section.
To insert a new image and text group with the default text, select Add group. To copy an existing group, select "..." > Duplicate. New or duplicated groups will appear in the list in the editing panel. You can rearrange the order of groups on the page by dragging a group to a new spot in the list.
Edit Non-background Images
Edit Background Images
Edit Background Videos
Note: Use a video as a section background by upgrading your Square Online site.
On top of high quality GIFs, you can also upload your own videos as section backgrounds to add animations to your content. Start by selecting your section and choosing Video as your background option in the editing panel to upload a video file. You can replace or delete the video file at any time. Depending on the section, you can also adjust the video start time, end time, or playback speed.
Note: Maximum video file storage is 20 GB.
Additionally, you can add non-background videos with sound and other features to your site using YouTube, other video hosts, or your own files. Learn more about including videos on your website for more information.
Mobile Site Image Options
Although the mobile version of your website can't be edited separately from the desktop version, you do have image options specific to your mobile website meant to keep your images looking great across all screen sizes. Your options include the following:
If you've uploaded multiple images to your Square Online site with the same file name, you may see those images display several unwanted behaviors on your live website. For example, images could suddenly appear on the wrong page or swap places, or even not appear at all. Due to this, making sure each image has its own unique file name prior to uploading it to the site editor will help avoid this behavior in the future.
If you're experiencing this currently, troubleshoot it with these steps:
From your Square Online site editor, delete all of the images that display incorrectly.
On your computer or device, manage your image files by making sure they all have unique file names.
In the site editor, re-upload the images to your website.
Publish your site to see the changes live.