Code help! Product grid layout

Store Design
, , , , , ,
1

IMG_9008.jpeg
IMG_9008.jpeg1170×1396 158 KB

IMG_9009.jpeg
IMG_9009.jpeg1170×2244 182 KB

The example I want is the 2nd one it looks much better I want the shadow, price and name to be formatted the same way

Can anyone help me find the code to make them cards style with shadows exactly like this and also a choose options to have a background colour I wouldn’t want to use an app

the website I’m inspiring from is Luckyfours.com

My website is Lexxyy.com

2

Hi @leoking

In base.css file, add this

border-radius: 15px;
box-shadow: 0.2rem 0.6rem 1.5rem 0.1rem rgba(33, 33, 33, 0.1);

find this code block:

@media screen and (min-width: 990px) {
.grid–4-col-desktop .grid__item {

modify to :

@media screen and (min-width: 990px) {
    .grid--4-col-desktop .grid__item {
        width: calc(25% - var(--grid-desktop-horizontal-spacing)* 3 / 4);
        max-width: calc(25% - var(--grid-desktop-horizontal-spacing)* 3 / 4);
        border-radius: 15px;
        box-shadow: 0.2rem 0.6rem 1.5rem 0.1rem rgba(33, 33, 33, 0.1);
    }
}
3

Hi @leoking , thanks for reaching out.

I checked your request and would like to inform you that you can achieve the same card style with shadows by adjusting the image backgrounds directly. I also noticed that the store you want to replicate does not use CSS to set a uniform background color but has images with matching backgrounds.

Please help me take a look at my screenshot for further details: https://prnt.sc/jqmrt3CNqZkG

Liz