Re: Project page image size and placement

Solved

Project page image size and placement

AnneP96
Excursionist
29 0 3

Hey people,

 

I need some help with the following. I want my product page to be like this online shop (https://www.brookecallahan.com/shop/p/guest-top-red

- So the size of the images (9:16) and the width and placement of both the image galery and the info pannel.

 

Scherm­afbeelding 2024-05-06 om 12.20.40.png

 

My own website:

the-lena.studio

pw: SHOPIFYSTORELENA96

 

Thank you!!

 

Accepted Solution (1)

PageFly-Noah
Shopify Partner
1317 233 280

This is an accepted solution.

This is Noah from PageFly - Shopify Page Builder App

 

Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

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

 

<style>
   @media screen and (min-width: 768px){
    .product__media-list{
      max-width: 50% !important;
      margin: auto !important;
     }
  } 
</style>

 

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.

View solution in original post

Replies 11 (11)

Anshul_arora
Navigator
453 129 104

Hello @AnneP96 ,

I understand you are looking to change the layout of the product page similar to your shared reference product page https://www.brookecallahan.com/shop/p/guest-top-red 

Please add the below-mentioned code at the bottom of the theme.liquid file before </body> tag and save.

<style>

@media screen and (min-width: 765px) {

.grid__item.product__media-wrapper {
max-width: 50% !important;
}

.product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
max-width: 50% !important;
}
}

</style>


Output -: https://prnt.sc/afsZ77RD1p8P

Anshul_arora_0-1714993608451.png


I hope the code helps you.

Please share if you have any queries.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
AnneP96
Excursionist
29 0 3

Thank you so much!!

Everyting's perfect, except for the container width. The grey lines are still showing..

Any code for this? 🙂

AnneP96
Excursionist
29 0 3

Anyone any ideas how to make the container wrap the content?

 

Scherm­afbeelding 2024-05-06 om 17.40.10.png

Anshul_arora
Navigator
453 129 104

Hello @AnneP96 ,

I am glad that my previous code helps you.

Please share your store new password, so I can take a look at store again and can provide you an appropriate solution for your requirement.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

PageFly-Noah
Shopify Partner
1317 233 280

This is an accepted solution.

This is Noah from PageFly - Shopify Page Builder App

 

Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

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

 

<style>
   @media screen and (min-width: 768px){
    .product__media-list{
      max-width: 50% !important;
      margin: auto !important;
     }
  } 
</style>

 

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.

AnneP96
Excursionist
29 0 3

Thank you, but unfortunately still the same issue with the media container width. There is a box around my images. Any ideas how to solve this?

 

Scherm­afbeelding 2024-05-06 om 17.40.10.png

PageFly-Noah
Shopify Partner
1317 233 280

Hi @AnneP96  Can you help me provide again password, current password  is not correct. Thank you.

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.

AnneP96
Excursionist
29 0 3

I managed to make it work, thanks!

PageFly-Noah
Shopify Partner
1317 233 280

Thank you , Have a nice day !

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.

MorganBerger
Visitor
2 0 0

Thank you 

MorganBerger
Visitor
2 0 0

To enhance your Shopify project page and better manage resources, you might want to explore some effective resource management tools . These can streamline your workflow and help you focus on optimizing page design while keeping everything organized efficiently.