Smaller subimages on product page in Dawn

[Ontarni]

Show More

In DAWN on the product page I would like to have subimages smaller and 4 in the horizontal row.

Show More

Currently it looks like this:

Show More

Show More

I would like it to look something like this:

Show More

Show More

How to achieve it?

https://fbbf11-37.myshopify.com/

[Darshanp712]

Hello @Ontarni , There is a setting on the product page with which you can achieve it. please follow the steps below.

1. Go to the Online store.

2. Open customize theme.

3. Open the product page settings and see the screenshot below.

Feel free to reach out if you have any questions or need assistance.

Best regards,

Darshan.

[BSSCommerce-HDL]

Hi @Ontarni ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Inside head tags. You need create style tags. After insert my code inside style tag

@media only screen and (min-width: 990px) {
    .product--stacked .product__media-item {
        max-width: calc(24% - var(--grid-desktop-horizontal-spacing) / 2) !important;
    }
}

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[Raj-webdesigner]

Add this css in your edit code > base.css file

.product--stacked .product__media-item:first-child {
    max-width: 100% !important;
}
@media screen and (min-width:1024px){
  .product--stacked .product__media-item {
      max-width: calc(20% - var(--grid-desktop-horizontal-spacing) / 2) !important;
  }
}
@media screen and (max-width:1024px) and (min-width:750px){
  .product--stacked .product__media-item {
      max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2) !important;
  }
}