Square Product Images Debut

New Member
3 0 0



I am using the debut theme, and I am struggling with changing the image gallery for each product.

I want to do a few things,


I want to square the thumbnail, put a border around them and fix the size.


Is this possible?


I can roughly do what I want using shogun, but I dont to created a new page for each product, I would prefer to update the template.



Hello newb5858,


You can use the following css to add the border and adjust its height width

.thumbnails-wrapper .product-single__thumbnails-item img {
    width: 150px;
    height: 150px;
    border: 1px solid red;
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
New Member
2 0 0

Won't that warp the images if they're not of a 1:1 ratio?


Dear @newb5858 

Hope the following suggestions will help you

  • From your Shopify admin, go to Online Store > themes
  • Locate your current theme and then click Actions > Edit code
  • After that in the Assets folder, click to open your theme.scss.liquid file
  • Go to the very bottom of this file and paste the following code:


/* Start */
.template-product .thumbnails-wrapper .product-single__thumbnails-item ..product-single__thumbnail {border-color: #3a3a3a !important;min-height: 150px;min-width: 150px;}

/* End*/


  • Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
  • Save and check your theme by refreshing it.

If you still need help you can contact us by using the link or email given at signature.

Best Regards
MS Web Designer| MS Web International | Task4Store
Contact Us: https://www.task4store.com/pages/contact-us OR task4store@mswebdesigner.com
Was our reply helpful? Please Like or Accept solution