In this article, we provide you with some custom CSS code to help you customize the layout of some options. All custom CSS code should be added in Theme Settings > Custom CSS, JS option:
1. Homepage
1.1. Change Search icon to text: “Search” on Header – Top right icons for Header Design 3:
@media (min-width: 768px){ .nt_action .icon_search .la-search:before { content: 'SEARCH'; font-size: 14px; } }
1.2. Change Search button to Search icon: on Header – Top right icons for Header Design 8
First, you have to go to Actions > Edit languages > Find the “Search” text of the button > Set it’s blank.
Second, from Kalles theme, you can go to Theme settings > Custom CSS > Add this code below
button.h_search_btn.js_btn_search::before { content: "\e914" !important; font-family: 'iconKalles'; }
1.3. Change Cart icon:
.nt_action .icon_cart > a > i { background-size: cover; background-position: center; } .nt_action .icon_cart > a > i:before { content: url(the link of the Cart icon); } .lazyloaded .nt_action .icon_cart > a > i { background-image: url(the link of the Cart icon); }
1.4. Your product titles are so long and you wanna show them shorter (just show product title on 1 line), you can use the custom CSS below:
.nt_pr h3.product-title a { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inherit; }
1.5. Change the text color and background color of the Warning bar:
p.shopify-info.sp_notice.show_notice { background: green! important; color: #000; }
2. Product Pages
2.1. Change the text of the BUY IT NOW button:
button.shopify-payment-button__button { font-size: 0px !important; } button.shopify-payment-button__button:before { content: 'The text you wanna show'; line-height: 1.42; text-decoration: none; text-align: center; white-space: normal; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em; }
2.2. Change the color of the Page title:
.page-head h1 { color: #000; }
2.3. Change the background color of Variant:
.variations.style__rectangle .swatch:not(.is-color) li { background-color: #e30000; border: 1px solid #e30000; } .style__circle .is-label .swatch_pr_item.is-selected { background-color: #7ac1b1; }
2.4. Change the background color of the Breadcrumb:
.sp-single .bgbl { background-color: #fff; }
2.5. Add an image for the Size Guide button:
.extra-link [data-id="ps_ajax_pp_js"] { padding-left: 33px; background-image: url(https://images.thenorthface.com/is/content/TheNorthFaceBrand/211102-service-space-icons-size-chart?scl=1&qlt=100); background-size: 28px; background-repeat: no-repeat; background-position: left center; } .extra-link [data-id="ask_ajax_pp_js"] { padding-left: 33px; background-image: url(https://images.thenorthface.com/is/content/TheNorthFaceBrand/211102-service-space-icons-size-chart?scl=1&qlt=100); background-size: 28px; background-repeat: no-repeat; background-position: left center; }
3. Shopping Cart Widget
3.1. Change the background color of the Shopping Cart widget:
.nt_mini_cart .mini_cart_header { background-color: #000; color: #fff; }
3.2. Remove the Trash icon from the Shopping Cart widget:
.cart_ac_edit, .cart_ac_remove { display: none; }
4. Generals
4.1. Remove some options of the Sort by filter on the Collection page: (Feel free to change the number from 1 to 8 to disable the option you want).
a.truncate:nth-last-child(3),a.truncate:nth-last-child(4),a.truncate:nth-last-child(7),a.truncate:nth-last-child(8) { display: none; }
4.2. Disable Mobile Menu tab on Header Mobile:
div.mb_cat_true .mb_nav_title { -ms-flex: 0 0 10%; flex: 0 0 100%; max-width: 100%; } .mb_nav_title.pr.mb_nav_ul { display: none; } .mb_cat_true .mb_nav_title::after { width: 0; }
4.3. Add a custom background image for the Password page:
.password-page { background-image: url(the link of your image); background-repeat: no-repeat; background-size: cover; background-attachment: scroll; background-position: center center; }