How to show product info on a hover in Squarespace

Jun 22

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

In this tutorial, we’ll use custom CSS to display the product details on a hover in your Squarespace 7.1 store.

The codes from the tutorial are below, and they are SUPER customizable so be sure to watch the tutorial video so you know exactly what you’ll want to change to make it look amazing in your own site!

Here are the steps to adding the custom code to Squarespace:

Navigate to your Design Menu
Select Custom CSS
Paste the code listed below into the Custom CSS window
Select save and refresh your page!

Download Transcript

Here are the codes from this tutorial.

Don’t forget to adjust any number values in bold below to suit your own site style!

@media only screen and (min-width: 640px){
.products.collection-content-wrapper .grid-item img{z-index: 0!important}
.products.collection-content-wrapper .grid-main-meta {z-index: 99!important; margin-top: -5rem; text-align:center; background: #333; visibility:hidden; }
.grid-main-meta *{color: #333!important;}
.products.collection-content-wrapper .grid-item:hover .grid-main-meta {visibility:visible}
}