Hampton Bay Theme Docs – Your Path to E-Commerce!
Help CenterCompliance & LegalContact Us
  • Hampton Bay Theme Configuration
  • Overview
    • Our key features
    • Setting up the Hampton BayTheme
  • Theme
    • Header and Footer setup
      • Header
      • Announcement bar
      • Footer
    • Languages & Currencies
    • Theme customization options
      • Color Scheme
      • Typography
      • Inputs
      • Social media
      • Cart Drawer
      • Brand Information
      • Search Drawer
    • Sections
      • Banner Slider
      • Collage
      • Collapsible Content
      • Collections List
      • Collections Tab
      • Contact Form
      • Featured Collection
      • Featured Product
      • RichText
      • Multirow
      • Video Section
      • Featured Blog
      • Custom Liquid
      • Page Section
      • Image with Text
      • Multicolumn
      • Shop the Look Section
    • Cart
    • Pages
      • Collection
      • Product
      • About Us
      • Contact Us
Powered by GitBook
On this page
  1. Theme
  2. Theme customization options

Color Scheme

Transform your store's style: Set the perfect color scheme in your shopify theme

PreviousTheme customization optionsNextTypography

Last updated 4 months ago

Follow these steps to set or customize the color scheme for your Shopify theme:

  1. Access the theme Editor

    1. Log in to your Shopify Admin.

    2. Navigate to Online Store > Themes.

    3. Locate the theme you want to customize, and click Customize.

  2. Open the theme Settings

    1. In the theme editor, look for the Theme Settings option in the left-hand sidebar.

    2. Select Colors to view the available customization options.

  3. Customize your colors

    1. Primary colors Set the main colors used for headers, buttons, and key elements.

    2. Secondary colors Adjust complementary colors for backgrounds, text, or accents.

    3. Background and Text colors Choose colors for the body background, section backgrounds, and primary text.

    4. Link and Hover colors Assign colors for links and how they appear when hovered over.

  4. Use consistent branding

    1. Match the colors to your brand’s logo and overall style.

    2. Ensure sufficient contrast between text and background for readability.

  5. Preview changes

    1. Use the preview window to see how the new color scheme looks across different sections of your store.

    2. Test the color scheme on both desktop and mobile views to ensure consistency.

  6. Save your changes

    1. Once satisfied, click Save in the top right corner to apply the new color scheme to your theme.

Tips for choosing a color scheme

  • Use no more than 3-4 main colors to keep the design clean and cohesive.

  • Follow accessibility guidelines for contrast to ensure readability for all users.

  • Test the colors with your store's images and layout to create a harmonious look.