Indigo Template: A clean layout and focus on imagery promote and sell your work in style.

Notes

1. Adding Custom CSS to Home > Design > Custom CSS

2. Adding !important to after, if CSS doesn’t work! for example: font-size: 20px !important;

3. If it still doesn’t work, send me a message via Contact Form  with your site url. I’ll give you exact CSS.

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

 

Featured Image: Squarespace.com