Random small box under product image on Collections page

Topic summary

A user is experiencing an unwanted small empty box appearing beneath product images on their Shopify store’s collection pages. The issue is identified as a color swatch element that needs to be hidden.

Initial Solution:

  • Multiple contributors provided CSS code to hide .collection .color-swatch by adding display: none !important; to the theme.liquid file before the </body> tag.
  • This initially resolved the issue on desktop collection pages.

Ongoing Problems:

  • The box persists on mobile devices and in the “Recently Viewed” section.
  • Updated CSS targeting .collection-stack .color-swatch .color-swatch.label was provided to address both mobile and desktop.
  • Despite implementing the updated code and clearing cache, the user reports the issue remains visible.
  • When attempting to add code after the HEAD tag instead, it removed the box but broke the header and announcement bar functionality.

Current Status:
The issue remains unresolved, with the box still appearing on the fragrance accessories collection page. The user is seeking additional troubleshooting help.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.

There’s a small empty box under a product in the Collections page. Any idea where this is in the code and how I can remove? (See image - page is linked here as well)

https://ajoyforever.com/collections/the-original-dough-bowl-candles

Hello @ajoyforever

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.collection .color-swatch { display: none !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like

Thanks. That worked for the Collections page, but still showing on Recently Viewed and elsewhere. Thoughts?

It work perfectly see there is no box.

It’s still there on mobile and under “recently viewed”

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.section-stack .color-swatch { display: none !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Hey, You can added this updated code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.collection .color-swatch label.color-swatch { display: none !important; }

look now there is no issues on mobile device and desktop also.

Hi there - I did that, and completely cleared my cache, but still see it.

ajoyforever_1-1710109887594.png

I added after the HEAD tag which removed it but also removed the header and announcement bar functionality in the customizer :disappointed_face:

Here’s the link where it’s still showing up: https://ajoyforever.com/collections/fragrances-accessories