Shella Shopify Theme
  • User Manual
  • Shopify help
  • Get Started
    • How to create a new Template
    • How to add and edit a Page
    • How to build Metaobjects
    • How to find a handle
    • Filters logic
    • Pre-Order
  • Product variants
  • Header
    • Theme Blocks
  • Footer
    • Theme Blocks
  • Metafields
    • How to create custom filters
  • Theme Sections
    • Builder
      • Promo box (Banner)
      • Slick Slider
      • Revolution Slider
      • Instagram
      • Product column
      • Custom HTML
      • Space for vertical menu
    • Spacer
    • Article carousel
    • Brand carousel
    • Product carousel
    • Review carousel
    • Contact form
    • FAQs
    • Gallery
    • Information line
    • Search form
    • Subscription form
    • Brands
    • Collections
    • Lookbook
    • One product
    • Collection page heading
      • Theme Blocks
    • Collection banner builder
      • Theme Blocks
    • Ticker
  • Products
    • Product page
      • Theme blocks
    • Related product carousel
    • Usage information sidebar
  • Collections
    • Product grid
      • Current filters
      • Collections
      • Filters
      • Filter settings
      • Tags
      • Products
      • Custom HTML
      • Subscription
      • Promo box (Banner)
  • Collections list
  • Page categories
    • Policy page
    • Lookbook
      • Page
    • Gallery
      • Page
    • FAQs
      • Page
    • Contact
      • Page
    • Brands
      • Page
    • Password
      • Social media
    • Search
      • Current filters
      • Filters
      • Filter settings
      • Products
      • Custom HTML
      • Subscription
      • Promo box (Banner)
    • Quick view
  • Blogs
    • Theme Blocks
  • Blog posts
    • Theme Blocks
  • Theme settings
    • Quick Start
    • License
    • Logo and Favicon
    • Layout
    • Colors
    • Typography
    • Collection and Search page
    • Product -> General
    • Product -> Variants
    • Product -> Collection Page
    • Product Page and Quick View
    • Search
    • Currency
    • Cart
    • Wishlist and Compare
    • Payments
    • Social Media
    • News Subscription
    • Blog and Article Pages
    • Account
    • Reviews
    • Services
    • Apps and Language
    • Button, Input and Promo Box
    • Notifications
    • Pre-loader
    • Animations
    • Developer
    • Custom CSS
  • Theme features
  • Back to Help Center
Powered by GitBook
On this page
  • Global
  • Primary & Body background
  • Text & Heading
  • Link
  • Popup background
  • Buttons
  • Default button
  • Secondary button
  • Clean, invert buttons
  • Configure button type
  • Paint Palette
  • Base
  • Base background
  • Text
  • Additional background
  • Border
  • Icon
  • Success, In stock & Error, Sale, & Label 'New' & Label 'Hot'
  • Dynamic checkout button
  • Label 'Pre-order'
  • Input background

Was this helpful?

  1. Theme settings

Colors

In this section, you can change colors at everything on your store page.

PreviousLayoutNextTypography

Last updated 2 years ago

Was this helpful?

Theme settings -> Colors

Global

Primary & Body background

Home page

Product page

Collection page

Text & Heading

Text (red) - for placeholder, drop-down inputs, info messages, etc.

Headings (green) - for block headings.

Home page

Product page (Product description)

Collection page

Blog post

Link

Popup background

Buttons

Here you may configure the colors for buttons: Add To Cart button, Wishlist button and Compare button.

Please note, you should change the button type first. The theme includes 5 button types: “Auto”, “Default”, “Invert”, “Secondary”, “Clean”.

Default button

Here you may configure the background, border, and text colors. For default and hover (active) button states.

The button type depends on the selected skin. Here are examples of default buttons:

Secondary button

You may configure the colors for the second button type. For the default button state (like in the previous image) and hover button state.

Clean, invert buttons

Clean and invert are other types of buttons, you may configure colors in the same way as for default & secondary buttons.

Configure button type

You may change the button type for:

  • Add to cart button @ collection page

  • Add to cart button @ product page

  • Wishlist button @ product page

  • Compare button @ product page

Paint Palette

Here you can change the colors for the base, base background, text, additional background, borders, icons, and diverse labels, such as success or “In stock”, error or “Sale”, “New”, “Hot”, and for the dynamic checkout button.

Base

Base background

Text

Additional background

This option applies to headers with two backgrounds:

Border

Icon

Success, In stock & Error, Sale, & Label 'New' & Label 'Hot'

Dynamic checkout button

Label 'Pre-order'

Input background

Please note, in order to change the background color of the dynamic checkout button, you need to enable the “Custom style for dynamic checkout button” option in Theme settings -> Product page and Quick view -> Product page only. You can read more details .

here