---
articleType: Tutorial
categories:
- Store Design
last_updated: '2026-05-20'
primaryTopic: customize-site-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
shortDescription: Customize your Fourthwall site colors, upload background patterns, override section colors, and adjust product card appearance
tags:
- customizing
- site-design
- colors-and-appearance
- branding
- product-display
- background-pattern
- per-section-colors
title: Customize your site colors and product appearance
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
---

# 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 adjust your site's color scheme. You can change four main 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).

[Video: Adjust colors]

## 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. This setting only works with product photos that have a transparent background, not with standard Fourthwall mockup images. You can add transparency in the product designer (preview mode), but it's limited to select products. The background baked into a mockup image itself cannot be changed.