If you find that the products on your collection page look staggered because they are different sizes (similar to the screenshot below), you can follow these steps to fix it. This affects ShowTime versions 3.5 and below only. This update has already been applied to ShowTime 4.0 and later.

1. Click Online Store > Themes on the left side of your Shopify dashboard and look for the ShowTime theme.

2. Click the the ... button and choose Edit HTML/CSS from the drop-down menu as shown below.

3. Scroll down and locate the Assets folder. Look for the file called style.css.liquid and click it to open it in the editor.

4. Hit Control + F (CMD + F on a Mac) and paste the code below in the search box to locate it.

#content .main_box .box_1 .product-image {

The full reference looks like this:

#content .main_box .box_1 .product-image {
position:relative;
}

5. Replace that full block of code with this code:

#content .main_box .box_1 .product-image {
  height: 200px;
}
#content .main_box .box_1 .product-image img {
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
  position:relative;
  top:50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
#content .main_box:hover .box_1 .product-image img {
  -moz-transform: translateY(-50%) scale(1.2);
  -webkit-transform: translateY(-50%) scale(1.2);
  transform: translateY(-50%) scale(1.2);
}

@media (max-width: 400px) {
  #content .main_box .box_1 .product-image {
    height: 150px;
  }
}
.template-list-collections .box_1 {
  height: 250px;
}
.template-list-collections .box_1 img {
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
  position:relative;
  top:50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.template-list-collections .main_box:hover  .box_1 img {
  -moz-transform: translateY(-50%) scale(1.2) !important;
  -webkit-transform: translateY(-50%) scale(1.2)!important;
transform: translateY(-50%) scale(1.2) !important; }

#content .main_box .desc { /* Check for more of these */ padding:22px 20px 30px; }

6. Save the file.

7. Next, open up scripts.js.liquid (also in the Assets folder). Scroll down to around line 27 and you should see:

 

8. Replace all of the code with the red box around it with the code from this gist file.

9. Finally, still in scripts.js.liquid, scroll down to around line 257 and look for:

jQuery(document).ready(function($){

/////////////////////////////////////
// Equal-Height Grid Items
/////////////////////////////////////


if (document.documentElement.clientWidth > 300) {
$('.element').responsiveEqualHeightGrid();
}
});

Replace that with:

$(window).load(function() {

/////////////////////////////////////
// Equal-Height Grid Items
/////////////////////////////////////

$('.main_box').matchHeight();
});

10. Make sure all files are saved.

The boxes on your collection page should now be fully aligned.