Size tag design (dawn theme)

[voodoowww123]

Hi! I’m trying to add the size tag on the main grid like this: with a transparent background and the thinnest possible black border. Can anyone help me?

url: https://voodoo-warehouse.com/collections/all?sort_by=created-descending

Thanks

[voodoowww123]

@Moid.space

.card-information .product-variant__option { background: transparent !important; border: 1px solid #000 !important; }

Hey. I can’t see anything changing with that code

[tim_1]

Instead try this:

.card-information .card__swatch-item {
  width: 2em;
  height: 2em;
  display: inline-flex;
  padding: 0 !important;
  align-items: center;
  justify-content: center;
  border-radius: 0.25em;
  text-align: center;
  /* use either border */
  border:  1px solid;
  /* or shadow */
  /* different options -- fainter or thicker... 
     box-shadow: 0 0 1px 0px; 
     box-shadow: 0 0 0 1px; 
  */
}

[suyash1]

@voodoowww123 please add this css to the very end of your base.css file and check, should look like the screenshot below

shopify admin->online store->themes->edit theme code->assets->base.css

.card__swatch-item{    padding-right: 0px !important;  border: 1px solid #ab9d9d; height: 2rem; width: 2rem;}

[donny_fitmiecom]

Hi @voodoowww123
Try to add this code to bottom of the file base.css

.card__swatch .card__swatch-item{
border: 1px solid #000;
text-align: center;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px !important;
}

[voodoowww123]

Thank you so much! It’s perfect