Change the design of my products page

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,

1 Like

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

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);
  }
}

Hello, that didn’t work…

  • 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

1 Like

And change desktop layout to stacked

1 Like
  • Here is the result you will achieve:

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

Hi @PAUL8 ,

You don’t want this?