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

[ben_yamada]

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

↓↓↓↓

deicy.jp

password 5206

thank you!

[exertweb · Accepted solution]

@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 </body> tag

<style>

.product-card .product-card__info  > fieldset {
    order: -1;
}

.product-card__figure badge-list.badge-list {
    position: relative;
    order: 1;
    flex-direction: row;
    flex-wrap: wrap;
    left: 0;
}

.product-card__figure {
    display: flex;
    flex-direction: column;
}
.product-card__info {
  justify-items: flex-start;
}
.product-card__info .justify-items-center {
    justify-content: flex-start !important;
    text-align: left;
    align-items: flex-start;
    justify-items: flex-start;
}
</style>

[exertweb · Accepted solution]

@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 </body> tag

<style>

.product-card .product-card__info  > fieldset {
    order: -1;
}

.product-card__figure badge-list.badge-list {
    position: relative;
    order: 1;
    flex-direction: row;
    flex-wrap: wrap;
    left: 0;
}

.product-card__figure {
    display: flex;
    flex-direction: column;
}
.product-card__info {
  justify-items: flex-start;
}
.product-card__info .justify-items-center {
    justify-content: flex-start !important;
    text-align: left;
    align-items: flex-start;
    justify-items: flex-start;
}
</style>

[ben_yamada]

It was very helpful！！thank you!!!

[ben_yamada]

can you tell me how to change the badge style？

↓

[exertweb · Accepted solution]

@ben_yamada please add below code in css file.

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

[ben_yamada]

thankyou!

[exertweb]

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

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

[devcoders]

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?