Customize colors, borders, and product cards across your Fourthwall site
Your site’s appearance settings let you adjust global colors, border styles, and product card designs. These settings apply site-wide, though you can also fine-tune colors and styles within specific section settings if needed.
Selecting your site colors
To adjust your site’s colors, go to Site Design > Style > Colors. 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
Click a color block to select a new shade or paste in a hex code. If you don’t know the exact hex code, you can use a browser tool like the ColorPick Eyedropper extension.
Light and dark mode options
There’s no single toggle for “Light Mode” or “Dark Mode” across the whole Fourthwall shop. However, you can create a light or dark look for your site by customizing its colors under Site design > Style > Colors. From there, adjust your background, text, and accent colors to mimic a light or dark theme.
Note: These settings apply only to your Fourthwall shop. The main Fourthwall.com site and dashboard don’t currently support light or dark mode switching.
Setting background visual
You can upload an image to be used as the background for your entire site. From Site design > Style > Background visual, and either drop in an image or browse your files.
Choose from three background styles: Static cover (no repeat), Static pattern (repeat), or Scrolling pattern (repeat).
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
This section determines how your product listings appear on your site. It includes settings for image aspect ratios, tile sizes, hover effects, and background colors to enhance the shopping experience.
- 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: Display color variation options for products.
- Show second photo on hover: Enable an alternate product image to appear when users hover over a product.
- Center products horizontally: Align product images at the center of their container.
- Hide promotion badges: Remove promotional labels from products.
- Change product background: Customize the background color behind product images.