Collection Page - move the collection description so it is on the banner image (below the title_

Highlighted
Shopify Partner
4 0 0

I am using the debut theme. Currently the description displays below the hero image. I would like to display it below the Title over the hero image.

I added the below (bolded code) to the collection-template. The description now displays on the hero image, but at the bottom of it instead of below the title

 

<div class="collection-hero__title-wrapper">
<h1 class="collection-hero__title page-width">
<span class="visually-hidden">{{ 'collections.general.collection_label' | t }}: </span>
{{ collection.title }}
<hr style="height:1px; border:none; color:#fff; background-color:#fff; width:10%; text-align:center; margin: 20px auto;">
</h1>
<p class="collection-hero__description">
{% unless collection.description == blank %} <span> {{ collection.description }}</span> {% endunless %}
</p>
</div>
</div>

 

Added to theme.css
.collection-hero__description {
color: $color-overlay-title-text;
width: 50%;
text-align: center;
left: 0;
right: 0;
@include transform(translateY(-100%));

}

0 Likes