Changing alignment of Debut collections hero images

New Member
2 0 0

How can I change the alignment of the hero image on my collection pages using the Debut theme? On other pages, you have the ability to select a top, middle, or bottom alignment of the image. On the collection pages, the hero image is aligned to the top by default.

Help! 

0 Likes
Shopify Expert
2648 60 642

Hi Ruth, 

you can control this by adding one of the following to the bottom of the theme.scss.liquid  Asset

/* show top portion of collection hero image */
.collection-hero__image {background-position-y: 0; }

/* show middle portion of collection hero image */
.collection-hero__image {background-position-y: 50%; }

/* show bottom portion of collection hero image */
.collection-hero__image {background-position-y: 100%; }

This will, however, affect all collections.

Making this a per-collection setting will require more complex changes.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
New Member
2 0 0

Hi Tim,

Just right at the bottom? I tried this using the 50% code and nothing has changed yet.

0 Likes
Shopify Expert
2648 60 642

Yep. Cause 50% is the default.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
New Member
7 0 0

Hi Tim,

Thanks for this but I'm also facing the same problem. Copied and pasted both the 0% and 100% code at the bottom of the CSS but nothing changes. Same as Ruth, the image is aligned to the top and the product name and price is misaligned with the rest of the products.

Would be great if you could help.

Thanks,

E

0 Likes
Shopify Expert
2648 60 642

Hi ET,

Shopfy has changed the theme internals during these 4 months, so this can be a reason. To see you problem I need a password from the Online Store->Preferences:Password Page -- it's safe to share since it only grants access to the storefront.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
New Member
7 0 0

Hi Tim,


Thanks for helping. PW is stuild.

If you look under accessories, you'll see why.

Thanks,

 

0 Likes
Shopify Expert
2648 60 642

Hi ET, 

Ruth was talking about the background image shown under the collection name.

Your problem is different -- Debut does nothing to align your product titles, and collection grid will look good only if your product images all have the same aspect ratio.

To address this, open your product-card-grid.liquid Snippet  and paste this code at the very bottom:

{% unless product.featured_image == blank %}
	{% assign this_ar = 1 | divided_by: product.featured_image.aspect_ratio | times: 100 %}
{% else %}
	{% assign this_ar = 100 %}
{% endunless %}
<!-- {{ this_ar }} : {{ max_ar }} -->
{% unless max_ar > this_ar %}
	{% assign max_ar = this_ar %}
{% endunless %}
{% if forloop.last %}
	<style>
      .grid-view-item__image-wrapper {
        max-height: none !important;
      }
      .grid-view-item__image-wrapper div {
        padding-top: {{ max_ar -}}% !important;
      }
      /* uncommment below to align image at the bottom */
      /*
      .grid-view-item__image-wrapper .grid-view-item__image {
        top: auto;
        bottom: 0;
      */
      }
	</style>
{% endif %}

This code will align you product titles, and if you uncomment the last CSS rule, will also align you product images to be right above your aligned product titles.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Shopify Expert
2648 60 642

Update: 

this code will allow you to align image to top, center or bottom of the space (use flex-start, center ot flex-end):

{% unless product.featured_image == blank %}
	{% assign this_ar = 1 | divided_by: product.featured_image.aspect_ratio | times: 100 %}
{% else %}
	{% assign this_ar = 100 %}
{% endunless %}
<!-- {{ this_ar }} : {{ max_ar }} -->
{% unless max_ar > this_ar %}
	{% assign max_ar = this_ar %}
{% endunless %}
{% if forloop.last %}
	<style>
      .grid-view-item__image-wrapper {
        padding-top: {{ max_ar -}}% !important;
        max-height: none !important;
      }
      .grid-view-item__image-wrapper div {
        padding-top: 0 !important;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;/* can use flex-start, flex-end and center here */
      }
      .grid-view-item__image-wrapper .grid-view-item__image{
        position: static;
        top: auto;
      }
	</style>
{% endif %}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
New Member
7 0 0

Hi Tim,

Thanks for the second script. It works! If I could ask one more time.. how do i align the images to the left of the grid? It's center now.. but I reckon an align left would be perfect.

Regards,

ET

0 Likes