Smind Documentation
  • In-app
    • Getting started
    • Library
      • Product blocks
      • Sections
      • Templates
      • Themes
      • Styles
    • My library
    • Page Builder
    • Theme Builder
    • Subscription plans
    • Settings
    • Support
  • Guides
    • Color block and color scheme
    • Enabling account
    • Getting Google Maps iframe
    • Getting TikTok video URL
    • Configuring color swatches
    • Configuring sale badge
    • Configuring size chart
    • Showing social media icons
    • Deleting data
    • Moving Sections
  • Sections
    • Header
    • Product Detail
    • Product Bundles
    • Collection Page
      • Vertical Layout
      • Horizontal Layout
      • Off-Canvas Layout
      • Expand/Collapse Layout
    • Wishlist & Wishlist Page
    • Compare & Compare Page
    • Quick Add
    • Quick View
  • Cart Drawer
    • Estimate Shipping
    • Free Shipping Progress Bar
    • Complementary Product
    • Cart Notes
  • FAQs
    • Why does the section appear on all pages?
    • Why are section layouts broken?
    • Why do spaces appear when hiding the theme's header?
    • How to change default text in sections?
    • How to update sections?
    • How to set the default template for product pages?
    • Why are the sections I installed not showing up in the theme editor?
    • Integrate review scores from other apps.
  • Dev
    • Product detail event
    • Product form event
    • Cart Drawer event
Powered by GitBook
On this page
  • Color Overview
  • How To Use The Color Block?
  • How To Use The Color Scheme?
  • How to configure border and shadow colors in sections with two color schemes
  • How to use color schemes in the "[SMI] Style" section
  1. Guides

Color block and color scheme

Learn about color block, color scheme, and how to use them.

PreviousSupportNextEnabling account

Last updated 2 months ago

  • The color block is used in sections to customize the color for only that section.

  • The is a set of colors. It is created to consistently apply colors throughout different sections of the theme, allowing for quick customization of your storefront's color.

Color Overview

Below are all the colors in a color scheme that will be used for all sections of Smind.

Color name
Scope of influence

Background

Color is applied to the background of the sections.

Background gradient

A gradient of colors is applied to the background of some sections. Background gradients replace the background where possible.

Text

Color is applied to the block text and border.

Subtext

Color is applied to the subheading of sections.

Solid button background

Color is applied to the primary button background.

Solid button label

Color is applied to the primary button text.

Outline button

Color is applied to the secondary button text and border.

Shadow

Color is applied to the shadows.

For example:

How To Use The Color Block?

To add Color block to the section (skip this step if "Color block" is already in the section), click Add Block

When you use the color block, it only affects the section that contains it, and the color scheme will not work in that section.

If you change the background color in the color block, but the background of the section doesn't change, it might be because the background block is active. To apply the background color, you need to either hide or delete the background block.

How To Use The Color Scheme?

  1. To change the color scheme, click on the Theme Settings, and then click the Color tab to add or customize the color schemes

If you change the color scheme, but the color of the section doesn't change, it might be because the color block is active. To apply the color scheme, you need to either hide or delete the color block.

If you change the color scheme, but the background of the section doesn't change, it might be because the background block is active. To apply the background color, you need to either hide or delete the background block.

How to configure border and shadow colors in sections with two color schemes

For sections with two color schemes, the "Section color scheme" will be applied to both the border and shadow colors of the cards.

For example:

How to use color schemes in the "[SMI] Style" section

To understand how to use the color scheme, read .

this article
color scheme