CSS Tips You’ve Always Wanted to Know

CSS Tips You’ve Always Wanted to Know

If you’re looking to design the ultimate Shop, you’ll quickly embrace CSS. Thanks to your inquiries via our blog, forum, and customer service, we’ve been able to summarize frequently asked questions on how to customize your Shop using simple CSS hacks.

Before we start: Please be aware that every styling element in your shop exists for a good reason and obeys standards in e-commerce. Any changes can have an effect on how serious or trustworthy your customers perceive your shop. In addition, these CSS tips should be viewed as a last resort, as CSS classes may change without notice and these hacks will no longer work. Now that that’s been settled, let’s dive in!

What is CSS?

Essentially, your website or Shop’s CSS (Cascading Style Sheets) will team up with the HTML to make it easier for users to design and modify their web page. While the HTML is used for your site’s content, the CSS helps present and style that text. For instance, you can set overarching rules (whether they be in regards to color, style, headlines, etc.) for a particular page. Fortunately for you, Spreadshirt makes it more than easy to manipulate this CSS.

How Do I Edit My Shop’s CSS?

It’s extremely easy to edit your Shop’s CSS. Simply go to your Shop admin page, visit ‘Advanced Settings,’ click on ‘HTML & CSS,’ and hit the ‘Edit Shop CSS’ tab. Then, enter in any of the codes below.

Specific CSS Hacks

How Do I Change My Shop’s Font

  • body {font-family: American Typewriter !important;}
  • The above case uses “American Typewriter” font as an example

How Do I Hide All Colors on the Listpage?

  • .sprd-appearance-list–listpage {display:none !important;}

How Do I Hide Specific Colors on the Listpage?

  • .sprd-appearance-list__appearance-1 {display:none !important;}
  • Exchange the number (in the above case, ‘1’ which is the appearance number for white) with the number you see at the bottom left of your browser window (behind ‘appearance’ when you hover over the product (in the requested color) that you want to hide).

How Do I Hide All Colors on the Detailpage?

  • .sprd-detail-info__appearances {display:none !important;}

How Do I Hide Certain Product Colors on the Detailpage?

  • #sprd-appearance-list__appearance-1 {display:none;}
  • Swap the number (in the above case, ‘1’) with the number displayed in the URL (behind appearance)

How Do I Hide Certain Departments (Including Men, Women, Kids & Babies, Accessories, Case, Wall Prints)?

  • Men:
    • #sprd-department-filter__department-D1 {display:none;}
  • Women:
    • #sprd-department-filter__department-D2 {display:none;}
  • Kids & Babies:
    • #sprd-department-filter__department-D3 {display:none;}
  • Accessories:
    • #sprd-department-filter__department-D4 {display:none;}
  • Cases:
    • #sprd-department-filter__department-D18 {display:none;}
  • Wall Prints:
    • #sprd-department-filter__department-D22 {display:none;}

How Do I Hide Certain Categories (Including T-Shirts, Sports Wear, Workwear, etc.) Within Departments?

  • #subFilter-D5-P48 {display:none;}
  • Exchange the code (in the above case, ‘48’) with the number you see behind the ‘P’ in the URL)
  • The above case uses “Bags & backpacks” as an example

Take note of these CSS hacks, and you can quickly separate your Shop from the crowd. Before long, you’ll be providing your potential customers with a unique Shop experience!

What do you think of these CSS tips? Let us know in the comments below!

9 comments Write a comment

  1. Here’s one I’ve made so “Open Your Own Shop – Completely Free” at the bottom disappears 🙂

    .sprd-info-footer__open-shop {
    display: none;
    }

  2. Nice tips. I would like to know the css code to add a home tab next to shop and create at the top of spreadshirt shop. The home tab would be a link back to my personal website rather than embedding the SS on my website.

  3. Be nice if there was a tutorial to actually figuring out the codes to specific things to edit rather than a “few tips”.

    I kinda need a whole list of every option or at least guidance to figuring out how to find the code myself in order to edit it.

    • Hi Chris,

      Of course the list can be very long. You can always find YT tutorials or ask our good old friend Google :-). You can easily find the element you want to hide in examining the element with a right click and selecting “Inspect Element” and then adding the display none part that you can find in this blogpost. If it’s something specific then I can obviously also help you. What would you like to change in your Shop?

      Let me know if this helps,
      Lena

Leave a Reply


* Checkbox GDPR is required

*

I agree