---
title: Customize your site colors and product appearance
shortDescription: Customize your Fourthwall site colors, upload background patterns, override section colors, and adjust product card appearance
primaryTopic: customize-site-appearance
articleType: Tutorial
categories:
  - Store Design
tags:
  - customizing
  - site-design
  - colors-and-appearance
  - branding
  - product-display
  - background-pattern
  - per-section-colors
tasks:
  - change site color scheme
  - set background image or pattern
  - override colors in a specific section
  - adjust button border radius
  - customize product card appearance
  - turn off color swatches on product tiles
terms:
  - site colors
  - customize appearance
  - branding
  - hex code
  - border radius
  - rounded corners
  - product card
  - background image
  - background pattern
  - storefront design
  - per-section colors
  - color override
  - second image on hover
labels:
  - customizing
  - site-design
  - colors-and-appearance
  - branding
  - product-display
contextString: Available on all Fourthwall plans. Accessed via the site designer in the creator dashboard.
breadcrumbPath: "Getting started > Design my storefront > Customize your site colors and product appearance"
path: getting-started/design-my-storefront/customize-your-site-colors-and-product-appearance
relatedModules:
  - name: theme-settings-general
    route: /admin/dashboard/store-design/general/
  - name: theme-editor-pages
    route: /admin/dashboard/store-design/pages/
  - name: theme-editor-layout-checkout
    route: /admin/dashboard/store-design/layout/checkout
  - name: theme-editor-layout-home
    route: /admin/dashboard/store-design/layout/index
  - name: theme-editor-layout-memberships-feed
    route: /admin/dashboard/store-design/layout/memberships_feed
last_updated: '2026-04-24'
---

# Customize your site colors and product appearance

Your site's appearance settings let you control global colors, border styles, and product card designs. Most settings apply site-wide, but you can also override colors within individual sections without any CSS knowledge.

## Selecting your site colors

Go to [**Site Design > Style > Colors**](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?active=Colors) to change your site's four main color elements:

- **Primary**: Buttons, links, and other key UI elements
- **Background**: The site's background color
- **Text**: Body text throughout your site
- **Text Over Primary**: Text or elements that sit on top of backgrounds using the Primary color

[Image: Site color settings showing Primary, Background, Text, and Text over Primary options]

Click a color block to select a new shade or paste in a hex code. If you don't know the exact hex code, use a browser tool like the [ColorPick Eyedropper extension](https://chromewebstore.google.com/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en).

## Overriding colors in specific sections

You can override the four primary colors for individual sections on your site without any CSS knowledge. Open a section in the site designer, go to its settings, and look for the color override controls to apply a different color scheme to that section only.

This lets you create contrast between sections, such as a dark hero banner above a light product grid, without changing your site-wide colors.

## Setting background visual

Go to [**Site Design > Style > Background visual**](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?active=Background) and upload an image or pattern to use as the background for your entire site.

Choose from three display styles:

- **Static cover**: The image covers the full background without repeating.
- **Tile (pattern)**: The image tiles across the background in a repeating pattern.
- **Scrolling pattern**: The image repeats and scrolls with the page.

[Image: Background visual settings with image upload and style dropdown menu]

Most modern image file types are supported, including PNG, JPG/JPEG, GIF, SVG, and TIFF. Keep your file size under 4 MB.

## Adjusting border radius

The **Border radius** settings control how rounded or sharp edges appear on different elements:

- **Button corner radius**: Rounds or squares the edges of buttons.
- **Input corner radius**: Adjusts corner style for input fields such as donation boxes and checkout fields.
- **Image corner radius**: Changes the corners of product images from square to rounded.

## Customizing product card styles

These settings control how product listings appear on your site, including image ratios, tile sizes, hover effects, and background colors:

- **Product photography aspect ratio**: Choose between **3:4** (default) and **4:5**.
- **Product tile size**: Adjust the size of product tiles.
- **Show available color options**: Shows color swatches on product tiles so supporters can see variant options at a glance. On by default. Uncheck to hide swatches.
- **Show second photo on hover**: Shows an alternate product image when a supporter hovers over a tile. On by default. Uncheck to disable.
- **Center products horizontally**: Aligns product images at the center of their container.
- **Hide promotion badges**: Removes promotional labels from products.
- **Change product background**: Sets a custom background color behind product images.