Jump to content

Add background to product card

Recommended Posts

  • Replies 17
  • Views 289
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

@Zambo107 Try adding the code under Website > Pages > Website Tools > Custom CSS.

Here's the code to create something similar to your first screenshot:

.products.collection-content-wrapper .grid-item.is-loaded {
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 2rem;
    padding: 10px;
}

Here's the code to create something similar to your second screenshot:

.products.collection-content-wrapper .grid-item.is-loaded {
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 2rem;
    padding: 10px;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
}

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@Zambo107 To fix the issue on mobile view:

@media screen and (max-width: 767px) {

.products.collection-content-wrapper .grid-item .grid-item-image {
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
}
.products.collection-content-wrapper .grid-item.is-loaded {
	padding: 10px 0px !important;
}
.products.collection-content-wrapper .list-grid {
	grid-column-gap: 20px !important;
}
  
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@Zambo107 To disable the hover effect on product images, add this code:

.products.collection-content-wrapper .grid-image-hover {
    opacity: 0 !important;
}
.products.collection-content-wrapper .grid-image-cover {
    opacity: 1 !important;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
Posted (edited)

@Zambo107 To add image card/rounded border on list item images:

.user-items-list-carousel__media-inner {
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 2rem;
  	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
}

 

Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@Zambo107 To add rounded border on collection cards/list items:

.user-items-list-carousel .list-item[data-is-card-enabled="true"] {
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 2rem;
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.