West Template: A dynamic website template with scrolling pages and on-hover effects to keep the focus on your products.
In this post
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..
4. How to find Page ID: https://beaverhero.com/squarespace-how-to/
body#collection-56d86c682b8dde72910d59bd is Page ID. Each page will have different ID
Header
Site Title Color
Entire Site
/* Desktop */
.Header-branding {
color: #ff0000 !important;
}
/* Mobile */
a.Mobile-bar-branding {
color: #ff0000 !important;
}
One Page
/* Desktop */
body#collection-58b5ed10bf629a356f09728a .Header-branding {
color: #ff0000 !important;
}
/* Mobile */
body#collection-58b5ed10bf629a356f09728a a.Mobile-bar-branding {
color: #ff0000 !important;
}
Remove Site Title
Entire Site
.Header-branding {
visibility: hidden;
}
a.Mobile-bar-branding {
visibility: hidden;
}
One Page
body#collection-58b5ed10bf629a356f09728a .Header-branding {
visibility: hidden;
}
body#collection-58b5ed10bf629a356f09728a a.Mobile-bar-branding {
visibility: hidden;
}
Navigation Hover Color
.Header-nav-item:hover {
color: #ff0000 !important;
}
Hide Navigation Items
First Item
.Header-nav-item:nth-child(1) {
display: none;
}
Second Item
.Header-nav-item:nth-child(1) {
display: none;
}
Do similar!
Navigation Background Color
Entire Site
.Header-nav {
background: #000;
}
One Page
body#collection-588653ec9de4bb2b73c28e40 .Header-nav {
background: #000;
}
Navigation Drop down Color
.Header-nav-folder {
background: #fff !important;
}
Remove Navigation
Entire Site
.Header-nav {
display: none;
}
One Page
body#collection-58b5ed10bf629a356f09728a .Header-nav {
display: none;
}
Navigation Vertically Stack
Entire Site
.Header-nav-inner {
display: flex;
flex-direction: column;
}
One Page
body#collection-588653ec9de4bb2b73c28e40 .Header-nav-inner {
display: flex;
flex-direction: column;
}
Header Background Color
Entire Site
.Header.Header--bottom {
background: #f1f2f3;
}
.Mobile-bar {
background: #f1f2f3;
}
One Page
body#item-58a214273e00bea4494186a7 .Header.Header--bottom {
background: #f1f2f3;
}
body#item-58a214273e00bea4494186a7 .Mobile-bar {
background: #f1f2f3;
}
Remove Header
Entire Site
.Mobile-bar {
display: none;
}
.Header.Header--bottom {
display: none !important;
}
One Page
body#item-58a214273e00bea4494186a7 .Mobile-bar {
display: none;
}
body#item-58a214273e00bea4494186a7 .Header.Header--bottom {
display: none !important;
}
Change Hamburger Icon Color
button.Mobile-bar-menu svg {
stroke: #ff0000;
}
Replace Hamburger Icon with Custom Icon
button.Mobile-bar-menu {
visibility: hidden;
}
button.Mobile-bar-menu:after {
visibility: visible;
content: "";
background-image: url(https://image.flaticon.com/icons/svg/1279/1279537.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
width: 30px;
height: 30px;
display: block;
}
Replace Hamburger Icon with word “Menu”
button.Mobile-bar-menu {
visibility: hidden;
}
button.Mobile-bar-menu:after {
visibility: visible;
content: "Menu";
font-family: proxima-nova;
color: #000;
font-size: 20px;
}
Mobile Navigation Overlay Color
.Mobile-overlay-menu {
background: #f1f2f3;
}
.Mobile-overlay {
background: #f1f2f3 !important;
}
button.Mobile-overlay-close {
background: #f1f2f3 !important;
}
Mobile Navigation Overlay Width
.Mobile-overlay {
width: 70%;
}
Align Mobile Navigation Overlay Items
.Mobile-overlay-nav-item {
text-align: right;
}
Change “X” close icon color
.Mobile-overlay-close svg {
stroke: #000;
}
Replace Cart Text with Custom Icon
span.Cart-label {
visibility: hidden;
}
span.Cart-label:after {
visibility: visible;
content: "";
background-image: url(https://image.flaticon.com/icons/svg/1279/1279537.svg);
background-size: contain;
background-position: center center;
width: 20px;
height: 20px;
display: inline-block;
}
Footer
Footer Background Color
Entire Site
footer.Footer {
background: #000;
}
One Page
body#collection-58b5ed10bf629a356f09728a footer.Footer {
background: #000;
}
Footer Background Image
Entire Site
footer.Footer {
background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
One Page
body#collection-58b5ed10bf629a356f09728a footer.Footer {
background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
Remove Footer
Entire Site
footer.Footer {
display: none !important;
}
One Page
body#collection-58b5ed10bf629a356f09728a footer.Footer {
display: none !important;
}
Shop
Sticky Shop Filter when Scrolling
.ProductList-filter {
position: -webkit-sticky;
position: sticky;
top: 10px;
}
Product
Remove Product Breadcrumbs
.ProductItem-nav-breadcrumb {
display: none;
}
Remove Product “Next/Previous”
.ProductItem-nav-pagination {
display: none;
}
Increase Product Detail Width
All Products
@media screen and (min-width:641px) {
section.ProductItem-details {
width: 70%;
}
figure.ProductItem-gallery {
width: 30%;
}
}
One Product
@media screen and (min-width:641px) {
body#item-588681c3414fb59b963077a3 section.ProductItem-details {
width: 70%;
}
body#item-588681c3414fb59b963077a3 figure.ProductItem-gallery {
width: 30%;
}
}
Align Left Product Price
.product-price {
text-align: left;
}
Align Left Add to Cart Button
.sqs-add-to-cart-button-wrapper {
text-align: left !important;
margin-left: 0 !important;
}
Align Left Quantity Input
.product-quantity-input {
text-align: left;
}
Align Left Variant Dropdown
.product-variants {
text-align: left;
}
Change Add to Cart Color
.sqs-add-to-cart-button {
background: #000 !important;
border-color: #000 !important;
border-radius: 10px !important;
}
Remove Product Social Share
.ProductItem-details-share {
display: none !important;
}
Insert text below “Add to Cart”
All Products
.sqs-add-to-cart-button-inner:after {
content: "Free Shipping";
display: block;
font-size: 10px !important;
color: #ff0000;
margin-top: 10px;
}
One Product
body#item-588681c3414fb59b963077a3 .sqs-add-to-cart-button-inner:after {
content: "Free Shipping";
display: block;
font-size: 10px !important;
color: #ff0000;
margin-top: 10px;
}
Align Left Product Description
.ProductItem-details-excerpt {
text-align: left;
}
Remove Quantity Input
All Products
.product-quantity-input {
display: none !important;
}
One Product
body#item-588681c3414fb59b963077a3 .product-quantity-input {
display: none !important;
}
Remove Add to Cart
All Products
.sqs-add-to-cart-button-wrapper {
display: none !important;
}
One Product
body#item-588681c3414fb59b963077a3 .sqs-add-to-cart-button-wrapper {
display: none !important;
}
Blog
Align Left Post Date/Title/Excerpt
Blog Listing Page
/* date */
.Blog-meta.BlogList-item-meta {
justify-content: left;
}
/* excerpt */
.BlogList-item-excerpt {
text-align: left !important;
}
/* title */
.BlogList-item-title {
text-align: left !important;
}
All Posts
/* date */
.view-item .Blog-meta.BlogItem-meta {
justify-content: left;
}
/* title */
.view-item h1.BlogItem-title {
text-align: left;
}
One Post
/* date */
body#item-588a65deb8a79bcc6f898815 .Blog-meta.BlogItem-meta {
justify-content: left;
}
/* title */
body#item-588a65deb8a79bcc6f898815 h1.BlogItem-title {
text-align: left;
}
Remove Post Date
Blog Listing Page
.view-list .Blog-meta-item--date {
display: none;
}
All Posts
.view-item .Blog-meta-item--date {
display: none;
}
One Post
body#item-588a65deb8a79bcc6f898815 .Blog-meta-item--date {
display: none;
}
Remove Post Excerpt
.BlogList-item-excerpt {
display: none !important;
}
Remove Post Social Share
.BlogItem-share {
display: none;
}
Remove “Previous/Next”
.BlogItem-pagination-link-content div {
display: none !important;
}
Change “Previous/Next” Color
.BlogItem-pagination-link-content div {
color: #ff0000;
}
Featured Image: Squarespace.com