How do I style the product variant dropdown in Squarespace?

Style Product Variant Selector

Product variant selectors use the .product-variants select element. You can restyle the dropdown to match your site's form styling with custom borders, padding, and colors.

The default dropdown arrow can be replaced with a custom one using a background SVG. This gives you full control over the arrow's size, color, and position.

.product-variants select {
  border: 2px solid #ddd !important;
  border-radius: 6px !important;
  padding: 12px 40px 12px 16px !important;
  font-size: 15px !important;
  background-color: #fff !important;
  color: #333 !important;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

.product-variants select:focus {
  border-color: #e63946 !important;
  outline: none !important;
}

Style variant selectors with our Products V2 StylerTry it free →