How to change CSS of “Thumbnails position” of product page

[Jonatas]

Hello,
In the configuration of “Thumbnails position” there is not an option that is being widely used in several successful ecommerce, here is attached a print of the example that I tried to apply with CSS, but it does not work correctly, because I need to update the page 2x to present the CSS change I applied.

This is what I tried to use:

:is(.thumbs-position-bottom_column,.thumbs-position-bottom_grid,.thumbs-position-bottom_combined) .product-image-wrap:first-child {
    max-width: 50%
}

How can I change the CSS of “Thumbnail Position” correctly without having a problem?

• This topic was modified 1 year, 12 months ago by Jonatas.

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to say but right now there is no option in Theme Settings available for that. It requires Customization and this is beyond our limitations and support policy scope. Hope you can understand our limitations.

Don’t hesitate to get in touch with us if you need further clarification on anything.

Kind Regards

Lucas, do you do this customization, I paying you to do this customization and what would be the cost?

Hello,

Could you please send me access to the admin dashboard so I investigate what we can do best in this situation?

I await your response.

Kind Regards

/* Put “Bottom (2 columns)” to show 2 photos, one next to the other, in the first photo too */
login em “Extra information”

Hello,

Firstly, remove your own custom code, then please add the below code into the “Global Custom CSS” area in Theme Settings -> Custom CSS.

.website-wrapper :is(.thumbs-position-bottom_column,.thumbs-position-bottom_grid,.thumbs-position-bottom_combined) .product-image-wrap:first-child {
    max-width: 50%;
	  flex: 1 1 50%;
}

Clear the cache and recheck the issue.

Kind Regards

Good evening Luke,
It worked for pc, could you tell me how to get the same result from pc on mobile?

another doubt, these custom CSS can be placed inside the (“layouts” -> single product), inside the custom product page I’m creating, or does it need to be inside “Global Custom CSS” in Theme Settings -> Custom CSS, if I keep it inside layouts, does it affect performance or something else?

Hello,

I apologize for my mistake. The above should be added to the “Custom CSS for desktop” area in Theme Settings -> Custom CSS. Then please remove it from the “Global Custom CSS” area and recheck the issue on mobile. For now, unfortunately, there is no right way to do the same for mobile.

In general, better to add the custom CSS to Theme Settings -> Custom CSS, because when something broke due to the custom CSS, you can easier find the code in Theme Setting rather than searching for it throughout the theme.

We appreciate your patience, understanding & cooperation in this regard.

Kind Regards

Hi Lucas,
ok, thanks for guiding me on this, it worked!

You are welcome!

Always remember that you can reach out to us with any questions you may have.

We wish you a splendid day!

Kind Regards

[Author]

Posts