Support modifying the layout of my Product Page

Store Design
, , ,
1

Hello,

My name is Inigo, I’m the CEO of Batera Brand, a sustainable clothing brand from Spain. I’m using the SYMMETRY theme in my Shopify website.

This is my current Product Page:
https://www.baterabrand.com/collections/camisetas/products/camiseta-future-generations-azul

And I’d like it to look a little bit more like this:
https://nude-project.com/es/collections/dont-need-money-for-a-car/products/camiseta-blanca-locally-hated

These are the 2 main differences I’d like to “correct”:

  1. on desktop, I’d like to reduce the spacing in between images, so that they look “larger” and fill more of the screen

    Batera Brand - improve product page - dekstop.png
    Batera Brand - improve product page - dekstop.png2368×1338 371 KB

  2. on mobile, I’d like to hide the thumbnails of secondary images underneath the main product page, so that it works as the Nude Project carrousel (and you can see, at first glance, the name and price of the product, which is now hidden in my site because of the thumbnails)

    Batera Brand - improve product page - mobile.png
    Batera Brand - improve product page - mobile.png2366×1342 266 KB

Please, see attached images as reference. After talking to the Clean Canvas support team (the ones who developed Symmetry theme), they told me this requires additional coding. Can you please help me out?

Thanks Inigo

2

Hi @Inigo-Picaza This can be done with custom coding and to provide you the exact code I will need the access of your store. because few things can be done through the URL, but for achieving other things I will need the access so that I can edit the code according to your theme files.

For example for mobile version:

Please add the code in your theme.css/base.css/style.css file which is available in your theme.

.thumbnails.mobile-only.owl-carousel.owl-loaded.owl-drag {
    display: none;
}

If you are not sure where is your theme.css/base.css/index.css/style.css file please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.css/base.css/index.css/style.css in the code in left hand side which ever is available in your theme.
  6. You can add the above code at the bottom of the file.

Result:

sahilsharma9515_0-1714548711569.png
sahilsharma9515_0-1714548711569.png597×511 117 KB

Now customer doesn’t know if there is another image in the product or not, or how many images are there, so for that you need to have the dots, as same as the screenshot you have provided or you need the arrow, so that customer can click on that and move the image, for this to accomplish you need to add the JS code and without looking into code files I will not be able to provide you the exact code.

If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

3

Hello Sahil! thanks so much for your quick reply!! :folded_hands:

I think I know how to add the custom code, but as you mention it makes sense to do it only after including the dots in the carrousel so that consumers know there are secondary images. How can I give you access to the code?

This is my colaboration code: xxxx Does this work for you to request access to my store?

Also, once you enter, can you also “fix” the spacing in between images in desktop layout?

Thanks SO much in advanced,

Inigo

4

Hi @Inigo-Picaza Yes I would love to help you, let’s move this conversation from here to whatsapp or email or shopify private message which ever is suitable for you.

Also it’s not recommended to provide the collaboration code in public forum, because anyone can send you the request which is not recommended.

Best Regards

Sahil

5

oh, thanks so much for that! I just erased the code :sweat_smile:

email sent, thanks Sahil!