Customizing Appearance
Make Convertiko FAQ match your brand perfectly with presets, custom colors, and display options.
Accessing Appearance Settings
- Go to your Convertiko dashboard
- Click Appearance in the navigation
- Use the live preview to see changes in real-time
Quick Start: Presets
Choose from 6 professionally designed presets:
| Preset | Style | Best For |
|---|---|---|
| Default | Clean white with subtle shadows | Most stores |
| Modern | Minimal with soft backgrounds | Contemporary brands |
| Bold | High contrast with strong accents | Statement brands |
| Soft | Muted pastels, rounded corners | Wellness, beauty |
| Dark | Dark backgrounds, light text | Tech, gaming |
| Minimal | Border-only, no backgrounds | Luxury, editorial |
Click any preset to apply it instantly. You can then customize individual colors.
Display Formats
Choose how your FAQs are displayed:
Carousel (Default)
Questions appear in a horizontal scrollable carousel. Best for:
- Limited vertical space
- Mobile-first designs
- Highlighting top questions
Settings:
- Auto-rotate: Enable/disable automatic rotation
- Rotation speed: 3-10 seconds
- Show navigation arrows: Yes/No
- Show dots indicator: Yes/No
Grid
Questions display in a responsive grid layout. Best for:
- Showing all questions at once
- Desktop-focused layouts
- Comparison content
Settings:
- Columns: 2, 3, or 4
- Gap spacing: Tight, normal, or spacious
Accordion
Classic expandable FAQ format. Best for:
- Long answers
- Mobile optimization
- Traditional FAQ pages
Settings:
- Single open mode: Only one answer visible at a time
- Default expanded: First question open by default
- Animation speed: Fast, normal, or slow
Desktop Behavior
Control how answers open on desktop:
| Behavior | Description |
|---|---|
| Click | Users click to open answers (traditional) |
| Hover | Answers appear on hover (more interactive) |
TIP
Hover works great for quick scanning but may be annoying for detailed reading. Test with your audience.
Color Customization
Basic Colors
| Setting | Description |
|---|---|
| Background | Panel background color |
| Text | Primary text color |
| Accent | Highlights, buttons, active states |
| Border | Borders and dividers |
Advanced Colors
| Setting | Description |
|---|---|
| Question Background | Individual question card background |
| Question Text | Question text color |
| Answer Background | Answer area background |
| Answer Text | Answer text color |
| Hover State | Color when hovering over questions |
| Active State | Color when question is selected/open |
Using Theme Colors
Match your Shopify theme automatically:
- Click Detect Theme Colors
- The app analyzes your storefront
- Suggested colors appear based on your theme
- Click Apply to use them
Typography
Font Family
Choose how fonts are handled:
- Inherit (Default): Uses your theme's fonts
- System: Uses clean system fonts
- Custom: Specify any Google Font
Font Sizes
| Element | Default | Range |
|---|---|---|
| Question | 16px | 14-20px |
| Answer | 14px | 12-18px |
| Summary | 18px | 16-24px |
Font Weight
- Questions: Normal or Bold
- Answers: Normal
- Summary: Normal, Medium, or Bold
Spacing & Layout
Panel Padding
Control internal spacing:
- Compact: 12px
- Normal: 16px (default)
- Spacious: 24px
Corner Radius
Round the corners:
- Sharp: 0px
- Subtle: 4px
- Rounded: 8px (default)
- Pill: 16px
Shadow
Add depth with shadows:
- None: Flat design
- Subtle: Soft shadow
- Medium: Noticeable shadow (default)
- Strong: Prominent shadow
Mobile Settings
FAQ automatically adapts to mobile, but you can fine-tune:
Mobile Format Override
Force a specific format on mobile:
- Auto: Carousel/Grid convert to Accordion
- Keep Desktop: Same format on all devices
- Accordion: Always use Accordion on mobile
Mobile Spacing
Typically tighter spacing works better on mobile:
- Same as Desktop
- Compact: Reduced padding and margins
Animation Settings
Transitions
- None: Instant changes
- Subtle: Quick, subtle animations
- Smooth: Noticeable animations (default)
- Dramatic: Prominent animations
Entrance Animation
How the FAQ panel appears on page load:
- None: Instant
- Fade In: Opacity fade
- Slide Up: Slides from below
Live Preview
The appearance page includes a live preview that shows your changes in real-time:
- Make any changes to settings
- See the preview update immediately
- Toggle between Desktop and Mobile views
- When satisfied, click Save
CSS Variables
For advanced customization, override CSS variables in your theme:
:root {
--convertiko-bg: #ffffff;
--convertiko-text: #1a1a1a;
--convertiko-accent: #ff6b35;
--convertiko-border: #e5e5e5;
--convertiko-radius: 8px;
--convertiko-shadow: 0 2px 8px rgba(0,0,0,0.1);
}2
3
4
5
6
7
8
See CSS Variables Reference for the complete list.
Saving & Publishing
Changes are saved but not published until you click Save:
- Make your changes
- Preview on desktop and mobile
- Click Save to publish
- Changes appear immediately on your store