Menu

Adjust your Shop settings with HTML/CSS

Of course! Use your own images, text, links and other HTML elements.

To apply your own HTML/CSS for your Shop, there are 3 entry fields available in Shop settings > SpreadShop > Advanced settings > HTML/CSS:

  • Shop Header
  • Shop Footer
  • CSS Stylesheet

Enter an HTML of your choice in the header/footer line. To make sure that your Shop remains in operation, we’ll check out the HTML. You can also see whether it works by clicking here: https://validator.w3.org/#validate_by_input. Please note that for security reasons, JavaScript for cannot be used and will be removed if necessary.

Below you’ll find a selection of useful CSS classes for your Shop. These will help you improve the look of your Shop. Of course, other classes can be customised as well.

What do you want to change? CSS Class
Background image or colour .customPageBackground
Header .customHeader
Footer with Legal Information and ToS .customFooter
Counter in Basket and the Save List .customCounter
Notifications .customNotification
Error Messages .customNotification.sprd-error
Headline e.g. in Basket .customHeadline
Choice Elements (e.g. size, colour) .customSelector
Chosen Value in Choice Element .customSelector .sprd-active.sprd-item
Category Choice (not mobile) .customFilterItem, .customSubfilterItem
Hover Effect in the Category Selection (not mobile) .customSubfilterItem:hover
Only smartphones and no tablets or desktop PCs. @media screen and (max-width: 767px) .customSelector.sprd-open
Various Buttons .customButton
Standard-Buttons .customButton.sprd-default
.customButton.sprd-default:hover
.customButton.sprd-default:active
Important Buttons e.g. “Buy” .customButton.sprd-primary
.customButton.sprd-primary:hover
.customButton.sprd-primary:active
Secondary buttons e.g. “Add to Basket” (in Save List) .customButton.sprd-secondary
.customButton.sprd-secondary:hover
.customButton.sprd-secondary:active
Lightbox .customLightbox
Search Field on Mobile Devices, Dropdown Menus on Desktop PCs .customFilter
Animated Images on Loading Page .sprd-loadable.sprd-loading, .sprd-loader

Was this article helpful?