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!