As the title states, I’m trying to figure out how to make these swatches stretch horizontally instead of vertically across. Also if there’s a way to make them clickable or when I hover over them, to make them larger. Thank you. [Screenshot 2023-11-03 at 9.51.23 AM.png]

Hi @vehevince Please share that page link

https://goodlandsupplyco.com/collections/unisex-demo-collection/products/unisex-happy-stripe-hoody

Please give me password protected [Screenshot_2.jpg]

Please add this code to bottom of your base.css file in Online store > Themes > Edit code. .product__description-container .rte img { display: inline-block; } [Screenshot 2023-11-08 at 08.41.30.png] Also, they are images, not color swatches

Unfortunately that didn’t work. Am I pasting the code in the wrong area? I’m in base.css [Screenshot 2023-11-08 at 8.57.24 AM.png] [Screenshot 2023-11-08 at 8.57.36 AM.png]

You added code in @media case, please move it very bottom of your file

Still the same results unfortunately. What am I doing wrong? Thanks for your help by the way. [Screenshot 2023-11-08 at 9.14.57 AM.png] [Screenshot 2023-11-08 at 9.15.14 AM.png]

Go to your theme.liquid file and add this code before tag

How to make these swatches stretch horizontally across this tab instead of vertically?

Store Design

vehevince November 3, 2023, 6:52pm 4

Did that link work?

Topic		Replies	Views
Can I rearrange color swatches into two rows on my product page? Store Design	2	60	April 14, 2024
How can I resize and enlarge swatch images for better visibility? Store Design design , customizations , collection-page , landing-page , css , third-party-themes , shopify-themes , troubleshooting , product-page	6	156	April 3, 2026
Mobile Formatting Issue Technical Q&A troubleshooting	8	104	December 5, 2025
Make color swatches bigger Store Design design , customizations , troubleshooting , product-page	4	175	November 5, 2025
How can I unify my images on the product page? Store Design product-page	7	101	August 6, 2024

How to make these swatches stretch horizontally across this tab instead of vertically?

Related topics