This guide walks you through selecting your Fourthwall site color for your background, text overlays, and all other appearance site elements. The settings we'll go through in this guide will be for your whole site; however, you can also customize each section's colors & appearance within the specific section settings.
Selecting your site colors
To start customizing your site colors, go to Site designer > Style tab > Colors & Appearance. There are four color elements you can adjust:
- Primary: This color is used for buttons, links, and other key UI elements
- Background: This color is used for the background color of your website
- Text: This is used for the text throughout your site
- Text Over Primary: The Text Over Primary color is the color of text and other elements that sit on top of your backgrounds using the primary color.
Click the color block next to the element you want to change and paste in a hex code (if you aren’t sure what hex code to use, use a tool like the ColorPick Eyedropper extension for Chrome to get the exact color you want).
Color & appearance advanced settings
In the Advanced section below, you will see three sliders. Here is what they do:
- Button corner radius: Changes button edges from a right angle to more rounded corners of varying curvature.
- Input corner radius: Same as the button radius slider, except this changes the edges for the different text input boxes, such as the donation message box and customer information fields on the checkout page.
- Image corner radius: This slider changes the corners of the product images from square to round.
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.