Theme Styling

Customize the look and feel of your bundle extension with ease using clearly defined CSS classes. Custom CSS allows you to personalize the extension’s appearance to match your store’s design seamlessly. With flexible styling options, you can ensure your bundles integrate beautifully into your existing theme.

Example Template

The following CSS is the custom styling used by our default bundle form. You can re-use this as a starting point for your theme.

.bundle-selection-wrapper {
  max-width: 600px;
}

.bundle-selection-wrapper > * + * {
  margin-top: 2rem;
}

.bundle-selection-group > * + * {
  margin-top: 1.5rem;
}

.bundle-selection-group__label {
  color: inherit;
  line-height: 1.5rem;
  font-weight: 600;
  font-size: 16px;
}

bundle-selection-product:first-of-type {
  margin-top: 1.5rem;
}

.bundle-selection-group__field > * + * {
  margin-top: 1.25rem;
}

.bundle-selection-group__field:nth-of-type(2) .bundle-selection-group__label {
  font-size: 15px;
  opacity: 0.7;
}

.bundle-selection-group__field:nth-of-type(2) bundle-selection-product:first-of-type {
  margin-top: 1rem;
}

.bundle-selection-product__label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  padding-left: 16px;
  row-gap: 0.25rem;
}

.bundle-selection-product__label input[type='radio'] {
  border-radius: 100%;
}

.bundle-selection-product__label input[type='radio'],
.bundle-selection-product__label input[type='checkbox'] {
  position: absolute;
  left: 0;
  top: 0;
  appearance: none;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  user-select: none;
  flex-shrink: 0;
  height: 16px;
  width: 16px;
  color: #8db381;
  border-color: #d1d5db;
  border-style: solid;
  border-width: 1px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.bundle-selection-product__label input[type='radio']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

.bundle-selection-product__label input[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

.bundle-selection-product__label input[type='checkbox']:disabled {
  color: #b8b8b849;
}

.bundle-selection-product__label input[type='radio']:checked,
.bundle-selection-product__label input[type='checkbox']:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.bundle-selection-product__title, .bundle-selection-product__price {
  color: inherit;
  line-height: 1.5rem;
  font-size: 15px;
  font-weight: 500;
  display: block;
  margin-left: 0.75rem;
}

.bundle-selection-product__title {
  flex: 1;
}

.bundle-selection-product__sku {
  display: block;
  width: 100%;
  font-weight: 500;
  margin-left: 0.75rem;
  font-size: 13px;
}

.bundle-selection-quantity__control {
  position: relative;
  display: inline-block;
  width: auto;
}

.bundle-selection-quantity__control--input {
  --ring-color: #d1d5db;
  --ring-width: 1px;
  line-height: 1.5rem;
  font-size: 14px;
  color: inherit;
  border-width: 0px;
  box-shadow: inset 0 0 0 0px #fff, inset 0 0 0 var(--ring-width) var(--ring-color), 0 0 #0000;

  appearance: none;
  background-color: transparent;
  padding-left: 2.75rem;
  padding-right: 2.785rem;
  padding-top: 1.175rem;
  padding-bottom: 1.185rem;
  font-family: inherit;
  font-weight: inherit;
  margin: 0;
  outline: none;
  width: 100%;
  text-align: center;
  max-width: 150px;
}

.bundle-selection-quantity__control input[type="number"]::-webkit-inner-spin-button {
  display: none;
  appearance: none;
  margin: 0;
}

.bundle-selection-quantity__control--decrease,
.bundle-selection-quantity__control--increase {
  position: absolute;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 16px;
  height: 100%;
  font-family: inherit;
  font-weight: 500;
}

.bundle-selection-quantity__control--decrease:hover,
.bundle-selection-quantity__control--increase:hover {
  color: #8db381;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
} 

.bundle-selection-quantity__control--increase {
  top: 0;
  right: 0;
}

.bundle-selection-quantity__control--input:focus {
  --ring-color: #8db381;
  --ring-width: 2px;
}

.bundle-selection-quantity__label {
  color: inherit;
  line-height: 1.5rem;
  font-size: 16px;
  font-weight: 500;
  display: block;
}

.bundle-selection-quantity > * + * {
  margin-top: 1rem;
}

.bundle-selection-form {
  display: flex;
  flex-direction: column;
}

bundle-selection-quantity,
bundle-selection-price,
bundle-selection-button {
  margin-top: 1.25rem;
}

.bundle-selection-price {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  column-gap: 0.75rem;
}

.bundle-selection-price__label,
.bundle-selection-price__value {
  color: inherit;
  line-height: 1.5rem;
  font-size: 16px;
  font-weight: 500;
  display: block;
}

.bundle-selection-button button {
  position: relative;
  display: block;
  background-color: #8db381;
  color: #ffffff;
  border-color: #8db381;
  border-width: 1px;
  border-style: solid;
  line-height: 1.5rem;
  font-size: 16px;
  font-weight: 500;
  padding-left: 2.25rem;
  padding-right: 2.25rem;
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
  cursor: pointer;
  text-transform: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  min-width: 250px;
}

.bundle-selection-button button:hover {
  filter: brightness(95%);
}

.bundle-selection-group__error,
.bundle-selection-error__msg {
  color: #e97551;
  line-height: 1.5rem;
  font-size: 16px;
  font-weight: 500;
}

.bundle-selection-group__error {
  margin-top: 0.5rem;
}

.bundle-selection-button__loading {
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}