We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Re: How to align product images and titles.

Solved

How can I align product images and titles using the debut theme?

SmittysFlyBox
Shopify Partner
9 0 2

I am using the debut theme. I want my product images and titles to all align. Each picture may be a different size so this may not be possible. Maybe there is a way to make all product images a default size in the coding to make them all align the same?

 

Here is the link to my store to see what the issue is.

https://smittyflybox.myshopify.com/

 

Accepted Solution (1)

NadiaAnthony
Shopify Partner
76 11 18

This is an accepted solution.

The images should, ideally, all be the same height when you load them up in the backend. For a quick solution, navigate to Online Store > Themes > "..." > Edit Code. Look for the theme.scss file and click it to open. Scroll all the way to the bottom, add a few lines of spacing and then and add the following below. Hit save and refresh the page: 

 

.grid-view-item__image-wrapper { 
   min-height: 230px !important;
}

 

 
I help brands bridge the gap between complicated code and clear communication.

View solution in original post

Replies 5 (5)

NadiaAnthony
Shopify Partner
76 11 18

This is an accepted solution.

The images should, ideally, all be the same height when you load them up in the backend. For a quick solution, navigate to Online Store > Themes > "..." > Edit Code. Look for the theme.scss file and click it to open. Scroll all the way to the bottom, add a few lines of spacing and then and add the following below. Hit save and refresh the page: 

 

.grid-view-item__image-wrapper { 
   min-height: 230px !important;
}

 

 
I help brands bridge the gap between complicated code and clear communication.
jabastockmedia
Visitor
2 0 0

Hi, I cannot seem to find the theme.scss file when I try to edit code under Themes. Is there another file name I could look for?

NadiaAnthony
Shopify Partner
76 11 18

Once you've logged in, go to Sales Channel > Online Store > Themes. Please click the "..." button (next to the Customize button), then hit "Edit Code". From there, you can search for the theme.scss file in the lefthand sidebar OR you can manually look for theme.scss in the "Assets" folder (scroll down in the lefthand sidebar if you don't see the Assets folder). Open the theme.scss file and then scroll ALL the way to the bottom where there is no more code. Add a few lines of space and then paste the follow code:

 

.grid-view-item__image-wrapper { 
   min-height: 230px !important;
}

 

Hit save and refresh your webpage in a new browser tab to view changes.

I help brands bridge the gap between complicated code and clear communication.
jabastockmedia
Visitor
2 0 0

My Assets folder is empty. However, If I go to my shop (not open yet, because I'm still adding to it, I have several items under my catalog)
Have I done something wrong?

 

NadiaAnthony
Shopify Partner
76 11 18

I'm not sure what you mean.  

I help brands bridge the gap between complicated code and clear communication.