Page tree
Skip to end of metadata
Go to start of metadata

Introduction

Within the SpreadShop you can define different settings and also write your own CSS. What these settings mean and what you can adjust in your CSS is explained below.

 

How to define a background color for a specific design

If you have white designs on a white background, this might cause some problems.
We currently do not offer a "build in" solution for this but you can fix this on your own.

 

What do I need to do:

  • analyse the picture element of the design you want to have an individual background color
  • get the "article ID" of the underlying article that looks like id="article-xxxxxxx"

 

  • Go to your shop administration > adanced settings >css and add the following line to your css #article-104509042{background-color:#fae !important}
    • replace 104509042 with the article ID you found
    • replace #fae with the color of your choice
    • the !important is needed so that the color get's applied

  • Save the settings and visit your shop

Shop Background Image

To customise the background of the shop, you can either upload an image or specify a custom colour. To use a graphic, you upload it in the graphic overview Then, in the settings under Mobile Shop, you can adjust the field spreadshop.css class .customPageBackground {} as follows:

.customPageBackground {background-image:url(“=“/shopData/[shop name]/images/Filename Your Graphic“)}

More information on adjusting the positioning can be found here

Shop Background Colour

If you don't want an image but rather a colour as the background, use the class under spreadshop.css .customPageBackground {} There you enter your background-colour: # FFFA02 (for this example, yellow) and save.

 

Image size

The default size of the product thumbnail currently measures 300 x 300 pixels. If you display less than four products in a row, the image size adjusts to the width of the shop and the quality of the preview image is no longer sufficient. To fix this, the number of pixels can be changed. in steps of 100 to 1200 pixels.

Articles per page

Under "List Loading Count" you specify how many product images are displayed by default when loading the shop. Below the specified product number a "more products" button appears. Clicking on it displays more products of the specified number. If all available products are displayed, the "more products" button disappears.

Social Media Buttons

With the "Social Media Buttons" option, you can activate buttons with symbols for Facebook, Twitter, Google+ and Pinterest for your Shop. Both you and your customers can use these to share products on the usual social channels.

Show Shop Categories

With the option "Show Shop Categories", you can show your Shop categories in a menu to the left of the products display for easier navigation.

CSS

The CSS can be completely self-defined. The existing CSS serves as an example that can be used to try out different settings. To remove previous changes, simply delete everything and click on "save". The sample CSS is now back in the initial state.

Below is a selection of definable CSS classes that are useful for the shop. They are a meant to make styling your shop easier. Of course other classes can also be customised:

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

 

 

Basic Examples

Set Background Color

PropertyValue
Image-BackgroundColord7d7d7

spreadshop.css

.customPageBackground {
    background-color: #d7d7d7;
}

Repeating Header Background 

PropertyValue
HeaderImageactivated
spreadshop.css
#header-html {
background-image: url("/image-server/v1/users/414127/shops/151915/graphics/151915_dots26424_640.png");
}
.SprdMain .HeaderHtml {
background-repeat: repeat !important;
background-position: right top !important;
background-size: 25%;
}


More information and examples on the header can be found here: Header Images

13 Comments

  1. Anonymous

    How do you change the browser tab from the default shop number?  I want it to say something else.

    1. Hi there,

      You can define your shop name in the basic shop settings. This name will be shown in the tab.

       

      1. Anonymous

        I checked everywhere but couldn't find anything in the shop settings.

        Any chance to have more information?

        Thanks in advance for the help.

  2. Anonymous

    I am unable with CSS to remove the home icon wishlist icon, Filters and change any of the header colours etc. I tried in the CSS box on spreadshirt and on my website. Am i perhaps missing something?

    1. Anonymous

      This worked for me on the home icon. Keep in mind, changes take time.

      .SprdMain .SprdHeader .item.Icon {
      display: none;
      }

  3. Anonymous

    .SprdMain .Footer .trustedFooter {
    1.  background-color  #666666;
       color  #AA997D;
       border-color  #666666;
       background linear-gradient(to bottom,  #5e5e5e 0%,  #616161 100%);
    }
    This is the section that I want change. I simply want to change the background-color and remove the gradient. No success. why? 
  4. Anonymous

    Right now, www.shop.spreadshirt.com/litofficial I have removed the top links. But I want to add back just the cart and wishlist. How do I go about doing that?

  5. Anonymous

    Hello,

    I would like to hide the subcategories in the menu, to show only Men / Women / Accessories and not anymore subcategories as "T shirt", "Bags"...

    What can I add in my css menu ? 

    Best, 

    James

  6. Anonymous

    do these changes takke time? or are they immediate?

    1. Anonymous

      They take time to show in your live store.

  7. Anonymous

    Is there any possiblity to change each products image in my shop.

    For example change this stock image

    to this

    This will make my shop look much more professional.

    http://shop.spreadshirt.be/trickdclothing/

     

    Thanks in advance

  8. Anonymous

    I am unable to define a background color for a specific design.   The instructions on this page seem pretty straight forward.   Have there been any changes or any idea what I might be missing?  Any advice/assistance would be greatly appreciated. 

    1. Anonymous

      Got it!  The instructions above had -'s and my source was using _'s.  The line below worked great.  

      #article_1045xxxxxx{background-color:#fae !important}