🎯 Contextual IDs (Page-Specific)
Use when you want to style a particular screen/step without touching the rest.
Form Steps
| Selector | Description |
|---|---|
#cc-targeted-css-add-products-container | AddProductsStep main container |
#cc-targeted-css-product-search-input | Product search input field |
#cc-targeted-css-finish-products-button | Complete products selection button |
#cc-targeted-css-product-image | Product images |
#cc-targeted-css-modal-button-overlay | Gradient background behind floating buttons |
#cc-targeted-css-product-modal | Background to product modals |
#cc-targeted-css-product-grid | Container for product grids/carousels |
#cc-targeted-css-product-image | Product featured image |
#cc-targeted-css-save-product-button | Save individual product button |
#cc-targeted-css-product-search-overlay | Background to search for a specific product |
#cc-targeted-css-custom-welcome-container | CustomFormWelcomeStep container |
#cc-targeted-css-continue-button | Continue button in custom welcome |
#cc-targeted-css-verification-code | Email verification code input |
#cc-targeted-css-drop-details-container | DropDetailsStep container |
#cc-targeted-css-drop-title-input | Drop title input field |
#cc-targeted-css-drop-description-input | Drop description textarea |
#cc-targeted-css-drop-continue-button | Drop details continue button |
#cc-targeted-css-drop-step-container | DropStep container |
#cc-targeted-css-drop-title-field | Drop title field (DropStep) |
#cc-targeted-css-drop-description-field | Drop description field (DropStep) |
#cc-targeted-css-drop-finish-button | Drop completion button |
#cc-targeted-css-generic-form-step | GenericFormStep container |
#cc-targeted-css-onboarding-welcome-container | OnboardingWelcomeStep container |
#cc-targeted-css-accept-button | Onboarding accept button |
#cc-targeted-css-email-verification-code | Email verification in onboarding |
#cc-targeted-css-personal-info-container | PersonalInfoStep container |
#cc-targeted-css-first-name-input | First name input |
#cc-targeted-css-last-name-input | Last name input |
#cc-targeted-css-personal-info-continue-button | Personal info continue button |
#cc-targeted-css-submit-step-container | SubmitStep container |
#cc-targeted-css-welcome-step-container | WelcomeStep container |
#cc-targeted-css-cover-image | Cover image for invitations |
#cc-targeted-css-brand-logo | Brand image in collab highlight |
#cc-targeted-css-creator-avatar | Creator initials in collab highlight |
.cc-general-css-collab-circles | Containers for collab highlights |
#cc-targeted-css-collab-circles | Collab highlight section |
#cc-targeted-css-shop-handle-input | Shop handle input field |
#cc-targeted-css-welcome-accept-button | Welcome accept button (main) |
#cc-targeted-css-welcome-accept-alt-button | Welcome accept button (alternative) |
Navigation
| Selector | Description |
|---|---|
#cc-targeted-css-creator-navbar | Main creator navigation bar |
#cc-targeted-css-form-steps-container | Form steps page container |
Creator Home & Profile Settings
| Selector | Description |
|---|---|
#cc-targeted-css-creator-home-container | Creator home page container |
#cc-targeted-css-copy-link-button | Copy shop link button |
#cc-targeted-css-drop-card | Individual drop cards |
#cc-targeted-css-form-card | Individual form cards |
#cc-targeted-css-things-to-do-card-1 | Card for things to do 1 |
#cc-targeted-css-things-to-do-card-2 | Card for things to do 2 |
#cc-targeted-css-things-to-do-card-3 | Card for things to do 3 |
.cc-general-css-things-to-do-eyebrow | Eyebrow for things to do card |
#cc-targeted-css-edit-storefront-header | Main header |
#cc-targeted-css-edit-storefront-subtitle | Main subtitle |
#cc-targeted-css-your-forms-header | Forms header |
#cc-targeted-css-your-drops-header | Drops header |
#cc-targeted-css-things-to-do-header | Things to do header |
#cc-targeted-css-creator-update-container | Creator update page container |
#cc-targeted-css-profile-picture-upload | Profile picture uploader |
#cc-targeted-css-first-name-edit | First name edit field |
#cc-targeted-css-last-name-edit | Last name edit field |
#cc-targeted-css-shop-handle-edit | Shop handle edit field |
#cc-targeted-css-shop-title-edit | Shop title edit field |
#cc-targeted-css-shop-bio-edit | Shop bio edit field |
#cc-targeted-css-primary-color-edit | Primary color picker |
#cc-targeted-css-color-preview | Preview of color |
#cc-targeted-css-save-changes-button | Save changes button |
#cc-targeted-css-x-icon | X social icon |
#cc-targeted-css-tiktok-icon | Tiktok social icon |
#cc-targeted-css-instagram-icon | Instagram social icon |
#cc-targeted-css-youtube-icon | Youtube social icon |
#cc-targeted-css-pinterest-icon | Pinterest social icon |
🌐 General Classes (Universal)
Use when you want consistent styling across the whole dashboard.
| Class | Description |
|---|---|
.cc-general-css-header | Headers, titles, primary text |
.cc-general-css-text | Body/secondary text |
.cc-general-css-input | Inputs, textareas, form controls |
.cc-general-css-button | All buttons |
.cc-general-css-button-overlay | Transparent overlay behind buttons |
.cc-general-css-bullet-icon | All bullets/lists |
.cc-general-css-carousel-arrow | All carousels |
.cc-general-css-modal-background | Backgrounds for modals |
.cc-general-css-collab-circles | Containers for collab highlights |
.cc-general-css-section | Containers/sections/content areas |
.cc-general-css-navigation | Nav bars, back buttons, navigation controls |
.cc-general-css-screen-background | For setting global backgrounds |
💡 Usage Guidelines & Syntax
Target specific pages
Apply universal styling
Combine for precise control
Naming Convention
| Item | Pattern/Value |
|---|---|
| IDs | cc-targeted-css-[page/feature]-[element] |
| Classes | cc-general-css-[type] |
| Prefix | cc- (CreatorCommerce) |
Specificity Hierarchy
ID > Class > Element. Prefer IDs for unique, page-specific elements; classes for reusable, universal styling. Minimize!important.