Random small box under product image on Collections page

Store Design

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.
1

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

fire pit candle.jpg
fire pit candle.jpg393×493 28.7 KB

2

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; }

techlyser_web_0-1710049225664.png
techlyser_web_0-1710049225664.png1278×399 380 KB

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

1 Like
3

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

ajoyforever_0-1710050673524.png
ajoyforever_0-1710050673524.png1692×584 169 KB

4

It work perfectly see there is no box.

techlyser_web_0-1710051824948.png
techlyser_web_0-1710051824948.png1240×349 133 KB

5

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

IMG_5892.jpeg
IMG_5892.jpeg1125×1526 133 KB

6

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.

7

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.

arraynex_0-1710056938264.png
arraynex_0-1710056938264.png663×492 57.8 KB

8

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

ajoyforever_0-1710109837677.png
ajoyforever_0-1710109837677.png1703×600 225 KB

ajoyforever_1-1710109887594.png

9

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

10

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