How to show product info on a hover in Squarespace

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:

1. Navigate to your Design Menu

2. Select Custom CSS

3. Paste the code listed below into the Custom CSS window

4. Select save and refresh your page!

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