System updates

We’re experiencing issues that may affect your Square services. We’ll continue to update our status page with more information.

Home>Site Design and Content

Customise 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 customisation 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

ep-add-pics-add-section

The first step is to choose or create a page you want to add images to in the Square Online site editor. Next, select the Add section button to open the sections menu.

Most of the sections in the Organise 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 editing panel. For background images, under Customise > Background, choose Image in the drop-down menu. Either of these options will open the asset manager pop-up window so you may select or upload your image(s).

ep-add-pics-upload

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:

  • .jpg

  • .png

  • .gif

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 color profile to ensure color 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.

Edit Images

Non-background images

square-online-edit-image-en

To edit an image on your Square Online site:

  1. In your Square Online site editor, go to the page with the image you’d like to edit.

  2. Select the section with the image. Select the image itself to see image options appear in the editing panel.

  3. Select Edit image to adjust the available options as needed. If you don’t like your changes, select Revert to original.

  4. Save your edits and Publish your site to see the changes live.

To upload a different image, select Replace in the editing panel. You can also select the trash can icon if you want to remove the image. If you change your mind, use the undo arrow to go back a step.

In the editing panel, you can additionally add a link to the image, or add alt text to improve SEO and web accessibility. Learn more about how to add a link to your site and optimise your website pages for SEO. You can also learn more about your site’s web accessibility.

Background images

square-online-upload-background-image-en

You can improve the readability of a section in Square Online 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 for your Square Online site:

  1. In your Square Online site editor, go to the page with the background image you’d like to adjust.

  2. Select the section with the image, and go to Customise > Background in the editing panel.

  3. Select Edit image and adjust the image’s readability by moving the slider.

  4. Save your edits and Publish your site to see the changes live.

You can also adjust the focal point of a section’s background image so that the subject of the image remains centred on your Square Online mobile site. To adjust the subject of your section’s background image for mobile:

  1. In your Square Online site editor, go to the page with the background image you’d like to configure for mobile.

  2. Select the section with the image, and go to Customise > Background in the editing panel.

  3. Select ‘...’ > Set image subject.

  4. Place the indicator dot on the main subject of your background image. This will help make sure the subject of your photo is always centred on your mobile site.

  5. Select Save when finished. You can check the mobile site with this change by switching to the mobile view. Adjust it again in the desktop view as needed.

  6. Publish your site to see your changes live.

Can't find what you need?