Smaller subimages on product page in Dawn

[Ontarni]

Click to expand...

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

Currently it looks like this:



I would like it to look something like this:

Click to expand...

How to achieve it?

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

[BSSCommerce-HDL · Accepted solution]

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 😍

[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 · Accepted solution]

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 · Accepted solution]

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