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,

[BSS-TekLabs · Accepted solution]

- 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 </head> and press 'Save' to save it

  <style>
@media only screen and (min-width: 600px) {
    .product--stacked .product__media-item {
        max-width: 100% !important;
        width: 100% !important;
    }
}
    </style>

[BSS-TekLabs · Accepted solution]

And change desktop layout to stacked

[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...

[namphan]

Hi @PAUL8,

You don't want this?

[BSS-TekLabs · Accepted solution]

- 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 </head> and press 'Save' to save it

  <style>
@media only screen and (min-width: 600px) {
    .product--stacked .product__media-item {
        max-width: 100% !important;
        width: 100% !important;
    }
}
    </style>

[BSS-TekLabs · Accepted solution]

And change desktop layout to stacked

[BSS-TekLabs · Accepted solution]

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.