Product Pages Blank Space Issue (Dawn 9.0 Theme)

Shopify Discussion
1

Our online store (https://www.chimneycricket.com) made with the Dawn 9.0 theme has been having some issues with the Product Pages (ex. https://chimneycricket.com/products/summerset-sizzler-26-built-in-grill) showing a large block of white space under the footer. Have tried reaching out to support and tried to change the code around but no luck. Any input would be very much appreciated! Thank you in advance.

1 Like
2

Hi @chimneycricket ,

I reviewed the site and found that there are bunch of SVGs thats taking up the space.

I noticed some issues on your theme which is not possible to explain via comments. Some of the issue is shown in the below screenshots[i.e Issues with DOM elements].

makkaomakka_3-1696353600697.png
makkaomakka_3-1696353600697.png975Ă—207 10.5 KB

Untill you debug this completly, you can add bellow CSS to hide those white spaces

Steps to add CSS:

Step 1: Go to Online Store > Themes > Active theme > Edit

makkaomakka_0-1696353476980.png
makkaomakka_0-1696353476980.png400Ă—139 29.1 KB

Step 2: Search for “theme.liquid”

makkaomakka_1-1696353476982.png

Step 3: Add the CSS above “”

makkaomakka_2-1696353476985.png

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Mangit

1 Like
3

Hi @chimneycricket

Try 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 “base.css, style.css or theme.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:
body > svg {
    display: none !important;
}
1 Like
4

Thank you SO much! This worked and saved us so much trouble. We really appreciate your time.

1 Like