Marta Template: Make your products stand out with intriguing gallery layouts and stunning scrolling effects.

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 Site Title (One Page & Entire Site)

First, you need to find Page ID.

Then, use

/* Hide Site Title Entire Site */
.Header-branding {
    display: none;
}
/* Hide Site Title One Page */
body#collection-56323773e4b0b01121853d2f .Header-branding {
    display: none;
}

Hide Header

First, you need to find Page ID.

Then, use

/* Hide Header Entire Site */
.Header {
    display: none !important;
}
/* Hide Header One Page */
body#collection-56323773e4b0b01121853d2f .Header {
    display: none !important;
}
/* Hide Header Mobile */
.Mobile.loaded {
    display: none;
}

Sticky Header & Navigation

/* Desktop */
.Header {
    position: fixed !important;
}
/* Mobile */
.Mobile.loaded {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
}

Remove Cart on Navigation

.Header .Cart {
    display: none;
}

Show Cart on Only Shop Page

.Header .Cart {
    display: none;
}
.collection-type-products .Header .Cart {
    display: initial;
}

Hide Search Icon & Cart (Mobile)

/* Hide Cart */
.Mobile.loaded .Cart {
    display: none;
}
/* Hide Search Icon */
.Mobile.loaded .Mobile-bar-search {
    display: none;
}

Change Hamburger Icon to word “Menu”

button.Mobile-bar-menu {
    visibility: hidden;
}
button.Mobile-bar-menu:after {
    content: "Menu";
    visibility: visible;
    position: absolute;
    right: 10px;
    top: 20px;
    font-size: 20px;
    color: #ff0000;
}

Header Background Color

First, you need to find Page ID.

Then, use

/* Header Background - Entire Site - Desktop */
.Header {
    background: #ff0000 !important;
}
/* Header Background - One Page - Desktop */
body#collection-56323773e4b0b01121853d2f .Header {
    background: #ff0000 !important;
}
/* Header Background - Mobile */
.Mobile.loaded .Mobile-bar {
    background: #ff0000 !important;
}

Navigation Overlay Color (Mobile)

.is-mobile-overlay-active .Mobile-overlay {
    background: #ff0000;
}

Footer

Remove Footer (One Page – Entire Site)

First, you need to find Page ID.

Then, use

/* Entire Site */
.Footer {
    display: none !important;
}
/* One Page */
body#collection-56323773e4b0b01121853d2f .Footer {
    display: none !important;
}

Footer Background Color

.Footer {
    background: #ff0000;
}

Shop Page

Product Filter Color

.ProductList-filter-list-item a {
    color: #ff0000;
}

Sticky Product Filter when scrolling

nav.ProductList-filter {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

Quick View Color

span.sqs-product-quick-view-button {
    background: #000 !important;
    color: #fff !important;
    padding: 10px 20px !important;
    font-size: 15px;
    text-transform: lowercase;
}

Change “Quick View” text

span.sqs-product-quick-view-button {
    visibility: hidden;
}
span.sqs-product-quick-view-button:after {
    visibility: visible;
    content: "Zoom Product";
    background: #000;
    color: #fff;
    padding: 10px 20px;
    border-radius: 20px;
}

Product Page

Remove Add to Cart, Quantity Box, Social Share Icons

/* Remove quantity box */
.product-quantity-input {
    display: none !important;
}
/* Remove add to cart button */
.sqs-add-to-cart-button-wrapper {
    display: none !important;
}
/* Remove Social Share Icons */
.ProductItem-details-share {
    display: none !important;
}

Increase Product Detail Width

@media screen and (min-width:641px) {
.ProductItem-details {
    min-width: 50%;
}
.ProductItem-gallery {
    width: 50%;
}
}

Change “Add to Cart” Button Color

.sqs-add-to-cart-button {
    background: #ff0000 !important;
    border-color: #ff0000 !important;
    border-radius: 50px;
    color: #000 !important;
    font-size: 20px !important;
}

Remove Add To Cart button and product quantity field for a product category

Replace outerwear with your category name

/* Remove Quantity */
.Main-content .category-outerwear .product-quantity-input {
    display: none;
}
/* Remove Add to Cart */
.Main-content .category-outerwear .sqs-add-to-cart-button-wrapper {
    display: none;
}

Featured Image: Squarespace.com