Change the design of my products page

[PAUL8]

Hello,

I want my product visual to look like this or this type of stuff

Can you help me?

I use theme dawn: my website is womber.fr and the password is PROPAGANDAAA

Thanks!

Cordially,

[PAUL8]

If you also add the features of the second image (possibility to pass images, view the available sizes), it will be perfect!!

[namphan]

Hi @PAUL8 ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.product-card-wrapper .card .card__inner .card__media {
  border-radius: 0 !important;
}
.product-card-wrapper .card--standard>.card__content .card__information {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  padding: 1.7rem;
  column-gap: 1.7rem;
}
.product-card-wrapper .card-information>.price {
  margin-top: 0;
  font-size: calc(var(--font-heading-scale)* 1.2rem);
  text-align: right;
}
@media only screen and (min-width: 750px) {
  .product-card-wrapper .card--standard>.card__content .card__information {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-card-wrapper .card-information>.price {
      font-size: calc(var(--font-heading-scale)* 1.3rem);
  }
}

[PAUL8]

Hello, that didn’t work…

[BSS-TekLabs]

• Here is the solution for you @PAUL8
• Please follow these steps:

1. Go to Online Store → Theme → Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before and press ‘Save’ to save it

[BSS-TekLabs]

And change desktop layout to stacked

[BSS-TekLabs]

• Here is the result you will achieve:

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[namphan]

Hi @PAUL8 ,

You don’t want this?