Themes FAQ

#How do I change my site's colors?

Navigate to Template > Theme Configuration and click the Style tab. Under Theme Colors, you will find fields for your Primary Color and Secondary Color. Click the color swatch and use the color picker (or enter a hex code) to set your brand colors. Click Save when done.

Your primary color appears on buttons, links, and key accent elements throughout the site. The secondary color is used for supporting design elements.

#How do I change my fonts?

1. Go to Template > Theme Configuration and click the Style tab.
2. Scroll to Theme Fonts.
3. Click Add Font to choose from the supported font library.
4. Assign fonts to Headings and Body text as needed.
5. Click Save.

Limit your site to two font families (one for headings, one for body) for a clean, professional appearance.

#How do I upload my logo?

Navigate to Template > Theme Configuration > Style > Site Images. You will find upload slots for:

• Mobile Logo — Shown in the mobile header
• Email Logo — Shown in emails sent from your site

For the desktop header logo, edit it directly in Template > Theme Sections > Header.

#What size should my logo be?

• Desktop header logo: SVG preferred; PNG with transparent background as fallback
• Mobile logo: 300px wide recommended (JPG, PNG, or WebP)
• Email logo: 300–600px wide (PNG or JPG; avoid transparent backgrounds for email compatibility)
• Favicon: 48×48px minimum (SVG or PNG)
• Apple Touch Icon: 180×180px minimum (PNG)
• Open Graph / Social image: 1200×630px (JPG or PNG)

#How do I edit the header or footer?

1. Navigate to Template > Theme Sections.
2. Click Header or Footer.
3. Edit the content in the editor.
4. Click Save.

Changes apply site-wide. If you need a unique header just for your homepage (or another specific page), see "How do I create a custom section for one page?" below.

#How do I edit the mobile sticky bar?

The mobile sticky bar is the fixed strip that appears at the bottom of the screen on mobile devices. To edit it:

1. Navigate to Template > Theme Sections.
2. Click Mobile Sticky Content.
3. Edit or replace the HTML with your preferred layout (e.g., a two-button bar with "Directions" and "Call Us", or an icon navigation bar).
4. Update any links, phone numbers, and URLs to match your business.
5. Click Save.

#How do I add a custom header layout for just one page?

1. Create a new section in Template > Theme Sections (click New Section and build your content).
2. Go to Template > Theme Configuration > Layouts and create a new layout that includes your new section.
3. Open the page you want to use this layout for.
4. In the page settings, find the Layout dropdown and select your new layout.
5. Save the page.

#How do I add a page layout?

1. Navigate to Template > Theme Configuration.
2. Click the Layouts tab.
3. Click Create Layout.
4. Enter a Display Name and unique File Name.
5. Add slots: Content is required; other slots (Header, Above Content, Below Content, Footer) are optional.
6. Click Save.

#How do I set a default layout for a content type?

1. Navigate to Template > Theme Configuration.
2. Click the Default Page Layouts tab.
3. Choose the content type (e.g., Blog Pages) and select a layout from the dropdown.
4. Click Save.

Individual pages can still override the default through their own layout setting.

#How do I add global JavaScript to my site?

1. Go to Template > Theme Configuration and click the JavaScript tab.
2. Click Add Script.
3. Enter a name, choose head or footer placement, and paste your script content.
4. Wrap script content in standard <script> tags.
5. Click Save.

Scripts can be toggled on/off without deleting them.

#How do I design images and banners for my site?

See the full Design Guide for detailed specifications. Key recommendations:

• Full-width banners: 1920px wide, under 200KB
• Card images: 4:3 aspect ratio, 600–800px wide
• Hero images: 16:9 aspect ratio; keep under 2MB
• Video backgrounds: 16:9 ratio, 8–15MB after compression, MP4 format

#What are the recommended canvas dimensions for designing my theme?

Use 1600–1920px wide artboards. A 1920px canvas is preferred for full-width imagery; 1600px is suitable for contained layouts. Set a maximum content width of 1440px for readability.

For responsive design, produce layouts at these widths:

• Mobile: 375–390px
• Tablet: 768–834px
• Desktop: 1280–1440px
• Wide: 1600–1920px

#What accessibility standards should my design meet?

CMS Max is built with accessibility in mind. When designing:

• Body text contrast: minimum 4.5:1 ratio against its background (WCAG AA)
• Large text and headings: minimum 3:1 ratio
• All buttons and links must have clear focus and hover states
• Minimum touch target size on mobile: 44×44px

#How do I reset a theme file to its default?

In Template > Theme Files, find the file you modified. Click the three-dot menu next to the file and choose Reset to Default, or use the reset button while editing. This permanently removes your customizations for that file and restores the original version.