Move images under product page

You can add this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('div#block-5f21465b141b11697cc4').insertAfter('.ProductItem-gallery-slides');
})
</script>

Thanks so much for your response.

Although it has moved the icons next to the image and shrunk my product image?

And on mobile its completely replaced the product image. (see image)

Is there any way to move these directly below?

#1. Add this code under

<style>
  section.ProductItem-gallery {
    flex-direction: column !important;
}
</style>

#2. You can remove the code, I will check it again

Yeah with the added code it has replaced the product image.

https://round-rhubarb-hrce.squarespace.com/shop/p/original/p/ns-szanp

Use this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('div#block-5f21465b141b11697cc4').insertAfter('.ProductItem-gallery-slides');
})
</script>
<style>
  .ProductItem-gallery-slides {
    width: 100% !important;
}
section.ProductItem-gallery {
    flex-direction: column;
}
</style>

This is perfect and exactly what I'm looking for! Thanks so much, absolute life saver!

Final ask promise, is there a way to make them smaller?

On 11/29/2023 at 6:34 AM, oliverlittlewood said:

This is perfect and exactly what I'm looking for! Thanks so much, absolute life saver!

Final ask promise, is there a way to make them smaller?

Add this under

<style>
  section.ProductItem-gallery .gallery-block img {
    max-width: 150px;
    height: auto !important;
}
</style>

It's not showing correctly on mobile? How can we get this displaying as it does for desktop?

On 12/1/2023 at 6:05 PM, oliverlittlewood said:

It's not showing correctly on mobile? How can we get this displaying as it does for desktop?

You mean make 2 images side by side?

6 hours ago, tuanphan said:

You mean make 2 images side by side?

Exactly yep 🙂

21 hours ago, oliverlittlewood said:

Exactly yep 🙂

The site is expired. You can access this link to extend it for free

then let me know, I will check again

Extended, thanks so much!

You have this code in CSS box, it caused problem

add this to Code Injection > Footer to override it

<style>
  @media screen and (max-width:767px) {
  [class*="type-products"] .gallery-block .slide {
    height: auto !important;
    margin: initial !important;
    width: 45% !important;
}

[class*="type-products"] .gallery-block .sqs-gallery {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

section.ProductItem-gallery .gallery-block img {
    max-width: unset !important;
    margin: initial !important;
    width: 100% !important;
    height: auto !important;
}
  }
</style>

Great thankyou! Is there a way to fix the icons below on mobile on the product page. These were aligned vertically and bigger before.

This issue is just on mobile.

I think the code you referenced above in my CS was for this gallery

On 12/6/2023 at 7:52 PM, tuanphan said:

You have this code in CSS box, it caused problem

add this to Code Injection > Footer to override it

<style>
  @media screen and (max-width:767px) {
  [class*="type-products"] .gallery-block .slide {
    height: auto !important;
    margin: initial !important;
    width: 45% !important;
}

[class*="type-products"] .gallery-block .sqs-gallery {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

section.ProductItem-gallery .gallery-block img {
    max-width: unset !important;
    margin: initial !important;
    width: 100% !important;
    height: auto !important;
}
  }
</style>

Change to this new code

<style>
  @media screen and (max-width:767px) {
  [class*="type-products"] section.ProductItem-gallery .gallery-block .slide {
    height: auto !important;
    margin: initial !important;
    width: 45% !important;
}

[class*="type-products"] section.ProductItem-gallery .gallery-block .sqs-gallery {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

section.ProductItem-gallery .gallery-block img {
    max-width: unset !important;
    margin: initial !important;
    width: 100% !important;
    height: auto !important;
}
  }
</style>

Amazing thank you. I decreased the width to 60% to make the icons a bit smaller but doing this moves them from the centre. How can I get these back centred? 

Also is there a way to reduce the gap between the product name and icons?

https://round-rhubarb-hrce.squarespace.com/shop/p/original/p/ns-szanp

Add this code under

<style>
  @media screen and (max-width:767px) {
  section.ProductItem-gallery .gallery-block img {
    left: 50% !important;
    transform: translateX(-50%) !important;
}
    section.ProductItem-gallery .gallery-block .margin-wrapper {
    margin: 0 !important;
}
section.ProductItem-gallery .gallery-block .content-fill {
    padding: unset !important;
    height: auto !important;
}
section.ProductItem-gallery .gallery-block {
    padding-bottom: 0px !important;
}

  }
</style>

Hmm it doesn't loom like the gap between the product name and icons has decreased.

I think the website may expire but native smoothie.co.uk is up and has all the updated code in.

.

I tested & it still works from my browser. Can you add & keep that code in Code Injection? I can check easier