Product Images Carousel - Need a few edits

Ryanp
Explorer
71 3 25

I would like to do several things to my product page product carousel images to give them a more UI/ux feel and modern..

1. Space Images a little

2. Add light border

3. Add shadow

4. Round corners by 5px

5. Make aspect ratio portrait style or landscape

 

If anybody can help me out that would be awesome!  Here's the link to one of my products - https://devildaves.com/products/blaster-liquid-bloody-mary-seasoning

 

1000021742.jpg

1000021743.png

1000021744.jpg

 

 

Replies 2 (2)

PageFly-Noah
Astronaut
1119 201 220

This is Noah from PageFly - Shopify Page Builder App

 

If you want remove breadcrumb you can try code:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

 

<style>
@media only screen and (max-width: 767px) {
    // space image and title apply for mobile
   .product .thumbnail-slider{
      margin-bottom: 16px !important;
   }
}

// code create space for shadow
.product .thumbnail-list{
   padding: 20px !important;
   
}
// code create border-radius and shadow
.product .thumbnail{
  border-radius: 5px !important; 
  box-shadow: -1px 7px 29px 2px rgba(0,0,0,0.04) !important;
  -webkit-box-shadow: -1px 7px 29px 2px rgba(0,0,0,0.04) !important;
  -moz-box-shadow: -1px 7px 29px 2px rgba(0,0,0,0.04) !important;
}

//code handle button active you can change color border
.product .thumbnail[aria-current]:focus, .thumbnail.focused {
    outline: 0 !important;
    box-shadow: none !important;
    border: 1px solid #333333 !important;
}

</style>

 

And "Make aspect ratio portrait style or landscape" I dont understand it, you can explain more , I will suport you.
Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Ryanp
Explorer
71 3 25

Thank you - it worked good..  Can you also help me with these two things as well. 

 

1. Change aspect ratio of thumbnails to Portrait (3:4) from square shape. 

2. Increase size of the thumbnails both mobile and desktop. they are too small. 

 

Here is the code you gave me and I made some tweaks. 

 

[[  <style>
@media only screen and (max-width: 767px) {
    /*space image and title apply for mobile*/
   .product .thumbnail-slider{
      margin-bottom: 16px !important;
   }
}

/*code create space for shadow*/
.product .thumbnail-list{
   padding: 20px !important;
   
}
/*code create border-radius and shadow*/
.product .thumbnail{
  border-radius: 5px !important;
  box-shadow: 3px 3px 2px 1px rgba(178, 178, 178, .8) !important;
  -webkit-box-shadow: 3px 3px 2px 1px rgba(178, 178, 178, .8) !important;
  -moz-box-shadow: 3px 3px 2px 1px rgba(178, 178, 178, .8) !important;
}

/*code handle button active you can change color border*/
.product .thumbnail[aria-current]:focus, .thumbnail.focused {
    outline: 0 !important;
    box-shadow: none !important;
    border: 2px solid #9f9f9f !important;
}

</style> ]]