|
Note:
This article is provided for informational purposes and guidance. Please be aware that Shift4Shop technical support is neither able nor qualified to offer support on changing your site's CSS files.
If editing your site's look and feel is beyond your capabilities, we have Design Services available that may help. Please check with your sales representative for more details.
The majority of Shift4Shop templates will utilize a background image combined with a solid color in order to achieve a specific look and feel. For example, in the following image we notice that the template's style contains a honeycomb pattern which fades into a solid color as shown here:
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 it's "body" style to suit your needs
Accessing the CSS file
From your Online Store Manager:
- Go to Settings >Design >Themes & Styles
- Click on the "Edit Look/Colors (CSS) button located along the top of the page
Once there, you will see the graphical Style Sheet Editor which outlines all of the various styles contains on the style sheet and allows you to edit them individually.
Note:
Your store's theme folder contains a "default.css" file as its style sheet. Once you click the "Edit Look/Colors (CSS) button described above, your store will begin using a secondary style sheet called "default_modifed."
- While in the Style Sheet Editor, look for the "body" style and click on its individual "Action >Edit" button.
Tip:
Use CTRL-F on your browser to search for the word "body" and find it easier.
- Look for the "background" field and change its values to suit your needs.
Tip:
Advanced users with a good grasp of CSS can also click on the "Advanced Mode" button located at the top and access the full CSS file in its entirety.
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, simply 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.
Tip:
Some colors can be referenced by their names instead of hex value. For example, #FF0000 can be substituted with the word "red." Please click here for a listing of colors that can be referenced by name.
Changing the Image
If you'd like to change the actual image that's being used, simply upload your new image and reference it in the CSS file instead.
Note:
When uploading the new image, be sure to upload it directly to your site's /web/assets/templates/[theme]/css/images folder, where [theme] is your theme's folder name. (i.e. v40001-html5)
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
|