I would like to add colors swatch bellow the items
like here:
and to center it.
is there any way to see those items colors swatch on my catalog?
This is the website:
https://036fa1-f4.myshopify.com/collections/mens-swimwear
Topic summary
Goal: show color swatches beneath product tiles on Shopify collection pages and center them.
What happened:
- Original poster requested swatches under items and shared example images and live collection links. Images are illustrative of the desired layout.
- A reply said this requires custom code and linked a YouTube tutorial. As alternatives for non-coders, they suggested apps (e.g., Boost AI Search & Filter, Variant Option Product Options).
- The poster implemented the tutorial successfully—swatches now appear under products.
Current issue:
- The remaining request is to center the swatches to align like the product text on the collection page.
Status:
- Partially resolved. Swatches are implemented; centering is still pending.
Next steps (implied):
- Apply CSS adjustments to center the swatch container (e.g., set the swatch wrapper to display: flex; justify-content: center; or use text-align: center depending on markup).
- No final resolution yet; discussion remains open on the centering tweak.
@Shani-Swim , It needs some custom code you can follow this tutorial to add this: https://www.youtube.com/watch?v=VnVu2nhnBMU
If you’re not familiar with coding you can use an app to help like: Boost AI Search & Filter, Variant Option Product Options , …
1 Like
Actually it did the job!
Is it possible to center those swatches like the text please?