Adding Featured Image to Home Page for "Colors" Theme

Hi,

I am very new to Shopify and css/html. I purchased the “Colors” theme from the Shopify store and I’ve been playing around with trying to modify the style. I would like to add a “Featured Image” or alternatively an “Image with Text” to the home page above the first product item. When I do via the GUI editor, the header section suddenly gets a background rectangle which is not there in the default theme. The Feature Image then does not dynamically behave like the first product item where it smoothly moves behind the company name and menu. How can I add a Featured Image/Image with Text above the Product List and achieve the same effect? Is there another/better way to achieve this effect?

I’ve also tried modifying the home page via code but I am woefully unprepared for that. I am open to any code based suggestions, I work in python and matlab regularly, but this is new territory.

Thank you all in advance.

1 Like

@etendue

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

1 Like

Thank you Ketan for your quick response. It looks like I’m too new to have DM activated on my account. Unfortunately our shop is currently password protected and I can’t send you the PW without publicly posting it.

I’ll circle back to you once I reach whatever the criteria is for activating DMs. In the mean time, do you have any experience with that Theme and/or any general suggestions I can try?

Thank you again.

@KetanKumar

Are you still able to help?

Here is the site link: https://awaergo.myshopify.com/

And here is the PW: august10

I’ve reset the theme to show the default behavior I’d like to achieve. Here there you can see that the first featured product moves smoothly up and behind the site name and menu when you scroll all the way to the top. I would like to add a hero banner between this first product and the menu but have that hero image behave the same way. How can I achieve this?

(adding between the “Header” and “Product List” sections)

1 Like

@etendue

sorry password doesn’t work

1 Like

@KetanKumar

I reset it half way through the day. It’s back to “august10” now. See if it works.

1 Like

@etendue

yes, that’s work

but i can’t see any issue please share more details

@KetanKumar thank you for your continued engagement. I really appreciate it. Here are a few more details.

  • In the original/default Theme, the Product List is located directly below header
  • Here, the Product panel moves smoothly up and behind the store name and menu when at the top of the home page.

I want to add a hero image at the top of the Home Page. So I’ve tried to use the GUI to do this directly.

  • I have added an Image with Text between Header and Product List to act as a Hero Image for the Home Page
  • When adding the “Image with Text” this background header image (shown in the screenshots below) automatically appears too. I do not want this here.
  • I want this “Image with Text” to move smoothly up and behind the store name and menu when at the top of the home page like the Featured Products do in the default configuration for this theme. How do I achieve this?

I’ve reset my theme to the original configuration so you can see the dynamic behavior I want to achieve. I do not currently have that hero image at the top of the page. Is my issue a little more clear?

Thank you (all)

ORIGINAL:

WITH MY ATTEMPT AT ADDING A HERO IMAGE:

1 Like

@etendue

no rush its my pleasure to help us yes theme default code if you need any customization its possible other code

Thanks everyone. I’m all ears if anyone has specific suggestions on how to change the code to reach this objective. I’m going to pursue other paths to find the answer. If I find something that works I’ll post it here. I’m changing the password to the website while I experiment further.

@etendue

thanks for update that’s work on customization code