{"id":17388,"date":"2018-04-24T07:08:20","date_gmt":"2018-04-24T11:08:20","guid":{"rendered":"https:\/\/www.spreadshop.com\/blog\/?p=17388"},"modified":"2025-01-16T21:00:06","modified_gmt":"2025-01-17T02:00:06","slug":"css-tips-youve-always-wanted-to-know","status":"publish","type":"post","link":"https:\/\/www.spreadshop.com\/blog\/2018\/04\/24\/css-tips-youve-always-wanted-to-know\/","title":{"rendered":"CSS Tips You\u2019ve Always Wanted to Know"},"content":{"rendered":"<p>If you\u2019re looking to design the ultimate Shop, you\u2019ll quickly embrace CSS. Thanks to your inquiries via our blog, forum, and customer service, we\u2019ve been able to summarize frequently asked questions on how to customize your Shop using simple CSS hacks.<\/p>\n<p><!--more--><\/p>\n<p><span id=\"result_box\" class=\"\" lang=\"en\"><span class=\"\">Before we start: Please be aware that every styling element in your shop exists for a good reason and obeys standards in e-commerce.<\/span> <span class=\"\">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. <\/span><\/span>Now that that\u2019s been settled, let\u2019s dive in!<\/p>\n<h2>What is CSS?<\/h2>\n<p>Essentially, your website or Shop\u2019s 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\u2019s 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.<\/p>\n<h2>How Do I Edit My Shop\u2019s CSS?<\/h2>\n<p>It\u2019s extremely easy to edit your Shop\u2019s CSS. Simply go to your Shop admin page, visit \u2018Advanced Settings,\u2019 click on \u2018HTML &amp; CSS,\u2019 and hit the \u2018Edit Shop CSS\u2019 tab. Then, enter in any of the codes below.<\/p>\n<h2>Specific CSS Hacks<\/h2>\n<p><strong>How Do I Change My Shop\u2019s Font<\/strong><\/p>\n<ul>\n<li>body {font-family: American Typewriter !important;}<\/li>\n<li><em>The above case uses \u201cAmerican Typewriter\u201d font as an example<\/em><\/li>\n<\/ul>\n<p><strong>How Do I Hide All Colors on the Listpage?<\/strong><\/p>\n<ul>\n<li>.sprd-appearance-list&#8211;listpage {display:none !important;}<\/li>\n<\/ul>\n<p><strong>How Do I Hide Specific Colors on the Listpage?<\/strong><\/p>\n<ul>\n<li>.sprd-appearance-list__appearance-1 {display:none !important;}<\/li>\n<li>Exchange the number (in the above case, \u20181\u2019 which is the appearance number for white) with the number you see at the bottom left of your browser window (behind \u2018appearance\u2019 when you hover over the product (in the requested color) that you want to hide).<\/li>\n<\/ul>\n<p><strong>How Do I Hide All Colors on the Detailpage?<\/strong><\/p>\n<ul>\n<li>.sprd-detail-info__appearances {display:none !important;}<\/li>\n<\/ul>\n<p><strong>How Do I Hide Certain Product Colors on the Detailpage?<\/strong><\/p>\n<ul>\n<li>#sprd-appearance-list__appearance-1 {display:none;}<\/li>\n<li>Swap the number (in the above case, \u20181\u2019) with the number displayed in the URL (behind appearance)<\/li>\n<\/ul>\n<p><strong>How Do I Hide Certain Departments (Including Men, Women, Kids &amp; Babies, Accessories, Case, Wall Prints)?<\/strong><\/p>\n<ul>\n<li><strong>Men<\/strong>:\n<ul>\n<li>#sprd-department-filter__department-D1 {display:none;}<\/li>\n<\/ul>\n<\/li>\n<li><strong>Women<\/strong>:\n<ul>\n<li>#sprd-department-filter__department-D2 {display:none;}<\/li>\n<\/ul>\n<\/li>\n<li><strong>Kids &amp; Babies<\/strong>:\n<ul>\n<li>#sprd-department-filter__department-D3 {display:none;}<\/li>\n<\/ul>\n<\/li>\n<li><strong>Accessories<\/strong>:\n<ul>\n<li>#sprd-department-filter__department-D4 {display:none;}<\/li>\n<\/ul>\n<\/li>\n<li><strong>Cases<\/strong>:\n<ul>\n<li>#sprd-department-filter__department-D18 {display:none;}<\/li>\n<\/ul>\n<\/li>\n<li><strong>Wall<\/strong> <strong>Prints<\/strong>:\n<ul>\n<li>#sprd-department-filter__department-D22 {display:none;}<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong>How Do I Hide Certain Categories (Including T-Shirts, Sports Wear, Workwear, etc.) Within Departments?<\/strong><\/p>\n<ul>\n<li>#subFilter-D5-P48 {display:none;}<\/li>\n<li>Exchange the code (in the above case, \u201848\u2019) with the number you see behind the \u2018P\u2019 in the URL)<\/li>\n<li><em>The above case uses \u201cBags &amp; backpacks\u201d as an example<\/em><\/li>\n<\/ul>\n<p>Take note of these CSS hacks, and you can quickly separate your Shop from the crowd. Before long, you\u2019ll be providing your potential customers with a unique Shop experience!<\/p>\n<p><em>What do you think of these CSS tips? Let us know in the comments below!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you\u2019re looking to design the ultimate Shop, you\u2019ll quickly embrace CSS. Thanks to your inquiries via our blog, forum, and customer service, we\u2019ve been able to summarize frequently asked questions on how to customize your Shop using simple CSS hacks. <a href=\"https:\/\/www.spreadshop.com\/blog\/2018\/04\/24\/css-tips-youve-always-wanted-to-know\/\">Read more<\/a><\/p>\n","protected":false},"author":674,"featured_media":17391,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"publish_to_discourse":"0","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_cloudinary_featured_overwrite":false},"categories":[18625],"tags":[30554],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v19.3 (Yoast SEO v19.7.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Tips You\u2019ve Always Wanted to Know - The Spreadshop Blog<\/title>\n<meta name=\"description\" content=\"We\u2019ve been able to summarize frequently asked questions on how to customize your Shop using simple CSS hacks.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.spreadshop.com\/blog\/2018\/04\/24\/css-tips-youve-always-wanted-to-know\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Tips You\u2019ve Always Wanted to Know\" \/>\n<meta property=\"og:description\" content=\"We\u2019ve been able to summarize frequently asked questions on how to customize your Shop using simple CSS hacks.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.spreadshop.com\/blog\/2018\/04\/24\/css-tips-youve-always-wanted-to-know\/\" \/>\n<meta property=\"og:site_name\" content=\"The Spreadshop Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-04-24T11:08:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-17T02:00:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/images.spreadshop.com\/images\/f_auto,q_auto\/v1524562217\/blog\/MDS-942-BP-CSS-Hacks_gfkmio\/MDS-942-BP-CSS-Hacks_gfkmio.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1400\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Lena\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lena\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.spreadshop.com\/blog\/2018\/04\/24\/css-tips-youve-always-wanted-to-know\/\",\"url\":\"https:\/\/www.spreadshop.com\/blog\/2018\/04\/24\/css-tips-youve-always-wanted-to-know\/\",\"name\":\"CSS Tips You\u2019ve Always Wanted to Know - The Spreadshop Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.spreadshop.com\/blog\/#website\"},\"datePublished\":\"2018-04-24T11:08:20+00:00\",\"dateModified\":\"2025-01-17T02:00:06+00:00\",\"author\":{\"@id\":\"https:\/\/www.spreadshop.com\/blog\/#\/schema\/person\/678cee42723a944607e63a9022f5f176\"},\"description\":\"We\u2019ve been able to summarize frequently asked questions on how to customize your Shop using simple CSS hacks.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.spreadshop.com\/blog\/2018\/04\/24\/css-tips-youve-always-wanted-to-know\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.spreadshop.com\/blog\/2018\/04\/24\/css-tips-youve-always-wanted-to-know\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.spreadshop.com\/blog\/2018\/04\/24\/css-tips-youve-always-wanted-to-know\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.spreadshop.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Tips You\u2019ve Always Wanted to Know\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.spreadshop.com\/blog\/#website\",\"url\":\"https:\/\/www.spreadshop.com\/blog\/\",\"name\":\"The Spreadshop Blog\",\"description\":\"Spreadshop Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.spreadshop.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.spreadshop.com\/blog\/#\/schema\/person\/678cee42723a944607e63a9022f5f176\",\"name\":\"Lena\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.spreadshop.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/71eefd0047a3453eaab1f9820b27a885?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/71eefd0047a3453eaab1f9820b27a885?s=96&d=mm&r=g\",\"caption\":\"Lena\"},\"description\":\"Community Manager\",\"url\":\"https:\/\/www.spreadshop.com\/blog\/author\/Lena Reth\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Tips You\u2019ve Always Wanted to Know - The Spreadshop Blog","description":"We\u2019ve been able to summarize frequently asked questions on how to customize your Shop using simple CSS hacks.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.spreadshop.com\/blog\/2018\/04\/24\/css-tips-youve-always-wanted-to-know\/","og_locale":"en_US","og_type":"article","og_title":"CSS Tips You\u2019ve Always Wanted to Know","og_description":"We\u2019ve been able to summarize frequently asked questions on how to customize your Shop using simple CSS hacks.","og_url":"https:\/\/www.spreadshop.com\/blog\/2018\/04\/24\/css-tips-youve-always-wanted-to-know\/","og_site_name":"The Spreadshop Blog","article_published_time":"2018-04-24T11:08:20+00:00","article_modified_time":"2025-01-17T02:00:06+00:00","og_image":[{"width":1400,"height":800,"url":"https:\/\/images.spreadshop.com\/images\/f_auto,q_auto\/v1524562217\/blog\/MDS-942-BP-CSS-Hacks_gfkmio\/MDS-942-BP-CSS-Hacks_gfkmio.jpg?_i=AA","type":"image\/jpeg"}],"author":"Lena","twitter_misc":{"Written by":"Lena","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.spreadshop.com\/blog\/2018\/04\/24\/css-tips-youve-always-wanted-to-know\/","url":"https:\/\/www.spreadshop.com\/blog\/2018\/04\/24\/css-tips-youve-always-wanted-to-know\/","name":"CSS Tips You\u2019ve Always Wanted to Know - The Spreadshop Blog","isPartOf":{"@id":"https:\/\/www.spreadshop.com\/blog\/#website"},"datePublished":"2018-04-24T11:08:20+00:00","dateModified":"2025-01-17T02:00:06+00:00","author":{"@id":"https:\/\/www.spreadshop.com\/blog\/#\/schema\/person\/678cee42723a944607e63a9022f5f176"},"description":"We\u2019ve been able to summarize frequently asked questions on how to customize your Shop using simple CSS hacks.","breadcrumb":{"@id":"https:\/\/www.spreadshop.com\/blog\/2018\/04\/24\/css-tips-youve-always-wanted-to-know\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.spreadshop.com\/blog\/2018\/04\/24\/css-tips-youve-always-wanted-to-know\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.spreadshop.com\/blog\/2018\/04\/24\/css-tips-youve-always-wanted-to-know\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.spreadshop.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Tips You\u2019ve Always Wanted to Know"}]},{"@type":"WebSite","@id":"https:\/\/www.spreadshop.com\/blog\/#website","url":"https:\/\/www.spreadshop.com\/blog\/","name":"The Spreadshop Blog","description":"Spreadshop Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.spreadshop.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.spreadshop.com\/blog\/#\/schema\/person\/678cee42723a944607e63a9022f5f176","name":"Lena","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.spreadshop.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/71eefd0047a3453eaab1f9820b27a885?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/71eefd0047a3453eaab1f9820b27a885?s=96&d=mm&r=g","caption":"Lena"},"description":"Community Manager","url":"https:\/\/www.spreadshop.com\/blog\/author\/Lena Reth\/"}]}},"_links":{"self":[{"href":"https:\/\/www.spreadshop.com\/blog\/wp-json\/wp\/v2\/posts\/17388"}],"collection":[{"href":"https:\/\/www.spreadshop.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.spreadshop.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.spreadshop.com\/blog\/wp-json\/wp\/v2\/users\/674"}],"replies":[{"embeddable":true,"href":"https:\/\/www.spreadshop.com\/blog\/wp-json\/wp\/v2\/comments?post=17388"}],"version-history":[{"count":7,"href":"https:\/\/www.spreadshop.com\/blog\/wp-json\/wp\/v2\/posts\/17388\/revisions"}],"predecessor-version":[{"id":17408,"href":"https:\/\/www.spreadshop.com\/blog\/wp-json\/wp\/v2\/posts\/17388\/revisions\/17408"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.spreadshop.com\/blog\/wp-json\/wp\/v2\/media\/17391"}],"wp:attachment":[{"href":"https:\/\/www.spreadshop.com\/blog\/wp-json\/wp\/v2\/media?parent=17388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.spreadshop.com\/blog\/wp-json\/wp\/v2\/categories?post=17388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.spreadshop.com\/blog\/wp-json\/wp\/v2\/tags?post=17388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}