> ## Documentation Index
> Fetch the complete documentation index at: https://docs.swiftlywp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Appearance

> Customize colors, borders, and visual styling of the box builder.

BoxBuilder is designed to look great with any WordPress theme out of the box. For further customization, use the **Appearance** settings tab.

## Appearance Settings

Navigate to **BoxBuilder → Settings → Appearance** to customize:

### Brand Colors

| Setting           | Description                                                              | Default   |
| ----------------- | ------------------------------------------------------------------------ | --------- |
| **Primary Color** | Main accent color for buttons, progress bars, selected states, and links | `#5c6ac4` |
| **Success Color** | Color for success states (item added badges, confirmations)              | `#28a745` |

<Tip>
  Choose a primary color that matches your store's branding. The color picker supports hex values — click "Default" to reset to the original color.
</Tip>

### Card Styling

| Setting          | Options                                                                                       | Default        |
| ---------------- | --------------------------------------------------------------------------------------------- | -------------- |
| **Corner Style** | Square (0px), Slightly Rounded (4px), Rounded (8px), More Rounded (12px), Very Rounded (16px) | Rounded (8px)  |
| **Card Shadow**  | None (Flat), Light (Subtle), Medium (Prominent)                                               | Light (Subtle) |

### Advanced <sup>Pro</sup>

| Setting            | Description                                                     | Default |
| ------------------ | --------------------------------------------------------------- | ------- |
| **Enable logging** | Write debug information to WooCommerce logs for troubleshooting | Enabled |

<Warning>
  Leave logging enabled during setup and testing. You can disable it on production sites to avoid unnecessary log file growth. Logs are accessible at **WooCommerce → Status → Logs**.
</Warning>

## CSS Namespacing

All BoxBuilder CSS is namespaced under `.boxbuilder-wrap` to prevent conflicts with your theme. Every element uses a `.boxbuilder-` prefix:

```css theme={null}
.boxbuilder-wrap { }
.boxbuilder-grid { }
.boxbuilder-product-card { }
.boxbuilder-summary { }
.boxbuilder-progress { }
```

## Custom CSS

If you need custom styles beyond the settings, you can add CSS in **Appearance → Customize → Additional CSS** or your theme's custom CSS area.

Common customizations:

```css theme={null}
/* Change product card background */
.boxbuilder-wrap .boxbuilder-product-card {
    background-color: #f9f9f9;
}

/* Change the Add to Box button style */
.boxbuilder-wrap .boxbuilder-add-btn {
    border-radius: 20px;
    text-transform: uppercase;
}

/* Adjust grid gap */
.boxbuilder-wrap .boxbuilder-grid {
    gap: 20px;
}
```

<Warning>
  Avoid using `!important` in custom CSS. BoxBuilder styles use low specificity intentionally — your theme or custom CSS should be able to override them naturally. If you need `!important`, the selector specificity may need adjusting.
</Warning>

## Theme Compatibility

BoxBuilder uses WordPress-native styles as a foundation and minimal custom CSS on top. It's tested and compatible with:

* Storefront
* Astra
* GeneratePress
* Flatsome
* OceanWP
* Divi
* Avada

If you experience styling issues with your theme, please [contact support](https://swiftlywp.com/support/).