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;
}