Help with Collection page hero image - Debut theme

Store Design
1

Hi,
I have a few small things that I need help with on my theme. (Debut theme). The theme is almost complete—it is about 95% finished. I just need assistance to help to finish the site. I am a graphic designer myself, but I am not a shopify coder or web designer. It would actually be great if someone is available help with some small updates from time to time. I can pay for this service also. :slightly_smiling_face:

Currently:

  • Header logo — Currently when viewing on my macbook, the logo is slightly blury, but is good on the mobile phone version of the site. If I change the size a little, the logo then looks good on macbook, but then it is slightly blury on phone.. Is there a size or file type or way of saving the image so that it is good for both?

  • Collection page hero image — I’d like to have the hero image responsive so that it looks good on both desktop and mobile sites. I tried a few different things, and I can get the image looking good on the desktop version, but it is not responsive or the wrong size when viewing on the mobile version. Also, is it also possible to have different collection hero images for desktop and mobile? If the image is responsive, it might be too small for mobile, so I’d prefer to design a different image with larger graphics to use for the mobile version of the site.

  • ‘Sort By’ options for collections pages — I would like to remove the thin lines that are above and below the section. Just make it a clean white background. Currently there is a default thin line showing..

Can you help with this?

Thank you :slightly_smiling_face:

Patrick

2

Hi PatrickCook

Can you share your shop link so can try to fix your issue. And also add some description you need to change. so i will try to fix your issue.

If helpful then please Like and Accept Solution.
Shopify theme and app developer.
Skype: live:hardikradadiya355
Thanks

3
  • Logo: Go to file sections > header.liquid and find “site-header__logo-image”, change code :
    img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’ => img_url: ‘master’
    https://i.imgur.com/0D8EDqm.png
  • Collection page hero image: Go to Customize > Image with text overlay > Section height > Select Adapt to image.
  • Sort By: Go to file asset > theme.css and paste this at the bottom of the file:
    .filters-toolbar-wrapper{
    border: none !important;
    }
1 Like
4

Thanks very much for your help.

  • The logo is perfect now.

  • The lines code worked :slightly_smiling_face:

  • I am still not sure about the Collection Hero image? Where can make those changes? I couldn’t see the option in the custom theme area?

Any more advice would be great. Thanks :slightly_smiling_face:

5

Hey Patrick, did you ever figure this out regarding the hero image? I’m having the same issue and it seems like this question is commonly asked! Debut is great but this is a huge downside since the hero image is the first thing customers see when they come to your site, especially on mobile!