Customizing Appearance

Make Convertiko FAQ match your brand perfectly with presets, custom colors, and display options.

Accessing Appearance Settings

1. Go to your Convertiko dashboard
2. Click Appearance in the navigation
3. 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:

1. Click Detect Theme Colors
2. The app analyzes your storefront
3. Suggested colors appear based on your theme
4. 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:

1. Make any changes to settings
2. See the preview update immediately
3. Toggle between Desktop and Mobile views
4. 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);
}

See CSS Variables Reference for the complete list.

Saving & Publishing

Changes are saved but not published until you click Save:

1. Make your changes
2. Preview on desktop and mobile
3. Click Save to publish
4. Changes appear immediately on your store

Next Steps

• CSS Variables Reference
• Analytics
• Troubleshooting