Sophia Pro

Thank you for choosing Sophia Pro for your site. This guide will walk you through the steps to install and customize the theme, ensuring a smooth and successful setup.

sophia wordpress theme screenshot

Getting Support

โ†‘ Back to top

Need help? Our support team is available through the support portal with responses typically within 24 hours on business days. On weekends or holidays, responses may take longer, but we will assist you as soon as possible. Feel free to reach out with any questions or issues, weโ€™re always ready to help!

Installation

โ†‘ Back to top

To start using a product from WooCommerce.com, you can use the โ€œAdd to storeโ€ functionality on the order confirmation page or the My subscriptions section in your account.

  1. Navigate to My subscriptions.
  2. Find the Add to store button next to the product youโ€™re planning to install.
  3. Follow the instructions on the screen, and the product will be automatically added to your store.

Alternative options and more information at:
Managing WooCommerce.com subscriptions.

Adding a WooCommerce.com subscription to your store

Demo Content Import

โ†‘ Back to top

Follow these simple steps to recreate the Sophia demo layout.

  1. Go toย Appearance > Demo Importย in your WP Admin dashboard to access this page.
  2. Install WooCommerceย If you want to use the demo products, install WooCommerce before importing.
  3. Download the demo content fileย Click theย Download XML Fileย button and save this file to your computer โ€“ youโ€™ll upload it in step 4.
  4. Install WordPress Importer pluginย Click theย Install Pluginย button. This official WordPress plugin handles the import process safely. Delete it after the demo import is complete.
  5. Import the demo contentย Clickย Go to WordPress Importer. Upload the XML file you downloaded in step 2. Make sure to check โ€œDownload and import file attachmentsโ€ to get all images.

Child Theme Information
A child theme is not required for Sophia as it is a block theme.

Block themes store customizations in the database rather than in theme files, so your customizations will be preserved when the theme updates.

All template modifications made through the Site Editor are automatically protected from theme updates.

Updating Your Theme

โ†‘ Back to top

To receive notifications for new versions and streamline the update process, we recommend staying current with the latest theme features and security improvements through your account dashboard.

Theme Customization

โ†‘ Back to top

The Sophia theme is built for effortless customization. Open the Site Editor to adjust colors, fonts, and layouts, or mix and match pre-designed patterns to create a unique look that reflects your brand.

Using the WordPress Block Editor

โ†‘ Back to top

Sophia is a block-based theme designed to work seamlessly with the WordPress Block Editor (Gutenberg). It offers a smooth and intuitive experience without the need for third-party page builders. The Block Editor allows you to create and customize content easily using blocks for text, images, videos, and more.

If you’re new to the WordPress Block Editor, you can explore its basic features and usage in the official WordPress Block Editor Documentation.

Homepage & Blog Setup

โ†‘ Back to top

Homepage Configuration

Your theme includes a dedicated front-page.html block template that automatically displays as your siteโ€™s homepage.

No configuration in Settings โ†’ Reading is required.

To customize your homepage content:

  1. Go to Appearance โ†’ Editor (Site Editor).
  2. In the left panel, open Templates โ†’ Front Page.
  3. Edit the layout and content using the block editor.
  4. Click Save to apply your changes.

Your customized Front Page will appear automatically on your siteโ€™s homepage, regardless of your Reading settings.

Video Tutorial: Customizing Your Homepage Layout

Blog Page Setup

If you want a separate page to display your blog posts, you have two options:

Option 1: Use the Blog Template (Recommended)

  1. Go to Pages โ†’ Add New.
  2. Name your page Blog (or any title you prefer).
  3. In the Page Settings sidebar, open the Template dropdown.
  4. Select Blog Left Sidebar, Blog Right Sidebar, or Default Blog (depending on your themeโ€™s templates).
  5. Click Publish.

Your blog posts will now display automatically using the selected blog template โ€” no Reading settings required.

Video Tutorial: Setting Up Your Blog Page

Option 2: Assign a Blog Page Using Reading Settings

If you prefer to use WordPressโ€™s classic Reading Settings:

  1. Go to Settings โ†’ Reading.
  2. Under Your homepage displays, select A static page.
  3. Leave the Homepage field blank (your themeโ€™s front-page.html handles this automatically).
  4. From the Posts page dropdown, choose your Blog page.
  5. Click Save Changes.

Your blog posts will now appear on the Blog page using your themeโ€™s home.html or index.html template.

Important Notes

  • Block themes automatically handle front pages via templates โ€” manual Reading settings are optional.
  • The Front Page template takes priority over other templates for your homepage.
  • The Posts Page (Blog) will use the first matching template: home.html, index.html, or a custom page template if assigned.

Site Logo Setup

โ†‘ Back to top

Follow these steps to set up your site logo using the Site Editor:

  1. Open the Site Editor: While viewing any page on your site, ensure you are logged in with the admin bar enabled. In the admin bar at the top of the screen, click the Edit Site button.
  2. Locate the Site Logo Block: Once in the Site Editor, find the Site Logo block within the template you’re editing. This block is usually located in the header area.
  3. Upload or Select Your Logo: Click on the Site Logo block to upload a new logo or select one from your media library. Ensure the logo is appropriately sized and formatted.
  4. Save Your Changes: After setting up your logo, click Save in the top-right corner to apply the changes across your site.

Fallback Logo Feature
Sophia includes an intelligent fallback logo system that automatically displays a default Sophia logo when no custom logo is uploaded. This ensures your site always looks professional, even during initial setup.

How it works:

Automatic Display: If no custom logo is set, the theme automatically shows a styled fallback logo

Smart Detection: The system checks if a custom logo exists before showing the fallback

Seamless Integration: The fallback logo uses the same styling and positioning as custom logos

Easy Replacement: Once you upload your own logo, the fallback automatically disappears

To replace the fallback logo, simply upload your own logo following the steps above, and your custom logo will automatically replace the fallback logo across your entire site.

Assigning a Page Template

โ†‘ Back to top

Video Tutorial: Assigning a Page Template (About Page Example)

In this tutorial, weโ€™ll walk you through two different methods for building an About Us page, one quick method using Starter Patterns, and a second approach using the WordPress Patterns library.

Important:ย To avoid duplicate titles, we recommend selecting the โ€œNo Titleโ€ page template. This removes the default WordPress title that appears above your content, ensuring only the title from your page template shows.

Navigation Setup

โ†‘ Back to top

Video Tutorial: Editing Your Header and Footer Navigation

Setting up your site’s navigation is essential for helping visitors navigate through your content:

  1. Locate the Navigation Block: Within the Site Editor, find the Navigation block, usually located in the header area of your template.
  2. Create a New Menu: Click on the Create a new menu link within the Navigation block.
  3. Add Menu Items: Begin adding menu items by clicking the + icon. You can add links to pages, posts, categories, or custom URLs.
  4. Save Your Changes: Once you’ve finished, click Save in the top-right corner to apply the changes to your site.

Site Header Setup

โ†‘ Back to top

To update or change your site’s header template:

  1. Open the List View Panel: Ensure you are in the Site Editor. Open the List View panel on the left side of the editor.
  2. Select the Header Block: In the List View panel, locate and click the header block.
  3. Choose a New Header Template: In the Block settings panel, expand the Design option group to reveal available templates and choose the template you want to apply.
  4. Save Your Changes: Click Save in the top-right corner to apply the changes.

Accessing The Site Editor

โ†‘ Back to top

The Site Editor is your main tool for customizing your Sophia theme. Here’s how to access it:

  • From the Admin Bar: While viewing any page on your site, click the Edit Site button in the admin bar at the top.
  • From the Dashboard: Navigate to Appearance > Editor in your WordPress admin dashboard.
  • Direct Access: You can also access specific templates by going to Appearance > Editor > Templates and selecting the template you want to edit.

Returning To The Dashboard

โ†‘ Back to top

To return to your store’s WP Admin dashboard from the Site Editor:

  • Click the WordPress logo in the top-left corner of the Site Editor.
  • Alternatively, click the Back to Dashboard link if available.
  • You can also navigate directly by typing your site URL followed by /wp-admin/ in your browser.

Accessing the Templates

โ†‘ Back to top

Templates control the layout and design of different page types on your site:

  1. Open Site Editor: Navigate to Appearance > Editor.
  2. Browse Templates: Click on Templates in the left sidebar to see all available templates.
  3. Select a Template: Click on any template to edit it (Homepage, Single Post, Page, etc.).
  4. Preview Templates: Hover over templates to see a preview before editing.

Editing the Front Page

โ†‘ Back to top

Customize your homepage to make a great first impression:

  1. Access Front Page Template: Go to Appearance > Editor > Templates > Front Page.
  2. Edit Content: Click on any block to edit text, images, or other content.
  3. Add New Blocks: Use the + button to add new content blocks.
  4. Rearrange Sections: Drag and drop blocks to reorder sections.
  5. Save Changes: Click Save to apply your changes.

Accessing the Template Parts

โ†‘ Back to top

Template parts are reusable components like headers and footers:

  1. Open Site Editor: Navigate to Appearance > Editor.
  2. Browse Template Parts: Click on Template Parts in the left sidebar.
  3. Edit Parts: Select Header, Footer, or other template parts to customize them.
  4. Global Changes: Changes to template parts apply across your entire site.

Editing The Header

โ†‘ Back to top

Customize your site’s header area:

  1. Access Header: Go to Appearance > Editor > Template Parts > Header.
  2. Edit Logo: Click on the site logo to upload your own logo.
  3. Modify Navigation: Edit menu items, add new pages, or change menu styling.
  4. Adjust Layout: Change header layout, colors, or spacing.
  5. Save Changes: Click Save to apply changes site-wide.

Editing Footer

โ†‘ Back to top

Customize your site’s footer area:

  1. Access Footer: Go to Appearance > Editor > Template Parts > Footer.
  2. Edit Content: Modify footer text, copyright information, or contact details.
  3. Add Elements: Include social media icons, additional menus, or widgets.
  4. Style Footer: Adjust colors, typography, and layout.
  5. Save Changes: Click Save to apply changes across your site.

How to add custom CSS

โ†‘ Back to top

Templates Customization

โ†‘ Back to top

Customize Blog Pages

โ†‘ Back to top

Blog Index Page

  1. Open the Site Editor: While viewing the blog index page, click the Edit Site button in the admin bar.
  2. Alternatively: Navigate to Appearance > Editor > Templates > Blog Home.
  3. Choose Layout: Select from available blog layout templates.
  4. Customize Display: Adjust post excerpts, featured images, and metadata display.
  5. Save Changes: Click Save to apply your blog customizations.

Single Blog Posts

  1. Open the Site Editor: While viewing a blog post, click the Edit Site button.
  2. Alternatively: Navigate to Appearance > Editor > Templates > Single Post.
  3. Customize Layout: Adjust post title, content, author info, and related posts.
  4. Add Elements: Include social sharing, comments, or newsletter signup.
  5. Save Changes: Click Save to apply to all blog posts.

Blog Archive Pages

  1. Access Archives: Navigate to Appearance > Editor > Templates > Archive.
  2. Customize Layout: Adjust how category and tag pages display posts.
  3. Add Descriptions: Include category descriptions or custom content.
  4. Save Changes: Click Save to apply archive customizations.

Customize Regular Pages

โ†‘ Back to top

Standard Pages

  1. Edit Page Template: Navigate to Appearance > Editor > Templates > Page.
  2. Customize Layout: Adjust page title, content area, and sidebar options.
  3. Add Elements: Include contact forms, testimonials, or call-to-action sections.
  4. Save Changes: Click Save to apply to all standard pages.

Specific Page Customization

  1. Edit Individual Pages: Go to Pages > All Pages and select a specific page.
  2. Change Template: In the page editor, select Template and choose a different template.
  3. Custom Content: Add unique content blocks specific to that page.
  4. Update: Click Update to save page-specific changes.

Using Different Templates for Specific Pages

โ†‘ Back to top

Create unique layouts for different types of content:

Create Custom Templates

  1. Open Site Editor: Navigate to Appearance > Editor.
  2. Add Template: Click Templates > Add New Template.
  3. Choose Type: Select Custom Template and give it a descriptive name.
  4. Design Layout: Add blocks and customize the layout for specific needs.
  5. Save Template: Click Save to create your custom template.

Assign Templates to Pages

  1. Edit Page: Go to Pages > All Pages and select the page.
  2. Template Settings: In the page editor, find the Template option.
  3. Select Template: Choose your custom template from the dropdown.
  4. Update Page: Click Update to apply the new template.

Pre-built Custom Templates

โ†‘ Back to top

Sophia includes specialized templates for different business needs:

  • Service Page: Optimized for showcasing individual services with pricing and booking options
  • About Page: Perfect for team introductions and company story presentations
  • Contact Page: Includes contact forms, location maps, and business information
  • Landing Page: Conversion-focused design without header and footer distractions
  • Portfolio Page: Designed for showcasing work samples and case studies
  • Testimonials Page: Dedicated layout for customer reviews and success stories

Using Different Templates for Specific Posts/Pages

โ†‘ Back to top

Assign Templates to Blog Posts

  • Edit Post: Go to Posts > All Posts and select the post
  • Template Settings: In the post editor, find the Template option
  • Select Template: Choose your custom template from the dropdown
  • Update Post: Click Update to apply the new template

Video Tutorial: Resetting a Page Template to Theme Default

WooCommerce Setup

โ†‘ Back to top

Shop Page Customization

โ†‘ Back to top

If you’re selling products or services, customize your shop page:

  1. Access Shop Template: Navigate to Appearance > Editor > Templates > Product Catalog.
  2. Customize Layout: Adjust product grid, filters, and sorting options.
  3. Add Content: Include shop banners, promotional sections, or featured products.
  4. Style Products: Customize product card design and hover effects.
  5. Save Changes: Click Save to apply shop customizations.

Product Pages

โ†‘ Back to top

Video Tutorial: Customizing Your Product Detail Page Template

Single Product Pages

  1. Edit Product Template: Navigate to Appearance > Editor > Templates > Single Product.
  2. Customize Layout: Adjust product images, descriptions, and purchase buttons.
  3. Add Elements: Include related products, reviews, or additional information tabs.
  4. Save Changes: Apply to all product pages.

Product Category Pages

  1. Access Category Template: Navigate to Appearance > Editor > Templates > Product Category.
  2. Customize Display: Adjust how products are shown within categories.
  3. Add Category Info: Include category descriptions and promotional content.
  4. Save Changes: Apply to all category pages.

Blocks

โ†‘ Back to top

Adding Block In The Block Editor (Page/Post)

โ†‘ Back to top

Learn how to add and customize blocks in your content:

  1. Open Editor: Edit any page or post to access the block editor.
  2. Add Blocks: Click the + button to browse available blocks.
  3. Search Blocks: Use the search function to find specific block types.
  4. Insert Blocks: Click on any block to add it to your content.
  5. Customize Blocks: Use the block settings panel to adjust appearance and functionality.

Common Block Types

  • Paragraph: For text content
  • Heading: For titles and headings
  • Image: For photos and graphics
  • Button: For calls-to-action
  • Columns: For multi-column layouts
  • Group: For organizing related content

Navigation Block (Site Navigation Menu)

โ†‘ Back to top

Create and customize your site’s main navigation:

  1. Add Navigation Block: In the Site Editor, add a Navigation block to your header.
  2. Create Menu: Click Create navigation menu to start building your menu.
  3. Add Menu Items: Use the + button to add pages, posts, or custom links.
  4. Customize Appearance: Adjust menu styling, colors, and layout.
  5. Save Menu: Save your navigation changes.

Navigation Features

  • Dropdown Menus: Create multi-level menu structures
  • Mobile Menu: Responsive menu that works on all devices
  • Custom Links: Add external links or anchor links
  • Menu Styling: Customize colors, fonts, and spacing

Social Icons Block (Social Media Menu)

โ†‘ Back to top

Add social media links to your site:

  1. Add Social Icons Block: Use the + button to add Social Icons block.
  2. Choose Platforms: Select from available social media platforms.
  3. Add Links: Enter your social media profile URLs.
  4. Customize Appearance: Adjust icon size, color, and layout.
  5. Position Block: Place in header, footer, or content areas.

Supported Platforms

Facebook, Twitter, Instagram, LinkedIn, YouTube, TikTok, Pinterest, Snapchat, WhatsApp, and many more popular platforms.

Patterns

โ†‘ Back to top

Sophia Block Patterns

โ†‘ Back to top

Sophia includes professionally designed patterns for common business needs:

Heading Patterns

  • Heading with Central Semicircle and Three Circles: Four circular image frames – one large semicircle center with three smaller circles. Images automatically clip to shape.
  • Heading with Central Masked and Three Circles: Three circular side images plus one center position for custom shapes (stars, hearts, hexagons, etc.). Create custom shapes in design software and upload as PNG or SVG.
  • Heading with Single Image: Single full-width image header. Perfect for hero sections and page banners.

Adding Sophia Theme Patterns

โ†‘ Back to top

Access and use the built-in theme patterns:

  1. Open Block Editor: Edit any page, post, or template.
  2. Access Patterns: Click the + button and select the Patterns tab.
  3. Browse Categories: Look for “Sophia” or business-specific pattern categories.
  4. Preview Patterns: Hover over patterns to see a preview.
  5. Insert Pattern: Click on any pattern to add it to your content.

Steps to Use Patterns

โ†‘ Back to top

Follow these steps to effectively use patterns in your design:

  1. Plan Your Layout: Decide what type of content you want to display.
  2. Select Appropriate Pattern: Choose a pattern that matches your content type.
  3. Insert Pattern: Add the pattern to your page or template.
  4. Customize Content: Replace placeholder text and images with your own content.
  5. Adjust Styling: Modify colors, fonts, and spacing to match your brand.
  6. Test Responsiveness: Preview on different devices to ensure proper display.

Video Tutorial: Reordering Patterns on Your Page

Pattern Customization Tips

  • Replace Images: Upload your own high-quality images
  • Update Text: Write compelling copy that speaks to your audience
  • Brand Colors: Apply your brand colors consistently
  • Call-to-Actions: Include clear next steps for visitors
  • Contact Information: Keep all contact details up-to-date

Template Customization

โ†‘ Back to top

Template Customization Quick Guide

โ†‘ Back to top

Sophia includes templates optimized for different business types and page purposes. Navigate to Appearance > Editor > Templates to view and edit all available templates.

Template Editing Process

  1. Access Templates: Navigate to Appearance > Editor > Templates.
  2. Select Template: Click on the template you want to customize.
  3. Edit Layout: Modify blocks, add content, or change design.
  4. Preview Changes: Use the preview function to see changes before saving.
  5. Save Template: Click Save to apply changes.

Available Templates Reference

โ†‘ Back to top

Sophia includes 32 professionally designed templates for different page types and layouts:

General Templates

  • index.html – Default fallback template for all content types with sidebar on left
  • front-page.html – Custom homepage template with business-focused sections
  • home.html – Alternative homepage template
  • 404.html – Custom error page for missing content with search functionality
  • search.html – Search results page with custom search interface

Page Templates

  • page.html – Standard page template with medium width, no sidebar
  • page-no-title.html – Page template without title display
  • blank.html – Completely blank page (no header, footer, or styling)
  • single-page-no-sidebar.html – Page without sidebar, medium width
  • single-page-no-sidebar-full-width.html – Full width page without sidebar
  • single-page-sidebar-on-left.html – Page with 27% sidebar on left, 73% content on right
  • single-page-sidebar-on-right.html – Page with 73% content on left, 27% sidebar on right

Blog Post Templates

  • single.html – Default single post template with author card, comments, and navigation
  • single-post-no-sidebar.html – Blog post without sidebar
  • single-post-no-sidebar-full-width.html – Full width blog post without sidebar
  • single-post-sidebar-on-left.html – Blog post with 27% sidebar on left, 73% content on right
  • single-post-sidebar-on-right.html – Blog post with 73% content on left, 27% sidebar on right

Blog Archive Templates

  • blog.html – Blog index page with sidebar on left
  • blog-no-sidebar.html – Blog archive without sidebar
  • blog-no-sidebar-full-width.html – Full width blog archive without sidebar
  • blog-sidebar-on-right.html – Blog archive with 73% posts on left, 27% sidebar on right
  • archive.html – Category, tag, and date archive pages with custom heading
  • author.html – Author archive page with author bio card

WooCommerce Templates

Product Archive Templates:

  • archive-product.html – Main product archive with popup sidebar and filter button
  • archive-product-sidebar-on-left.html – Product archive with 23% sidebar on left, 73% products on right (3 columns)
  • archive-product-sidebar-on-right.html – Product archive with 73% products on left, 23% sidebar on right (3 columns)

Product & Shopping Templates:

  • single-product.html – Individual product page with gallery, details, and related products
  • cart.html – Shopping cart page with cart items, totals, and cross-sells
  • checkout.html – Checkout page with billing, shipping, and payment forms (no header/footer)
  • order-confirmation.html – Order confirmation page showing order details and addresses
  • page-my-account.html – Customer account page with login form and image

Template Parts Reference

โ†‘ Back to top

Template parts are reusable components that appear across multiple templates. Access them at Appearance > Editor > Template Parts.

Core Template Parts

  • header.html – Main site header with logo and navigation
  • footer.html – Site footer with four columns and default sections
  • sidebar.html – Standard sidebar for blog posts and pages
  • page-content.html – Reusable page content structure with title and featured image
  • post-content.html – Blog post content structure including category, title, meta, featured image, content, author card, navigation, and comments

WooCommerce Template Parts

  • product-collection.html – Main product grid (4 columns, 12 products per page) with pagination
  • all-products.html – Product collection layout (4 columns, 12 products per page)
  • all-products-three-col.html – Product collection layout (3 columns, 9 products per page)
  • product-template.html – Individual product card design with image, price, title, summary, and add to cart button
  • sidebar-products.html – Product filter sidebar for shop pages

Template Parts Usage

Template parts are automatically included in templates but can be customized globally:

  1. Edit Template Part: Go to Appearance > Editor > Template Parts
  2. Select Part: Choose the template part you want to edit (Header, Footer, Sidebar, etc.)
  3. Make Changes: Modify the design, content, or layout
  4. Save: Click Save to apply changes across all templates using that part

Benefits of Template Parts:

  • Consistency: Changes apply everywhere the part is used
  • Efficiency: Edit once, update everywhere
  • Flexibility: Mix and match parts to create custom templates

Theme Global Style Setup

โ†‘ Back to top

Configure global styles to maintain consistency across your site:

Accessing Global Styles

  1. Open Site Editor: Navigate to Appearance > Editor.
  2. Click Styles: Click the Styles button (circle icon) at the top-right.
  3. Browse Options: Explore different style categories.

Style Categories

Colors

  • Brand Colors: Set primary and secondary brand colors
  • Text Colors: Configure heading and body text colors
  • Background Colors: Set page and section backgrounds
  • Accent Colors: Define button and link colors

Typography

  • Font Families: Choose fonts for headings and body text
  • Font Sizes: Set consistent sizing across your site
  • Line Height: Adjust text spacing for readability
  • Letter Spacing: Fine-tune text appearance

Layout

  • Container Width: Set maximum content width
  • Spacing: Configure padding and margins
  • Border Radius: Set rounded corner styles
  • Shadows: Add depth with shadow effects

Style Variations

โ†‘ Back to top

Sophia includes 7 professionally designed color schemes that you can switch between instantly. Each variation maintains the same layout and typography while applying a cohesive color palette throughout your site.

Available Style Variations:

  1. Default: Classic tan and brown tones for spa and wellness businesses
    • Warm, inviting atmosphere with soft peach and tan brown accents
    • Perfect for: Beauty salons, spas, wellness centers
  2. Blue: Professional blue tones for medical and corporate sites
    • Clean, trustworthy appearance with soft blue backgrounds
    • Perfect for: Medical clinics, dental offices, professional services
  3. Coffee: Rich brown and cream tones for warm, welcoming sites
    • Earthy, comfortable feel with coffee-inspired colors
    • Perfect for: Lifestyle businesses, coaching, consulting
  4. Forest: Natural green tones for eco-friendly and wellness brands
  5. Orange : Energetic orange accents for modern, vibrant businesses
    • Bold, contemporary look with warm orange highlights
    • Perfect for: Fitness studios, modern salons, creative agencies
  6. Purple: Elegant purple tones for luxury and premium services
    • Sophisticated, upscale feel with lavender and plum accents
    • Perfect for: High-end salons, luxury spas, premium services
  7. Sage: Soft sage green for calming, natural aesthetics
    • Serene, balanced appearance with muted green tones
    • Perfect for: Meditation centers, yoga studios, natural wellness

How to Switch Style Variations:

  1. Open the Site Editor: Navigate to Appearance > Editor
  2. Click the Styles button (circle icon) in the top-right corner
  3. Browse the available style variations in the sidebar
  4. Click on any variation to preview it instantly
  5. Click Save to apply the new color scheme to your entire site

Video Tutorial: Switching Between Color Style Variations

Customizing Style Variations:

Each style variation can be further customized:

  • Override individual colors while keeping the overall palette
  • Adjust typography independently
  • Modify spacing and layout settings
  • Create your own custom variation based on any existing style

Applying Global Styles

  1. Select Style Elements: Choose what you want to customize.
  2. Make Adjustments: Modify colors, fonts, or spacing.
  3. Preview Changes: See how changes affect your site.
  4. Save Styles: Click Save to apply globally.

Performance & Support

โ†‘ Back to top

Performance Optimization

Sophia is built for speed and optimal performance:

Built-in Optimizations

  • Clean Code: Efficient, lightweight code structure
  • Mobile-First Design: Responsive design that works on all devices
  • Fast Loading: Optimized theme files for quick page loads
  • SEO-Friendly: Proper heading structure and semantic markup
  • Accessibility: WCAG compliant design elements

Performance Tips

  • Optimize Images: Use appropriately sized, compressed images
  • Choose Quality Hosting: Select a reliable hosting provider
  • Use Caching: Install a caching plugin for faster load times
  • Minimize Plugins: Only use necessary plugins
  • Regular Updates: Keep WordPress, theme, and plugins updated

SEO Best Practices

  • Proper Headings: Use heading hierarchy (H1, H2, H3)
  • Alt Text: Add descriptive alt text to all images
  • Meta Descriptions: Write compelling page descriptions
  • Internal Linking: Link between related pages on your site

Recommended Font

โ†‘ Back to top

Preferred Font Choice

โ†‘ Back to top

Font Configuration

The designer’s preferred typeface for this theme is Switzer, as it best complements the overall style and visual balance of the design.

However, due to licensing restrictions, the Switzer font files are not bundled with the theme. You can still enjoy this font by downloading it for free from the official source and installing it manually.

Download the Switzer font.

If Switzer is not installed on your site, the theme will automatically fall back to system fonts (Apple system font, Segoe UI, Helvetica, sans-serif) to maintain a clean and consistent appearance.

Installation Instructions

โ†‘ Back to top
  1. Visit the Fontshare Switzer page.
  2. Download the font files
  3. Once downloaded, navigate to the Web folder in the extracted files
  4. Locate the Switzer-Variable.woff2 file
  5. Upload this file to your website at: /wp-content/uploads/fonts/Switzer-Variable.woff2
    • Use FTP, cPanel File Manager, or WordPress file manager
    • Create the fonts folder if it doesn’t exist
  6. The font will automatically load on your site

Important: Do not upload via Site Editor > Styles > Typography as this will create a separate “Switzer Variable” font that won’t integrate with the theme’s design. Use the manual upload method above for proper integration.

Troubleshooting

โ†‘ Back to top
  • Ensure file path is exactly: /wp-content/uploads/fonts/Switzer-Variable.woff2
  • Check folder permissions (755 recommended)
  • Clear cache if using caching plugins
  • Verify the file name matches exactly (case-sensitive)

FAQs

โ†‘ Back to top

Quick answers to common questions

What are Sophia Blocks?

  • Sophia Blocks are custom-built WordPress blocks designed specifically for the Sophia theme. They integrate seamlessly with the WordPress block editor (Gutenberg) to help you create beautiful, professional pages without any coding knowledge.

Are these custom blocks or standard WordPress blocks?

  • These are custom WordPress blocks created exclusively for the Sophia theme. Unlike the standard blocks that come with WordPress, Sophia Blocks are specially designed to match your themeโ€™s unique style and provide features tailored to your specific needs.

Will the blocks work if I switch themes?

  • The blocks are specifically designed for the Sophia theme and work best within that environment. If you switch themes, the content will remain, but the block functionality will not display correctly. We recommend keeping the Sophia theme active for the best experience.

Do I need any plugins to use Sophia Blocks?

  • No plugins required! Sophia Blocks are built directly into the theme. Once you activate the Sophia theme, all blocks are automatically available in your WordPress editor. No additional plugins, no extra installations, no complicated setup.

How do I add Sophia Blocks to my site?

  • Simply activate the Sophia theme, and all custom blocks are instantly available. Here’s how to use them:

    Create or edit any page/post
    Click the “+” button to add a block
    Look for the “Sophia Blocks” category
    Select the block you want to use
    Customize it with your content

    It’s that easy!

Related Products

Offer add-ons like gift wrapping, special messages or other special options for your products.

Offer personalized product bundles, bulk discount packages, and assembledย products.