Removing Featured Image from Collections Page

[Lexi_Johnson]

I am working on my site www.dosfemmes.com and I just implemented a new change. When you click "shop" from the main menu there are now three options to choose to shop, which are my collection featured images. I want those to stay. However, when you click on "handbags" and go to the collection page, there is a large featured image. I would like to remove that asap.

Can anyone help??

[tim]

Hi Lexi,

while you can not remove it comlpetely without modifying the code, you can hide it. Go to theme ->customize, navigate to any collection on the right, click "Collection page"  on the left and select "Image height" Tiny, "Overlay Opacity" 100% under Feature Image.

To remove the image completely, open collection.liquid Snippet, find this code at approx line 73

  {% if collection.image %}

and change it this way:

  {% if collection.image and false %}

[Lexi_Johnson]

Thank you SO MUCH, Tim! This worked like a charm :)

[tim]

Uhm Lexi, 

I am sorry -- this modification is a bit greedy -- it removes collection title and description as well :)

If you want to get them back, there is a code at the line ~92:

    {% unless collection.image %}

Change it in a similar way:

    {% unless collection.image and false %}

[Lexi_Johnson]

Perfect i did not even notice that, thank you so much! Do you also happen to know how I would go about another change.

90% of my visitors are on their mobile devices, so I would like for the full nav menu to show on mobile, meaning the full dropdown menu under "shop" appears on the mobile nav. Right now there is a plus sign next to shop and I would rather all of the menu items show instead of a drop down. 

Is there a way to make that change? Or will I need to have a larger, darker down arrow on the drop down instead of that small plus sign?

Thank you!

Lexi

[tim]

Well,  you can try this:

0. Make a backup copy of your theme by clicking a 3-dot button by the theme name and selecting duplicate

1. Open your shop.js Asset,  find this line at the bottom of the file:

window.onload = function(){

and add this code right below:

/* --tim: pre-expand a mobile menu drop-down if it links to the SHOP page */
$('.nav--mobile a[href*="/pages/shop"]').closest('.parent').addClass('main-menu--expanded');

2. You may also add this code to the bottom of the styles.scss.liquid Asset  to make a plus sign more visible:

/* --tim: make an expand sign more visible on mobile menu */
.nav--mobile .main-menu li a.nav-carat {
    font-weight: bold;
    font-size: 1.2em;
    margin-top: -0.3em;
}

[Lexi_Johnson]

Once the code is added, do I activate the duplicate theme?

[tim]

Depends on your attitude :)

• you may edit your published theme and keep the duplicate as a backup if things go south, or
• you may edit the copy, preview it and publish when happy. The initial theme will serve as a backup then.

[Lexi_Johnson]

Tim, 

You are seriously the best!!!! What would I do without you?!

Lexi

[tim]

:)