Customise your colors in Flatsome Theme

Learn how to personalize your Flatsome theme with your brand’s color palette! Whether you’re just starting out or refining your site’s look, this guide will show you how to modify primary, secondary, and alert colors to enhance your design and make it truly yours.

Step-by-Step Guide

Step 1: Choose a Flatsome Template

1. Select a Template: Begin by picking one of Flatsome’s pre-made templates. This offers a professional layout to start with.
2. Preview Colors: Flatsome’s templates often include vibrant color schemes designed for e-commerce, with emphasis on eye-catching accents for buttons and highlights.

Step 2: Open the Flatsome Theme Options

1. Go to Flatsome Theme Options: Navigate to Style > Colors within the Flatsome theme options. This is where you’ll set your main colors.
2. Primary & Secondary Colors: Set your primary color, which will be used for most elements, and a secondary color for variety.
3. Alert & Success Colors: Assign an alert color, typically a bright red or pink, for warnings or sales. The success color (often green) can be used for actions like “Add to Cart” buttons.

Step 3: Experiment with Color Palettes in Figma

1. Create a Palette: Before setting colors in Flatsome, preview your palette in Figma. This allows you to test how the colors look together.
2. Apply Palette to Flatsome: Once satisfied, move the colors to your Flatsome theme options.

Figma color palette

Step 4: Customize Text and Button Colors

1. Use the UX Builder: Open the UX Builder to apply your colors directly to text and buttons.
2. Text Colors: Select any text box, go to Format > Text Color, and pick from your set primary or secondary colors. This keeps your brand colors consistent across the site.
3. Button Colors: Customize buttons by selecting from primary, secondary, or alert colors to keep call-to-action buttons aligned with your brand style.

Step 5: Modify Widget and Link Colors

1. Set Widget Colors: Under Theme Options, assign a color to widget links for sidebars or other specific sections.
2. Update Link Color for Visibility: It’s often helpful to set a distinct color for links, making them easy for visitors to recognize as clickable.

Step 6: Set Shop-Specific Colors (For WooCommerce)

1. Add to Cart Button: For e-commerce sites, set the “Add to Cart” button to a high-contrast color, like green or blue, to increase conversion.
2. Sale Badges and Bubbles: Assign a bright color to sale or promotion bubbles to draw attention to deals.

Step 7: Customize Additional Elements

1. Set Review Star Colors: Configure the color of product review stars to match your site’s design.
2. Other Options: Customize other elements, such as divider colors or headline colors, to match your brand palette.

Step 8: Apply Custom CSS for Unique Colors

1. Add Custom CSS: If you want to use a color not in your main palette, use custom CSS.
   • Go to Flatsome Theme Options > Advanced > Custom CSS.
   • Add your CSS code with the desired background color.
   • Save changes to apply your custom color site-wide.

By customizing your Flatsome theme colors, you’re creating a site that feels unique and aligned with your brand’s identity. With the right primary, secondary, and accent colors, you can enhance navigation, encourage engagement, and give your e-commerce elements a consistent look.

Remember to experiment with your color choices and, if needed, leverage tools like Figma for previewing. Don’t forget, setting these colors in your theme options means changes will automatically apply across your site, keeping everything cohesive and easy to manage. Enjoy building a site that looks great and is easy to update!