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!

  • Uncategorized
0 0 votes
Article Rating
7 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Patrick
Patrick
3 years ago

How do I add a background Image to the main page of the store?

Jason Mortensen
Jason Mortensen
4 years ago

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

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

Tommy
Tommy
4 years ago

If someone knows how to remove shop logo/name and breadcrumbs let me know 🙂

Aaryan Pagi
9 months ago

how do you make it so that you can remove the “Make Your Own Product” thing at the bottom disappear?

Wes
Wes
6 years ago

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.

chris
chris
6 years ago

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.

Eddie
Eddie
6 years ago

You might have to add this to the Site Header section for you font to work, assuming you are using a Google Font: