Debut Theme - Disable Automatic Collection Image Overlay Banner

Tourist
5 0 1

Hi there,

I am using the debut theme. I have uploaded custom pictures for the collections and they show perfectly. However, after you click on a collection, there's an automatic collection image overlay banner (a zoomed-in low-res image based on my uploaded custom pic) instead of an original white background. 

I don't want this:

But I want this original one:

How do I keep the uploaded custom collection pictures yet disable the automatic collection image overlay banner, keeping the clean, whtie background?

I think these are the lines of code that control this:

Pls advise. Thanks!

 

1 Like
New Member
1 0 0

If you just want a white background, you could just delete the following line:

 <div class="collection-hero__image" style="background-image: url({{ collection.image | img_url: '1024x300', crop: 'top' }});"></div>

Or you could replace line 12 - 36 with this code instead.

      <div class="page-width">
        <div class="section-header text-center">
          <h1>{{ collection.title }}</h1>
          {% if collection.description != blank %}
            <div class="rte">
              {{ collection.description }}
            </div>
          {% endif %}
        </div>
      </div>

I'm sure there are better ways to do this, but this is one of them. I would also backup lines 12-36 in case you change your mind.

0 Likes
Tourist
6 0 1

I have the same issue. Did this work?

Thanks

Nil

 

0 Likes
Shopify Expert
2674 65 664

Hi guys, but 

Isn't switching collection image off in customizer good enough?

(Customize theme, navigate to collection in the right pane, click Collection Pages on the left and uncheck the "Show collection image" checkbox)

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

Connor Bailes, tried that code ant got this error:

 

This file contains the following errors:

  • Line 28 — Liquid syntax error: Unexpected outer 'else' tag
0 Likes
Tourist
6 0 2

Here's a work around:

Under  'Assets' go to 'theme.scss.liquid'

-find this section of code:

.collection-hero__image {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 300px;
  opacity: 1;

-Change   opacity: 1;    to   opacity: 0;  and the background image will become invisable.

Also, playing with the ' height: 300px;' will adjust the spacing of this area.

 

 

1 Like
New Member
6 0 0

hi guys..

im using the Debut theme and i'd like put a hero image, like the one here, but in all my other pages.

Is that possible!?

 

0 Likes
New Member
6 0 0

Is it possible to have different images in the header then the ones currently in the collection image? 

I would like to have collection images different to the actual header image in each collection page. 

 

Could someone advise ?

Website designer and business owner at radi8digital.
0 Likes
New Member
2 0 0

Did anyone ever figure out a solution for this?

 

0 Likes