Solved

Remove blank product swatch section on home page?? Dawn Theme

quiddity
Shopify Partner
6 0 2

I am working on a shopify site for a client and having issues with a blank section appearing on the home page that seems to be related to product swatches.

She does not have e-commerce/products/store ready yet, but the website is solely serving as a contact/portfolio reference for the time being until her collection is ready. Therefore, we do not need any product swatches active.

 

I have removed the footer from this home page for a sleek aesthetic, and want the background image to fill the whole screen on mobile with the text centered over the image. But am now running into the issue of this massive section appearing on mobile that I can't seem to get rid of!!! See image below.

 

Screenshot 2024-05-22 at 11.22.56 AM.png

 

I am relatively new to Shopify but learning as I go. Any help to hide/remove this section for the time being would be incredibly helpful. Thank you!!!

 

https://olivia-sugarman-jewelry.myshopify.com/

password: sugarman

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
6394 1535 1906

This is an accepted solution.

Hi @quiddity 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "section-image-banner.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

@media only screen and (max-width: 550px){
.banner--adapt,
.banner--adapt_image.banner--mobile-bottom .banner__media:not(.placeholder) {
  height: 100vh;
}
}

 

And Save. 

Result:

Made4uoRibe_0-1716377439521.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

View solution in original post

Replies 7 (7)

Made4uo-Ribe
Shopify Partner
6394 1535 1906

This is an accepted solution.

Hi @quiddity 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "section-image-banner.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

@media only screen and (max-width: 550px){
.banner--adapt,
.banner--adapt_image.banner--mobile-bottom .banner__media:not(.placeholder) {
  height: 100vh;
}
}

 

And Save. 

Result:

Made4uoRibe_0-1716377439521.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
quiddity
Shopify Partner
6 0 2

Thanks a million! This worked perfectly. However, it's affecting the banner images on other pages.

 

How can I adjust to apply ONLY to this page on mobile? Thank you!

tim
Shopify Expert
3559 300 1322

You should be able to add this CSS code as a "Custom CSS" setting of the section in question, rather than add it to theme code.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
quiddity
Shopify Partner
6 0 2

This worked great - thank you!

Made4uo-Ribe
Shopify Partner
6394 1535 1906

Welcome, did you already solve the problem? I seen that youve add section on the code that I give.  

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
quiddity
Shopify Partner
6 0 2

Solved! Added the code you provided as a custom css adjustment for this section vs to theme code and worked perfectly. Thank you for your help!

Made4uo-Ribe
Shopify Partner
6394 1535 1906

Good to hear! Your welcome. 😊

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.