Banner Images Not Displaying Properly Due to Incorrect Aspect Ratio and Opacity Settings

Shopify Discussion

Topic summary

Main issue: Banner images in a Shopify theme are not rendering or display at incorrect sizes, likely tied to aspect ratio calculations and CSS opacity. Liquid code uses a fallback aspect ratio of 1.5; switching to 16:9 did not help. A ::after pseudo‑element has opacity set to 0.0 and is suspected to affect visibility. The hero banner cannot be deleted; its delete option disappeared.

Troubleshooting steps:

  • Reverted code changes; issue persists.
  • Shared store URL for inspection.
  • Disabled a homepage section (“Best Sellers: Recommended For You”); no change.
  • Disabled/uninstalled a suggested app (Pumper – Quantity Breaks & Bundles) via App embeds; no change.

Current behavior: All non‑product images are hidden; containers appear to render to zero height/width, suggesting layout collapse despite code adjustments. Product images still display.

Context/terms: Liquid is Shopify’s templating language. The ::after pseudo‑element is a CSS-generated element that can overlay or affect layout/visibility.

Status: Unresolved and ongoing. Root cause remains unidentified. Screenshots are central for understanding the visual issue. No confirmed fix or decision yet; further theme/CSS diagnostics are needed.

Summarized with AI on December 18. AI used: gpt-5.
1

I’m experiencing issues with the banner images in my Shopify store theme. Specifically, the banners are either not displaying correctly or not rendering at all, possibly due to incorrect aspect ratio calculations and CSS opacity settings.

Issue Overview:1. Banners Not Displaying Properly:

  • The aspect ratio for the banner images seems to be calculated incorrectly, causing the image containers to either collapse or display the wrong dimensions.
  • Additionally, I noticed a CSS rule that applies a 0.0 opacity to a pseudo-element (::after), which might be affecting the banner visibility.

  1. Troubleshooting Steps I’ve Taken:

    • I inspected the Liquid code and found that the aspect ratio is calculated with a fallback value of 1.5. I attempted to adjust the aspect ratio to 16:9, but the issue persists.
    • I also identified that the opacity for the banner’s ::after pseudo-element is set to 0.0, which might be causing the banner to be invisible.
    • I adjusted both the Liquid aspect ratio logic and the CSS opacity, but these changes didn’t resolve the issue fully

I tried to revert the code to before anything changed, but it makes no difference. The banners show up like this, and my hero banner now cannoit be dleeted either, the option to do is removed. I am stumped!

Screenshot 2024-09-25 at 19.33.32.png
Screenshot 2024-09-25 at 19.33.32.png1032×458 164 KB

Screenshot 2024-09-25 at 20.07.48.png
Screenshot 2024-09-25 at 20.07.48.png1068×910 226 KB

2

Hi @simpilshop

Could you share your store URL so we can check?

3

Ah yes, - https://hollywoodmirrorsboutique.com/ Thank you

4

Can you disable this section for checking?

Best Sellers: Recommended For You

Screenshot 2024-09-26 at 14.09.23.png
Screenshot 2024-09-26 at 14.09.23.png1774×978 359 KB

5

Hi, I have done this.

1 Like
6

Has it solved the issue?

7

No, still doesn’t appear

8

Have you installed this app?

https://apps.shopify.com/pumper-quantity-breaks-product-bundles-discounts

Could you try to disable that app from Online Store > Themes > Customize > App embeds or uninstall it to check if it solve your issue

9

I did that, still doesnt work.

All images still hidden expect product images, its like the containers are all rendering to zero. So confusing.