Prestigeーhow to place the badge under the product image?

Store Design
1

I would like to place the badge under the product image. Can you tell me how to do this?

efa80228c489015721001db8f566505.png
efa80228c489015721001db8f566505.png1846×682 220 KB

↓↓↓↓

597ee9b74f62e1585c1c6a574a5664f.png
597ee9b74f62e1585c1c6a574a5664f.png1675×865 210 KB

deicy.jp

password 5206

thank you!

1 Like
2

@ben_yamada

Please added below css.

I’ve checked your product grid structure and have a simple solution for changing the color placement. Please try the code below to fix it.

Step 1: Go to Admin → Online store → Theme > Edit code

Step 2: Search for the file theme.liquid

Step 3: Add this code before tag
1 Like
3

Hello @ben_yamada

For this, structural changes will need to be made in the file. Could you please share your store access so I can check and update you?

1 Like
4

It was very helpful！！thank you!!!

5

can you tell me how to change the badge style？

ben_yamada_0-1729343162643.png

↓

ben_yamada_1-1729343180419.png

6

@ben_yamada please add below code in css file.

badge-list .badge:not(.badge--sold-out) {
    background: transparent;
    color: #000;
    border: 1px solid #000;
}
1 Like
7

thankyou!

8

@ben_yamada Please also below css to resolved your product card image overlay issue.

.product-card .product-card__media {
    position: relative;
    overflow: hidden;
}
1 Like