Stiletto Theme - Remove color swatch box on product page

Store Design
, , ,
1

Is there a way to remove the box with the color swatch on the product page for Stiletto Theme? I tried removing it, but the box turned into a dropdown box. I would just like to keep the color title (ex. "Color: Green).

See photo reference below.

color box.png
color box.png2000×710 22.8 KB

2

Hi @NewYorkais ,

This is Kate from PageFly - Landing page builder

Please share your store URL and if your store is password protected then please provide password too. So that we can help you.

Thank you.

3

Hi @NewYorkais ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:

Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file

.product__color-swatches .product__color-swatch[data-size=small][data-shape=rectangle] {
   display: none;
}
.product__block.product__block--medium {
   margin-bottom: 0 !important
}

Hope my answer will help you

4

there’s no base.css, just “custom.css” and “theme.css”

5

Sorry, you can add it to theme.css

6

Hello @NewYorkais ,

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1676346110594.png
GemPages_0-1676346110594.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1676346138844.png
GemPages_1-1676346138844.png1467×820 64.6 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

7

** @NewYorkais **

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

.product__color-swatches {
  display: none;
}
8

Thank you this worked.