Header
Hide Logo (One Page)
First, you need to find Page ID.
Then, use
body#collection-58138763d482e97e5eb2fe1f .logo-image {
display: none;
}
Hide Logo (Entire Site)
.logo-image {
display: none;
}
Hide Social Icons
.header-special-social {
display: none !important;
}
Hide Email Icon (Header)
.sqs-svg-icon--wrapper.email {
display: none;
}
Hide Facebook Icon (Header)
.sqs-svg-icon--wrapper.facebook {
display: none;
}
Hide Twitter icon (Header)
.sqs-svg-icon--wrapper.twitter {
display: none;
}
Hide Instagram Icon
.sqs-svg-icon--wrapper.instagram {
display: none;
}
Hide Cart Icon
.header-special .sqs-custom-cart {
display: none;
}
Hide Hamburger menu
svg.Icon.Icon--hamburger.nav-toggle-label-icon {
display: none;
}
Header Background Color
div#headerAnnouncementWrapper {
background: #ff0000;
}
Remove Sticky Header when Scrolling
.header-announcement-wrapper {
position: initial;
}
main#page {
margin-top: 0 !important;
}
Hide Header (Entire Site)
div#headerAnnouncementWrapper {
display: none;
}
Hide Header (One Page)
First, you need to find Page ID.
Then, use
body#collection-58138763d482e97e5eb2fe1f div#headerAnnouncementWrapper {
display: none;
}
Underline Navigation Active Links
.nav-link--active {
text-decoration: underline;
}
Footer
Hide Footer (Entire Site)
footer#footer {
display: none;
}
Hide Footer (One Page)
First, you need to find Page ID.
Then, use
body#collection-5818dbe5893fc0c77e2892d6 footer#footer {
display: none;
}
Footer Background Color
footer#footer {
background: #ff0000;
}
Homepage
Change Image Hover Color
.tweak-product-list-mobile-meta-position-overlay.tweak-product-list-meta-position-overlay .ProductList-item:hover .ProductList-overlay {
background: #ff0000;
}
Change “Sold out” Color
.collection-type-products .product-mark.sold-out {
background: #ff0000 !important;
color: #ffffff !important;
font-size: 17px;
}
Change “Sale” Color
.collection-type-products .product-mark.sale {
background: #000;
color: #ff0000;
font-size: 20px;
}
Product Page
Hide Add to Cart (All Products)
.sqs-add-to-cart-button-wrapper {
display: none !important;
}
Hide Add to Cart (One Product)
First, you need to find Page ID.
Then, use
body#item-588f963f9f7456e20cafaa26 .sqs-add-to-cart-button-wrapper {
display: none !important;
}
Hide Social Icons (Under add to cart)
.ProductItem-details-share {
display: none !important;
}
Change Add to Cart Color
.sqs-add-to-cart-button {
background: #ff0000 !important;
border-color: #000 !important;
color: #000 !important;
font-size: 20px !important;
border-radius: 5px;
}
Change Add to Cart Text
.sqs-add-to-cart-button-inner {
visibility: hidden;
}
.sqs-add-to-cart-button-inner:after {
visibility: visible;
content: "Add to basket";
display: block;
margin-top: -10px;
font-size: 20px;
color: #ff0000;
}
Hide Quantity Box
.product-quantity-input {
display: none !important;
}
Hide Breadcrumb
.ProductItem-nav-breadcrumb {
display: none;
}
Increase Product Description Width
@media screen and (min-width:641px) {
.ProductItem-details {
width: 60%;
}
.ProductItem-gallery {
width: 40%;
}
}
Other
Change “Submit” Button Color (Contact Page)
.form-button-wrapper input[type="submit"] {
background: #ff0000 !important;
border-color: #ff0000;
color: #000 !important;
border-radius: 10px !important;
}
Translate “Check Out”
.checkout-button span {
visibility: hidden;
}
.checkout-button span:after {
visibility: visible;
content: "New Checkout Text";
margin-left: -80px;
}
Translate: you have nothing in your shopping cart. Continue shopping
.empty-message {
visibility: hidden;
}
.empty-message:before {
content: "New Shop text";
visibility: visible;
color: #333;
font-size: 18px;
font-family: futura-pt;
}
Translate “First Name” & “Last Name”
.form-wrapper .field-list .field .caption .field-element {
visibility: visible;
}
.form-wrapper .field-list .field .caption {
visibility: hidden;
}
.field.first-name .caption:after {
visibility: visible;
content: "abc";
display: table;
}
.field.last-name .caption:after {
visibility: visible;
content: "tuan";
display: table;
}
Translate “quantity” on Product page
.quantity-label {
visibility: hidden;
}
.quantity-label:before {
visibility: visible;
content: "New Quantity";
font-size: 18px;
color: #333;
margin-bottom: 10px;
display: block;
font-family: futura-pt;
}