CSS Variables Reference
Customize Convertiko FAQ appearance with CSS variables.
Overview
Convertiko FAQ uses CSS custom properties (variables) that you can override in your theme to customize the appearance without touching the app settings.
Add these overrides to your theme's CSS file or a <style> tag in your theme.liquid.
Core Variables
Colors
css
:root {
/* Primary colors */
--convertiko-bg: #ffffff;
--convertiko-text: #1a1a1a;
--convertiko-text-muted: #6b7280;
--convertiko-accent: #ff6b35;
--convertiko-accent-hover: #e85a2a;
/* Borders and dividers */
--convertiko-border: #e5e5e5;
--convertiko-border-hover: #d1d5db;
/* Question cards */
--convertiko-question-bg: #f9fafb;
--convertiko-question-bg-hover: #f3f4f6;
--convertiko-question-bg-active: #fff7ed;
--convertiko-question-text: #1a1a1a;
/* Answer area */
--convertiko-answer-bg: #ffffff;
--convertiko-answer-text: #4a4a4a;
/* Summary section */
--convertiko-summary-bg: transparent;
--convertiko-summary-text: #374151;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Typography
css
:root {
/* Font families */
--convertiko-font-family: inherit;
--convertiko-font-family-heading: inherit;
/* Font sizes */
--convertiko-font-size-sm: 0.875rem;
--convertiko-font-size-base: 1rem;
--convertiko-font-size-lg: 1.125rem;
--convertiko-font-size-xl: 1.25rem;
/* Question text */
--convertiko-question-size: 1rem;
--convertiko-question-weight: 600;
--convertiko-question-line-height: 1.5;
/* Answer text */
--convertiko-answer-size: 0.9375rem;
--convertiko-answer-weight: 400;
--convertiko-answer-line-height: 1.6;
/* Summary text */
--convertiko-summary-size: 1.125rem;
--convertiko-summary-weight: 400;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Spacing
css
:root {
/* Panel padding */
--convertiko-padding: 1rem;
--convertiko-padding-sm: 0.75rem;
--convertiko-padding-lg: 1.5rem;
/* Gap between elements */
--convertiko-gap: 1rem;
--convertiko-gap-sm: 0.5rem;
--convertiko-gap-lg: 1.5rem;
/* Question card padding */
--convertiko-question-padding: 1rem;
/* Answer area padding */
--convertiko-answer-padding: 1rem 1.25rem;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Layout
css
:root {
/* Border radius */
--convertiko-radius: 8px;
--convertiko-radius-sm: 4px;
--convertiko-radius-lg: 12px;
/* Shadows */
--convertiko-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
--convertiko-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--convertiko-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
/* Panel max width */
--convertiko-max-width: 100%;
/* Grid columns */
--convertiko-grid-columns: 3;
--convertiko-grid-gap: 1rem;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Animation
css
:root {
/* Transition timing */
--convertiko-transition: 200ms ease;
--convertiko-transition-fast: 150ms ease;
--convertiko-transition-slow: 300ms ease;
/* Animation curves */
--convertiko-ease: cubic-bezier(0.4, 0, 0.2, 1);
--convertiko-ease-in: cubic-bezier(0.4, 0, 1, 1);
--convertiko-ease-out: cubic-bezier(0, 0, 0.2, 1);
}1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
Component-Specific Variables
Carousel
css
:root {
/* Navigation arrows */
--convertiko-arrow-size: 2rem;
--convertiko-arrow-bg: rgba(255, 255, 255, 0.9);
--convertiko-arrow-color: #1a1a1a;
--convertiko-arrow-hover-bg: #ffffff;
/* Dot indicators */
--convertiko-dot-size: 8px;
--convertiko-dot-color: #d1d5db;
--convertiko-dot-active-color: var(--convertiko-accent);
--convertiko-dot-gap: 0.5rem;
}1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
Accordion
css
:root {
/* Expand/collapse icon */
--convertiko-icon-size: 1.25rem;
--convertiko-icon-color: #6b7280;
--convertiko-icon-active-color: var(--convertiko-accent);
/* Divider between items */
--convertiko-divider-color: var(--convertiko-border);
--convertiko-divider-width: 1px;
}1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
Grid
css
:root {
/* Responsive columns */
--convertiko-grid-columns-sm: 1;
--convertiko-grid-columns-md: 2;
--convertiko-grid-columns-lg: 3;
/* Card aspect ratio (optional) */
--convertiko-card-min-height: auto;
}1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Dark Mode
Support dark mode with media queries:
css
@media (prefers-color-scheme: dark) {
:root {
--convertiko-bg: #1f2937;
--convertiko-text: #f9fafb;
--convertiko-text-muted: #9ca3af;
--convertiko-border: #374151;
--convertiko-question-bg: #111827;
--convertiko-question-bg-hover: #1f2937;
--convertiko-answer-bg: #111827;
--convertiko-answer-text: #d1d5db;
}
}1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
Or match your theme's dark mode class:
css
.dark-mode #convertiko-faq,
[data-theme="dark"] #convertiko-faq {
--convertiko-bg: #1f2937;
--convertiko-text: #f9fafb;
/* ... other dark mode values */
}1
2
3
4
5
6
2
3
4
5
6
Theme-Specific Examples
Match Shopify Dawn Theme
css
:root {
--convertiko-font-family: var(--font-body-family);
--convertiko-text: rgb(var(--color-foreground));
--convertiko-bg: rgb(var(--color-background));
--convertiko-border: rgba(var(--color-foreground), 0.1);
--convertiko-accent: rgb(var(--color-button));
}1
2
3
4
5
6
7
2
3
4
5
6
7
Match Shopify Sense Theme
css
:root {
--convertiko-font-family: var(--font-body-family);
--convertiko-radius: 0;
--convertiko-shadow: none;
--convertiko-border: rgba(var(--color-base-text), 0.1);
}1
2
3
4
5
6
2
3
4
5
6
Minimal Style Override
css
:root {
--convertiko-bg: transparent;
--convertiko-question-bg: transparent;
--convertiko-shadow: none;
--convertiko-border: currentColor;
--convertiko-radius: 0;
}1
2
3
4
5
6
7
2
3
4
5
6
7
Responsive Overrides
Target different screen sizes:
css
/* Mobile */
@media (max-width: 640px) {
:root {
--convertiko-padding: 0.75rem;
--convertiko-question-size: 0.9375rem;
--convertiko-grid-columns: 1;
}
}
/* Tablet */
@media (min-width: 641px) and (max-width: 1024px) {
:root {
--convertiko-grid-columns: 2;
}
}
/* Desktop */
@media (min-width: 1025px) {
:root {
--convertiko-grid-columns: 3;
--convertiko-max-width: 1200px;
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Debugging
Use browser DevTools to:
- Inspect the
#convertiko-faqelement - See computed CSS variable values
- Test overrides in real-time
All Convertiko FAQ elements have class names prefixed with convertiko- for easy targeting:
css
.convertiko-panel { }
.convertiko-question { }
.convertiko-answer { }
.convertiko-summary { }
.convertiko-carousel { }
.convertiko-grid { }
.convertiko-accordion { }1
2
3
4
5
6
7
2
3
4
5
6
7
Priority
CSS variables follow standard cascade rules:
- Theme defaults (lowest)
- App settings from dashboard
- Your CSS overrides
- Inline styles (highest)
To ensure your overrides work, use :root or add !important if needed:
css
:root {
--convertiko-accent: #your-color !important;
}1
2
3
2
3