Home 🎨 General Theme Settings

🎨 General Theme Settings

Define your brand's look and feel. Guides on managing colors, typography, animations, layout styles, and other global preferences.

• 6 articles

RTL Support

Freedom supports Right-to-Left (RTL) languages such as Arabic, Hebrew, and Persian. This feature is designed to work automatically out of the box, ensuring a native reading experience for your international customers without requiring manual configuration. Automatic Detection The theme automatically detects the active language of your store. If a customer views your site in a supported RTL language, the layout will mirror itself instantly. For this feature to work, two conditions must be met: 1. Setting Enabled: The Enable RTL support setting must be checked (this is enabled by default). 2. Active Language: The store's current language must match one of the supported RTL language codes. Supported Languages The theme recognizes the following ISO codes and will trigger RTL mode automatically: - ar (Arabic) - he (Hebrew) - fa (Persian) - ur (Urdu) - ps (Pashto) - sd (Sindhi) - yi (Yiddish) - dv (Divehi) Note: In the Theme Editor, directional settings labeled "Left" and "Right" may appear visually reversed when you are previewing the store in an RTL language.

Last updated on Jan 07, 2026

Cart Settings

Freedom allows you to choose between two distinct shopping cart experiences depending on your store's needs. The Drawer option is the recommended default; it opens a slide-out panel from the side whenever an item is added, allowing customers to manage their cart without leaving their current page. Alternatively, the Page option redirects the customer directly to the dedicated /cart page immediately after adding a product. Customizing the Cart Drawer It is important to note that while you select the cart style in the general settings, the actual content and specific features of the drawer are managed separately. To configure elements such as the Cart Note, Vendor toggle, or Discount code, you need to navigate to the Sections panel in the Theme Editor. Look for the Cart drawer section located within the Overlay group to access these detailed settings.

Last updated on Jan 14, 2026

Age Verification

If your store sells age-restricted products, you can enable a mandatory pop-up that requires visitors to confirm their age before they can browse your content. Setup and Editor Visibility To activate the feature, check Enable age verification. Since the verification popup covers the entire screen, you must also check Show age verification in theme editor to visualize and customize your changes in real-time. Important: Remember to uncheck this setting when you are finished editing so you can access other parts of the store without the popup blocking your view. Configuration and Design You can fully customize the message displayed to visitors using the Title and Text fields; the text area supports rich text formatting if you need to add links or emphasis. To ensure the popup matches your brand identity, select a Color Scheme (e.g., Scheme 1 or 2), which controls the background and text colors of the modal. Buttons and Logic The popup presents two main actions. The Confirm button grants access to the store and saves the user's confirmation via a cookie for 30 days (so they don't have to verify again). The Decline button denies access and displays the Declined message (e.g., "This website is only intended for users over 18"). If a user declines by mistake, a Back button appears below the message, allowing them to return to the initial verification screen. You can customize the labels and styles (e.g., Primary, Secondary, Link) for all three buttons.

Last updated on Jan 14, 2026

Animations

Freedom features a suite of performance-optimized animations designed to make browsing feel smooth and engaging. These effects guide customer attention and create a polished, high-end feel as users navigate your store. Card Reveal Animation Card Reveal Animation When Enable card reveal animation is active, items such as product cards, collection cards, and blog posts will glide gracefully into view as the user scrolls. The default behavior creates a subtle "Slide Up" effect. However, for specific blocks that support directional layouts (such as Media Cards), you may find options within the block settings to configure cards to slide in from the left or right side. Media Loading Animation Media Loading Animation To enhance the perceived speed of your store, the Enable media loading animation setting displays a blurred background with a subtle "shimmer" effect while high-resolution images are being fetched. This prevents the page from looking empty while loading and ensures a seamless visual experience. Content Reveal Animation Content Reveal Animation The Enable reveal animation setting acts as a "master switch" for the theme's content effects. Enabling this globally activates the system where text and interactive elements fade in and unblur as they enter the viewport. Section-Level Controls Enabling this global setting reveals animation options within individual theme sections. If disabled globally, these settings remain hidden in the editor. When active, you can manage animations on a per-section basis, allowing you to disable the effect for specific areas of your store. In supported sections, you can also enable an option to reveal words individually. Furthermore, while sections utilize the global animation speed by default, you can override this to define a custom speed for specific elements. Theme Editor Behavior Designing a store often involves making frequent changes and refreshing the preview. To speed up your workflow, we recommend checking Disable animations in theme editor. This prevents animations from playing repeatedly every time you modify a setting, allowing for a faster editing experience. This setting applies only to the Theme Editor and does not affect the live store.

Last updated on Feb 26, 2026

Typography

Freedom provides a flexible typography system based on global font settings and reusable text presets. This approach ensures visual consistency across the store while still allowing individual blocks to use custom typography when needed. Global Settings These settings define the overall typographic foundation of the theme. - Base font size: Controls the overall text scale across the store (12px–22px). All text scales proportionally based on this value. Global Fonts These fonts are used by text presets throughout the theme. - Heading font: Used for all headings and titles. - Body font: Used for paragraphs, navigation, and general content. - Accent font: Used for highlighted or decorative text elements. Text Presets Instead of configuring typography separately in every block, Freedom uses text presets. When adding a text-based block, you can select which preset the block should use. Alternatively, you can choose Custom to define typography settings specifically for that block without affecting global presets. Each preset defines the typography for a specific text role, such as: - Paragraph / Caption: Used for body text and small details. - Headings (H1–H6): Used for structural titles. - Highlight: Used for accentuated or emphasized text. Configurable Properties per Preset Each text preset can be customized globally using the following properties: - Font size: Separate values for Desktop and Mobile. - Line height: Controls vertical spacing between lines. - Letter spacing: Adjusts spacing between characters. - Font weight: Normal, Medium, Bold, or Bold on overlay (applies a heavier weight only when text is displayed over images or overlay backgrounds). - Text transform: Uppercase, Lowercase, or Capitalize. - Text wrap: Controls how text breaks across lines: - Pretty: Improves line breaks for better visual rhythm. - Balance: Distributes text more evenly across lines and helps prevent single-word lines (widows), especially in headings.

Last updated on Jan 14, 2026

Colors & Gradients

The Freedom theme uses an extended color scheme configuration that defines two color layers within each scheme. In addition to standard Background and Text colors, every color scheme also includes dedicated Overlay Background and Overlay Text colors. Overlay colors are applied automatically whenever a section or block uses an image, video, gradient, or solid color as its background. This ensures consistent text readability without requiring manual changes to the assigned color scheme. Understanding Color Schemes Each color scheme (for example, Scheme 1 or Scheme 2) includes two sets of color definitions that work together automatically depending on the background type: 1. Standard colors Used when a section or block displays content on a regular background without overlay behavior. 2. Overlay colors Applied automatically when content is displayed over an overlay background, such as images, videos, gradients, or solid overlay backgrounds. Default configuration By default, the first two color schemes share the same Standard (General) colors but differ in their Overlay colors. This provides ready-to-use contrast options for different overlay scenarios: - Scheme 1: Optimized for dark overlays (for example, light text on a dark overlay background). - Scheme 2: Optimized for light overlays (for example, dark text on a light overlay background). Configuring a Color Scheme 1. General These settings define the appearance of content when no overlay behavior is active. - Text: Primary color for headings and body text. - Background: Solid background color for sections. - Background gradient: If set, this overrides the solid background color. - Accent: Used for links and highlighted elements. - Separator: Used for borders and dividing lines. 2. Overlay These settings are applied automatically when overlay behavior is active. - Overlay Text: Text color used when content appears over an overlay background. - Overlay Background: A semi-transparent color (for example, black with 40% opacity) used to improve text contrast over images or other backgrounds. 3. Buttons Each color scheme defines styles for Primary and Secondary buttons. - Background: Button fill color. - Text: Button label color. Global Colors Global colors apply across all color schemes. - Focused element outline: The outline color shown when navigating via keyboard (accessibility). - Error indicator: The color used for form validation and error messages.

Last updated on Jan 14, 2026