Topic summary
Goal: Make the “swatches” display horizontally (and ideally be clickable/enlarge on hover). These are images in the product description (not native color swatches).
What was tried:
- Helper provided CSS to target images in the product description: .product__description-container .rte img { display: inline-block; } (rte = rich text editor content).
- Initial issues were due to incorrect placement (inside a @media block) and a likely typo (“in line-block”). Moving the CSS to the very bottom of base.css did not resolve it.
- Next step was to add the CSS in theme.liquid before , properly wrapped in …. After initially pasting it as plain text (showing on the page), the user corrected it, and the product page displayed images horizontally as desired.
Latest update:
- The issue reappeared on a different page (/pages/resources). The provided URL returned 404 for the helper, so they could not verify or fix.
Outcome and status:
- Product page fixed after correctly adding CSS in theme.liquid.
- The Resources page issue remains unresolved pending a valid, accessible URL.
- Clickability and hover-enlarge behavior were not implemented in this thread.