Videos and Webinars

Change the Background on my Website

The majority of Shift4Shop templates will utilize a background image combined with a solid color in order to achieve a specific look and feel.

This effect is achieved by using a solid color (in this case, black) for the background while also adding an image that creates the honeycomb pattern. This is all controlled via the theme's CSS file.

To change your site's background, you will need to edit the CSS file specific to your selected theme and change its "body" style to suit your needs

Accessing the CSS file

From your Online Store Manager:

  1. Go to Settings > Design > Themes & Styles.

  2. Click on the Edit Look/Colors (CSS) button located at the top of the page.

Once there, you will see the graphical Style Sheet Editor, which outlines all of the various styles contained on the style sheet and allows you to edit them individually.

3. While in the Style Sheet Editor, look for the "body" style and click on its individual Action > Edit button.

4. Look for the "background" field and change its values to suit your needs.

Editing the CSS

The body style's background section will usually contain a hex value for the color (#xxxxxx) and a URL path to the image that's being used. You may also see some instructions on how the image should be displayed. For example, in the following example, the default style has this as its background:

#020202 url(images/BG_body.jpg) no-repeat top center

In this case:

  • #020202 - specifies a dark color

  • url(images/BG_body.jpg) - specifies the path to the image

  • no-repeat top center - specifies the image's alignment and display.

Removing the Image

If you'd like to remove the image, edit the field to include only the color's hex value. You can also take this opportunity to edit the background's solid color altogether by specifying your own color choice.

Changing the Image

If you'd like to change the actual image that's being used, upload your new image and reference it in the CSS file instead.

Image Placement

There are also a few CSS image display options you may use to control how the image is displayed. Please click here for an external reference that contains more information on these CSS tags.

Some common options are:

  • no-repeat: image displays only once on the page

  • repeat-x: image repeats horizontally across the page

  • repeat-y: image repeats vertically down the page