Customize Images and Backgrounds in Square Online
Images are an important part of any website. They can add a personal touch, help sell products and enhance the overall look of the site. Within Square Online, some sections automatically include product images like the featured items section, but there are several other ways to add images to your site.
The image gallery section lets you upload multiple images and choose from different layout styles like static galleries, slideshows and more.
The Instagram feed section lets you connect to your Instagram account so you may choose images to sync to your website.
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.
Learn more tips for managing both non-background and background images in the Square Online site editor.
Add a Section with an Image Option
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 apply it to the page.
Edit Section Settings
Once you’ve added a section in the Square Online site editor, you can change the settings. Settings vary from section to section, but most include additional layout options. Select any layout to see the page update, then choose the one that best suits your needs.
Some 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 menu, 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. You can rearrange the order of groups on the page by dragging a group to a new spot in the menu.
Add an Image to a Section
For non-background images, select the Add image button in the menu. For background images, under Customize > Background, choose Image in the dropdown menu. Either of these options will open the asset manager pop-up window so you may select or upload your image(s).
There are a few different options for adding an image in the asset manager pop-up window:
Select My images to see all general images uploaded across all websites in your account. Use the Site dropdown menu to switch between sites.
Select My logos to see all logo images uploaded across all websites in your account. Use the Site dropdown menu to switch between sites.
Select Free photos to browse through several free photos you can use on your site.
Select Instagram to connect your Instagram account and use the photos in your account on your site.
To upload a new image, select the link to choose a file from your computer. You can upload these image file types:
For best results, use images that are 72 PPI and at least 1,000 pixels in width or height. Save images files using the RGB colour profile to ensure colour consistency. Large image files can affect page loading speed, so avoid uploading images that are larger than 1MB in size.
Images you upload or add through the free photo search are saved under My images so you can easily reuse them in the future.
On the image file in the menu, select Edit to straighten, rotate or adjust the zoom level of the image on the page. You can also add alt text to improve SEO and web accessibility, or add a link to the image.
Select the Crop button to change the shape of the frame around the image (this option will not change the image file itself). Select the Size button to change the display size of the image. Text and other content will automatically adjust to fit within the section.
To select or upload a different image, hover over the image file in the menu and select "..." > Replace. You can also select "..." > Delete if you want to remove the image. If you change your mind, use the undo arrow to go back a step.
When you’re finished editing the image, select the back arrow to return to the main section settings. Follow the same process to add more images to your section.
You can improve the readability of a section by adjusting the darkness or lightness of the background image. Light images can become lighter where the text will default to a darker colour, and dark images can become darker where the text will default to a lighter colour. To adjust a section’s readability, select the section with the image, and go to Customize > Background in the menu. Under "Improve readability," adjust the image’s readability by moving the slider.
You can also adjust the focal point of a section’s background image so that the subject of the image remains centered on your Square Online mobile site. To adjust the subject of your section’s background image for mobile, go to Customize > Background in the menu. Hover over the image file in the menu and select "..." > Set image subject. Place the indicator dot on the main subject of your background image. This will help make sure the subject of your photo is always centered on your mobile site.
Select Save when finished. You can check the mobile site with this change by switching to the mobile view. Adjust it again in the dektop view as needed.