High Performance Pro

1. What You Can Build

High Performance Pro ships with everything needed to launch a complete website without writing code.

Feature	What it gives you
76 block patterns	Ready-made sections — hero banners, sliders, services, team, testimonials, pricing tables, FAQ, stats, call-to-action, contact forms, and more.
6 full-page layouts	One-click homepages and inner pages: Home (Sports), Home (Business), Home (Blogging), About Us, Our Services, Contact Us, and FAQ.
30+ templates	Pre-built layouts for blog, single posts/pages, search, 404, and the full WooCommerce shop.
18 template parts	Swappable headers, footers, sidebars, and post layouts.
2 style variations	A light Default look and a built-in Dark mode — switch with one click.
WooCommerce ready	Sell sports gear, memberships, or services with dedicated shop patterns and product templates.
3 bundled fonts	Syne, Sofia Sans, and DM Sans — loaded locally for speed and privacy.
FSE Pro plugin	Bundled premium plugin that adds extra blocks, patterns, and design controls.

2. Requirements

Requirement	Minimum	Recommended
WordPress	5.9	6.5 or newer (for all Site Editor features)
PHP	5.6	7.4 or newer
MySQL / MariaDB	5.6 / 10.1	Latest stable
Browser	Any modern browser	Latest Chrome, Firefox, Safari, or Edge

Required plugin: FSE Pro (bundled with the theme).
Optional plugins: WooCommerce (for a store) and Contact Form 7 (for the contact form pattern).

Quick check: if Appearance → Editor opens without errors, your site meets the requirements.

3. Installation & Activation

Step 1 — Download the theme

1. Go to your Catch Themes My Account page.
2. Under Downloads, click the file name to download high-performance-pro.zip.

Safari users: Safari may auto-unzip downloads. Go to Safari → Settings → General and uncheck “Open ‘safe’ files after downloading” so you keep the original ZIP file.

Step 2 — Install & activate the theme

1. In WordPress, go to Appearance → Themes → Add New → Upload Theme.
2. Click Choose File, select high-performance-pro.zip, and click Install Now.
3. When installation finishes, click Activate.

Step 3 — Install the bundled FSE Pro plugin

After activation, a notice appears at the top of your dashboard prompting you to install the required FSE Pro plugin.

1. Click Begin installing plugins in the notice.
2. Tick FSE Pro, choose Install from the dropdown, and click Apply.
3. When it finishes, choose Activate and click Apply.

The plugin file is bundled inside the theme, so no separate download is needed for the first install. Manage plugin updates and its license later under Plugins → FSE Pro Plugin License.

Step 4 — Add your License Key (for one-click updates)

1. Find your license key on your My Account → View Details and Downloads page.
2. In WordPress, go to Appearance → High Performance Pro.
3. Paste the key into the License Key field, then click Save Changes and Activate License.

Important: use the License Key, not the Product Key. The license key is what enables automatic updates from your dashboard.

Step 5 — (Optional) Install supporting plugins

• WooCommerce — only if you plan to sell. Plugins → Add New → search “WooCommerce” → Install → Activate, then run its setup wizard.
• Contact Form 7 — only if you will use the Contact Form pattern. Install it the same way (see Section 18).

4. The Theme Info Page

After activation you get a dedicated theme dashboard at Appearance → High Performance Pro. It is your home base for licensing and helpful links.

From this page you can:

• Enter and activate your License Key for automatic updates.
• Read about the bundled FSE Pro plugin and what it adds.
• Jump to Theme Info, View Demo, Theme Instructions, Changelog, and Support.
• Leave a review of the theme.

5. Understanding the Site Editor

Everything in this theme is edited in one place: Appearance → Editor (the Site Editor). There is no Customizer. Learn these four building blocks first — the rest of this guide refers to them constantly.

If you are on Site Front-End then you will see WP Admin Bar on the top of the page, click on “Edit Site” to open the Site Editor.

Building block	What it is	Where to find it
Templates	The layout of a type of page — the blog, a single post, the 404 page, the shop.	Editor → Templates
Template Parts	Reusable chunks shared across templates — Headers, Footers, Sidebars. Change one and it updates everywhere it is used.	Editor → Patterns → Template Parts
Patterns	Pre-designed sections (a hero, a pricing table, a team grid) you drop into any page or post.	The [+] Inserter → Patterns tab
Styles	Global colors, fonts, and spacing, plus the one-click Dark style variation.	Editor → Styles (half-moon icon)

Getting around the editor

• [+] (top-left) — the Inserter. Add blocks and patterns here.
• List View (rows icon, top-left) — an outline of every block on the page. The easiest way to select a section without clicking around.
• Settings (gear, top-right) — options for the selected block (size, colors, spacing).
• Styles (half-moon, top-right) — site-wide colors and fonts.
• Save (blue button, top-right) — nothing goes live until you click this and confirm the items to save.

Golden rule: if a change is not showing on your live site, you almost certainly forgot to click Save.

6. Quick Start: Build Your Homepage in 5 Minutes

What you already have: as soon as you activate the theme, your site shows a fully designed homepage (the sports slider and home sections), so you are not starting from a blank screen.

Is there a one-click demo import? No separate “import demo content” step is required. Instead, every section is available as a pattern, and each pattern comes pre-filled with the demo images and text — so inserting a Page pattern instantly looks like the demo. You then swap in your own words and pictures. (You can preview the finished result on the live demo.)

The fastest route to a finished-looking site is to start from a full-page pattern.

1. Go to Pages → Add New and give the page a title, for example “Home”.
2. Click the [+] inserter (top-left) and open the Patterns tab.
3. Choose the Pages category. You will see complete page layouts:
   • Page Home Sports — for clubs, gyms, and teams
   • Page Home — general business homepage
   • Page Home Blogging — content- and blog-focused homepage
   • Page About Us, Page Our Services, Page Contact Us, Page Faq
4. Click the layout you want — the entire page is inserted instantly.
5. Click any text or image to edit it, replacing the demo content with your own.
6. Click Publish, then set the page as your homepage (next section).

7. Setting Your Homepage (Static Front Page)

1. Go to Settings → Reading.
2. Under Your homepage displays, select A static page.
3. Set Homepage to the page you just built (for example, “Home”).
4. (Optional) Set Posts page to a blank page named “Blog” to hold your blog feed.
5. Click Save Changes.

Good to know: the theme ships with a designed homepage built in. If you set your own static page as the homepage (above), WordPress uses that page instead of the built-in design — which is usually what you want once you have built your own Home page. The built-in design then still appears on your Posts page (your blog).

Prefer to reuse the built-in home design? The theme includes editable home templates — Template Home and Template Home (Blogging). Create a page, then in the right sidebar open Page → Template and assign one of them, so your homepage keeps the theme’s ready-made layout that you can edit.

8. Headers & Footers

Headers and footers are Template Parts, so editing one updates it across your whole site.

Switching to a different header or footer

1. Open Appearance → Editor → Patterns → Template Parts.
2. Open the part you want to change (for example, Header or Footer).
3. Open List View, select the top-level header or footer block, and use the options menu (three dots) → Replace to choose a different design from the Patterns inserter.
4. Click Save.

Available headers

Header, Header With Cart And Account, Header Media, Blog Header, Shop Header, Archive Header, Search Header, 404 Header, Taxonomy Product Header.

Available footers

Footer, Footer Widgets (a multi-column footer), Footer Widgets With CTA (adds a call-to-action band on top).

Note: this is a block theme, so there is no Appearance → Widgets screen. The “widgets” in the footer are simply blocks (recent posts, navigation, social icons, text, and so on) that you edit directly inside the footer template part.

Transparent header

Some hero and banner patterns are designed to sit behind a transparent header for a modern, edge-to-edge look. Use the Header Media pattern with a hero to achieve this. Contrast was tuned in recent updates so text stays readable on both light and dark backgrounds.

9. Logo, Site Title & Menus

Add your logo

1. Open Editor → Patterns → Template Parts → Header.
2. Click the Site Logo block, then choose Replace and upload or select your logo.
3. Drag the blue handles, or use the Settings (gear) panel, to set the logo width. Click Save.

Site title, tagline & favicon

Set your Site Title, Tagline, and Site Icon (the small favicon shown in the browser tab) under Settings → General. Once a logo is in place you can hide the text title from the Site Logo / Site Title block settings.

Navigation menus

1. In the Site Editor, click the Navigation block in your header (or open Editor → Navigation).
2. Use the [+] inside the block to add pages, custom links, categories, or submenus.
3. Drag items to reorder them. Drag an item slightly to the right (indent) to turn it into a dropdown sub-item.
4. Click Save.

On phones and tablets the menu automatically collapses into a tap-to-open icon, so you do not need a separate mobile menu.

10. Editing Content: Spacing, Layout & Alignment

Once a pattern is on the page, you shape it with three controls that appear for almost every block.

Width & alignment

Select a block and use the alignment button in its toolbar:

• None — normal content width (about 780px).
• Wide width — stretches wider (up to about 1400px).
• Full width — edge to edge across the screen (great for hero and banner sections).

Spacing (padding & margin)

In the Settings (gear) → Dimensions panel you can set padding (space inside a block) and margin (space outside it). The theme provides ready-made spacing presets that scale down nicely on smaller screens, so picking a preset is usually better than typing a fixed pixel value.

Block spacing (gap)

For groups, columns, and rows, the Block spacing control sets the gap between the items inside — handy for tightening or loosening a grid of cards.

Colors, borders & typography per block

The Settings panel also lets you override Color (text, background, link), Typography (size, line height), and Border for the selected block. For consistency, prefer the theme’s preset colors and font sizes over custom values — presets update automatically when you switch styles or to Dark mode.

11. Using Block Patterns

Patterns are pre-built sections you insert anywhere. There are 76 in total, grouped into Pages, Headers, Footers, Featured sections, Banners, Sliders, and WooCommerce.

Insert a pattern

1. Click [+] where you want the section to appear.
2. Open the Patterns tab.
3. Type the pattern name in the search box (for example, “pricing” or “team”). Searching by name is the quickest and most reliable way to find a specific pattern.
4. Click the pattern. It drops straight onto the page, ready to edit.

Note on categories: the inserter groups patterns into a few category tabs — the theme’s full-page layouts live under Pages, and others appear under WordPress’ built-in tabs (such as Featured, Banner, Header, Footer). The topic groupings used later in this guide (Hero, Social proof, Pricing, and so on) are just for reading — they are not separate tabs in the inserter, so when in doubt, search by name.

Replace a section with a different pattern

Select the section in List View, open the options menu (three dots) → Replace, and choose another pattern.

Save your own reusable / synced patterns

Built a section you want to reuse? Select it, open the options menu (three dots) → Create pattern, give it a name, and choose:

• Synced — one master copy. Edit it once and every place it appears updates (perfect for a call-to-action you repeat across pages).
• Not synced — inserts a fresh, independent copy each time, which you can then edit freely.

Find your saved patterns later under [+] Inserter → Patterns → My patterns, or manage them in Editor → Patterns.

How to duplicate a section or block

Duplicating is the fastest way to repeat something you have already styled — another service card, another pricing column, another slide, or a whole section.

1. Open List View (the rows icon, top-left) and click the block or section you want to copy. List View makes it easy to select the right group rather than one small block inside it.
2. Click the options menu (three dots) on the toolbar or in List View.
3. Choose Duplicate. An exact copy appears directly below the original.
4. Edit the copy’s text, image, or link, then click Save.

Handy shortcuts:

• Keyboard: select a block and press Ctrl + Shift + D (Windows) or ⌘ + Shift + D (Mac) to duplicate.
• Copy between pages: select the section, press Ctrl/⌘ + C, open the other page, and press Ctrl/⌘ + V.
• Reorder: use the up/down arrows in the toolbar, or drag the block in List View.
• Remove: the same options menu has Delete (or press Shift + Alt + Z).

Tip: to repeat the same section across several pages and have one edit update them all, save it as a synced pattern instead of duplicating (see above).

Worked examples: adding specific patterns

The steps below all start the same way: open the page or post you are editing, click the [+] inserter, open the Patterns tab, and type the pattern’s name in the search box. Click the result to drop it in, then edit it in place. You can preview every pattern live on the theme demo.

How to add the Slider pattern

This is the big rotating image banner at the very top of the demo homepage (“Be Champion”, “Power & Passion”, with an Enroll Now button).



1. Click [+] → Patterns, search Slider (or Slider Sports), and click it.
2. It is best used at the top of the page with Full width alignment — select the slider and choose Full width from the toolbar if it is not already.
3. Open List View to see each slide. Click a slide to edit its background image (select the image/Cover block → Replace), its heading text, and the Enroll Now button label and link.
4. To add or remove slides, select a slide in List View and use Duplicate or Delete from its options menu (three dots).
5. Click Save. Keep slide text short so it stays readable on phones.

How to add the Text Carousel

The scrolling strip of words that moves sideways across the page.



1. Click [+] → Patterns, search Text Carousel, and click it.
2. Click any word in the strip to edit it. Add more items by selecting a text column in List View and choosing Duplicate.
3. You can place several Text Carousels on the same page — each one scrolls independently, so a missing or extra strip will not affect the others.
4. Click Save.

How to add Portfolio With Video Popup

An image gallery where each item opens a video in a popup window.



1. Click [+] → Patterns, search Portfolio, and click Portfolio With Video Popup.
2. Replace each gallery image (select the image → Replace).
3. To set the video that opens, select the linked image/play button and update its link to your video URL (for example a YouTube or Vimeo link). The popup is handled by the theme automatically.
4. Click Save, then test on the live site by clicking a thumbnail to confirm the video opens.

How to add Why Choose Us

The benefit cards under a heading like “Create and make your dream” (safe facilities, expert coaching, community, flexible memberships).



1. Click [+] → Patterns, search Why Choose Us, and click it.
2. Edit the section heading, then click each card to change its icon/image, title, and description.
3. To change the number of cards, select a card column in List View and use Duplicate or Delete. Keep the columns even (for example 2, 3, or 4 across) so the grid stays tidy.
4. Click Save.

How to add Team Slider

The “Meet Our Trainers” carousel of coach/staff profiles with a View All Trainers link.



1. Click [+] → Patterns, search Team Slider, and click it. (Prefer a static grid? Use Team instead.)
2. Click each member to replace the photo and edit the name and role.
3. Add or remove members by duplicating or deleting a member item in List View.
4. Update the View All Trainers button to point at your team page, then click Save.

How to add Promotional Headline

A bold call-to-action band, like the demo’s “Unlock Your Potential” / “30% Off This Month” strip.



1. Click [+] → Patterns, search Promotional Headline, and click it.
2. Edit the headline text and the button label.
3. Set the button link to your sign-up, membership, or contact page (select the button → link icon).
4. Optionally change the background: select the band → Settings → Color → Background, or replace its background image.
5. Click Save.

How to add Pricing Table Advanced

Membership tiers (Basic, Standard, Premium) with feature lists and buttons.



1. Click [+] → Patterns, search Pricing, and click Pricing Table Advanced. (For a simpler version use Pricing Table.)
2. Edit each plan’s name, price, and feature list (the feature lines are normal list items — click to edit, press Enter to add a line).
3. Point each plan’s button at your checkout or sign-up link.
4. To highlight a recommended plan, select its column and give it a different Background color under Settings.
5. Add or remove a plan by duplicating/deleting a column in List View, then click Save.

How to add Latest Posts

The “Latest From The Editorial” section that automatically shows your most recent blog articles.



1. Publish at least a few blog posts first (and set a Featured Image on each).
2. Click [+] → Patterns, search Latest Posts, and click it.
3. This pattern pulls posts in automatically — you do not add them by hand. To control how many show or which categories appear, select the posts block and adjust its Settings (number of items, filter by category, show/hide date or author).
4. Edit the section heading above the posts, then click Save.

How to add Time Table

The training/class schedule grid (days and hours, with imagery).



1. Click [+] → Patterns, search Time Table, and click it.
2. Click each day and time cell to edit the text to match your real schedule.
3. Replace the side image if you wish (select the image → Replace).
4. Add or remove rows by duplicating/deleting a row in List View, then click Save.

Adding any other pattern

Every other pattern works the same way: [+] → Patterns → search its name (see the full list in Section 12) → click to insert → edit text and images in place → Save. The three things you will almost always edit are: text (click and type), images (select → Replace), and buttons/links (select the button → link icon). Use List View plus Duplicate/Delete to add or remove repeated items such as cards, slides, columns, or rows.

About the demo images: the placeholder photos that come with each pattern are part of the theme, not your Media Library, so you will not find them under Media. That is normal — just click an image and choose Replace to swap in your own (which then is saved to your Media Library).

12. Pattern-by-Pattern Guide

A quick reference to the most useful sections — what each one is for and how to make it yours. Insert any of them from the Patterns tab as described above.

Full-page layouts (Pages category)

Complete, ready-to-edit pages: Page Home Sports, Page Home, Page Home Blogging, Page About Us, Page Our Services, Page Contact Us, Page Faq. Start here, then swap or delete the sections you do not need.

Hero & banner sections

Pattern	Use it for	Tips
Hero Content / Hero Content With Highlights / Hero Content Full Width	The headline area at the very top of a page.	Replace the background/side image, edit the headline and the button link. Use Full Width alignment for an edge-to-edge look.
Slider / Slider Sports	A rotating set of large banner slides.	Edit each slide’s image and text. Keep slide text short so it stays readable on mobile.
Header Media	A banner strip used under a transparent header on inner pages.	Pair with the transparent header (see Section 8).
Promotional Headline	A bold call-to-action band.	Point the button at your sign-up or contact page.
Stats / Intro Stats	Headline numbers (members, wins, years).	Replace the numbers and labels; keep to 3–4 items for balance.

Content & marketing sections

Pattern	Use it for
Services / Our Programs	A grid of what you offer, each with an icon/image, title, and short description.
Our Story	An “about” block pairing an image with a paragraph of text.
Featured Content / Key Features / Why Choose Us	Highlight selling points in columns.
How It Works / Feature Steps	A numbered, step-by-step process.
Collapsible Service Lists	Expandable rows that save space — click to reveal details.
Video	A featured video with a poster image.
Text Carousel	A scrolling strip of words/phrases. You can place several on one page and each runs independently.
Time Table	A class or match schedule grid.

Social proof & people

Pattern	Use it for
Testimonial / Testimonial Slider / Testimonials With Stats	Customer or member quotes, optionally combined with headline numbers.
Team / Team Slider	Coaches, trainers, or staff with photos and roles.
Portfolio With Video Popup	A gallery where items open a video in a popup.

Pricing & conversion

Pattern	Use it for
Pricing Table / Pricing Table Advanced	Membership or package tiers. Edit prices, feature lists, and button links; highlight your recommended plan.
FAQ	Expandable question-and-answer rows.
Contact Form / Contact Form With Info	A contact section. The form requires the free Contact Form 7 plugin — see Section 18.
Google Map	An embedded map of your location.

Blog sections

Latest Posts and Featured Posts pull in your most recent articles automatically — great for a homepage. Blog Header and Post Header style the top of your blog and single posts.

WooCommerce sections (require WooCommerce)

Featured Products, Featured Categories, Products Carousel, On Sale Products, Top Rated Products, Cross Sells Products, Shop Offer, Shopping Features, Woo Features, Secure Transactions, Product FAQ, Sidebar Products. These display real products once WooCommerce is active and you have added items.

About sliders and carousels: the Slider, Testimonial Slider, Team Slider, Products Carousel, and Text Carousel are powered by the theme and FSE Pro. You can place multiple carousels on the same page and each works independently.

13. Global Styles: Colors, Fonts & Dark Mode

Open Editor → Styles (the half-moon icon, top right). Changes here apply across your whole site at once.

Switch to Dark mode (style variations)

1. In Styles, click Browse styles.
2. Choose Dark (or Default to return to light). The entire site updates instantly.
3. Click Save.

Change colors

Go to Styles → Colors → Palette. Editing a preset re-brands every place it is used. The presets most worth setting to your brand:

Preset	Controls
Button (default green #00A800)	Button background and accent color
Text Link	Links throughout the site
Title Color	Headings
Body Text	Paragraph text
Background / Primary / Secondary / Tertiary	Section background shades

Change fonts

Go to Styles → Typography. The theme bundles three font families you can assign — Syne, Sofia Sans, and DM Sans — plus system fonts. Set heading fonts under Styles → Typography, then the Headings element.

Block styles (alternate looks for a block)

Select a block and open the Styles tab in its settings to pick an alternate look:

• Buttons: Theme Default and Outline.
• Lists & detail blocks: Arrow icon, Pill, Checkmark, With arrow, With asterisk.

14. Templates & Sidebar Layouts

This theme controls sidebars through alternate templates — you pick a layout per page or post.

Assign a template to a page or post

1. Edit the page or post in the Block Editor.
2. In the right sidebar, open the Page (or Post) tab and find Template.
3. Click the current template name, choose Swap template, and select one.

For Pages	For Posts	For the Blog
No Sidebar Full Width Sidebar On Right Sidebar On Left Page No Title	No Sidebar Full Width Sidebar On Right Sidebar On Left	Blog Page No Sidebar Full Width Sidebar on Left Sidebar on Right

Edit what is inside the sidebar

The sidebar is a Template Part. Edit it via Editor → Patterns → Template Parts → Sidebar and add any blocks you want — recent posts, a search box, categories, an image, or a call-to-action.

Editing templates

A template is the layout used for a whole type of content — for example every single post, every page, the blog list, search results, or the 404 page. Edit one template and every matching page updates at once.

1. Go to Appearance → Editor → Templates.
2. Click the template you want to change (for example Single Posts, Page, Blog, Search Results, or Page: 404). Click the pencil (Edit) to start editing.
3. Add, remove, or rearrange blocks just like on a page. Use List View to find the part you want.
4. Click Save.

Add a brand-new template: in Editor → Templates, click + Add New Template and choose what it is for. The theme also ships extra ready-made templates (such as the sidebar layouts in the table above) that you assign per page from the Template menu — you do not have to build those yourself.

Undo your changes: if you edit a theme template and want the original back, open the template, click the options menu (three dots), and choose Clear customizations (or Reset). This restores the template the theme shipped with.

Editing template parts

A template part is a reusable chunk shared by many templates — the Header, Footer, and Sidebar. Because the same part is reused everywhere, editing it once updates your whole site.

1. Go to Appearance → Editor → Patterns and open the Template Parts group (Header, Footer, Sidebar, and others).
2. Click the part you want, then edit its blocks — change the logo, menu, footer text, widgets, and so on.
3. To swap in a completely different design, select the part’s top block in List View and use the options menu (three dots) → Replace (see Section 8 for the full list of header and footer options).
4. Click Save — the change appears on every page that uses that part.

Create a new template part: in Editor → Patterns, click the + next to Template Parts, give it a name, and pick an area (General, Header, or Footer). You can then drop it into any template.

15. Blog Setup

1. Create a blank page named Blog and set it as your Posts page under Settings → Reading.
2. Choose a blog layout by assigning one of the Blog Page templates (Section 14).
3. To change how the post list looks, edit Editor → Templates → Blog (or Index). The theme includes several post-list layouts: Standard, Image at Left, 3 Column, and With Title.
4. Add the Featured Posts or Latest Posts patterns anywhere you want to spotlight articles.

Tip: set a Featured Image on every post (right sidebar → Post → Featured image) so grids and lists look their best.

16. Comments

Comments use WordPress’ built-in system and are styled to match the theme.

• Turn comments on or off site-wide under Settings → Discussion.
• Turn them on or off for a single post in the editor: right sidebar → Post → Discussion → Allow comments.
• The comment area (form, list, and threaded replies) is part of the single-post template and the Comments template part — edit its wording or layout there if needed.

17. Search & the 404 Page

Search

The header includes a search toggle — click the magnifier to open the search box, and it is fully keyboard accessible (you can open and close it with the keyboard). Search results use the Search template, which you can edit under Editor → Templates → Search Results.

The 404 (page not found) page

When a visitor reaches a missing URL they see the 404 template. Edit it under Editor → Templates → Page: 404 — a good place to add a friendly message, a search box, and links back to your main pages.

18. Contact Form Setup

The Contact Form and Contact Form With Info patterns already include a Contact Form 7 shortcode — you just need the free plugin installed so it turns into a working form. Good news: the shortcode points to Contact Form 7’s default form (“Contact form 1”), which exists automatically, so there is usually nothing to paste.

1. Install the plugin: Plugins → Add New → search “Contact Form 7” → Install → Activate.
2. Insert the Contact Form pattern on your contact page. The form now appears where the shortcode was — no extra steps needed.
3. Set who receives messages: go to Contact → Contact Forms, open Contact form 1, click the Mail tab, and enter your email address in the To field. Save.
4. Send a test message from your live site to confirm it arrives.

If the page shows the shortcode text instead of a form, Contact Form 7 is not active — install/activate it (step 1). If you built your own form with a different name, open it in Contact Form 7, copy its shortcode, and replace the one in the pattern’s Shortcode block.

Tip: add an anti-spam measure (Contact Form 7 supports reCAPTCHA and Akismet) before going live.

19. WooCommerce / Online Store

High Performance Pro is fully WooCommerce compatible.

Setup

1. Install and activate WooCommerce (Plugins → Add New).
2. Run the WooCommerce setup wizard (store address, currency, payments, shipping).
3. Add products under Products → Add New.
4. Switch your header to Header With Cart And Account so visitors get cart and account links (see Section 8).

Store templates (already built for you)

The theme includes ready-made WooCommerce templates — no setup needed:

• Single Product and Single Product Vertical Gallery
• Archive Product (the shop) with Sidebar on Left and Sidebar on Right variants
• Product Category (taxonomy) archive
• Cart, Checkout, Order Confirmation, and Product Search Results

Edit any of them in Editor → Templates.

Store sections

Build merchandising sections with the WooCommerce patterns listed in Section 12 — Featured Products, On Sale Products, Products Carousel, Cross Sells, and more.

WooCommerce block-supported patterns

These patterns are built on WooCommerce blocks (such as Products, Product Collection, and Cart/Checkout blocks). They only appear — and only show real data — when WooCommerce is active and you have added products. Insert them the usual way: [+] → Patterns → search the name.

Pattern	What it shows	Good for
Featured Products	A hand-picked or featured set of products.	Homepage highlight row
Featured Categories	Links to your main product categories with images.	Helping shoppers browse by type
Products Carousel	A sliding row of products.	Showing many items in a small space
On Sale Products	Products currently on sale.	Promotions and seasonal offers
Top Rated Products	Best-reviewed products.	Social proof / bestsellers
Cross Sells Products	Suggested related products.	Cart and product pages
Product FAQ	Expandable shipping/returns/product questions.	Reducing pre-sale doubts
Shop Offer / Shopping Features / Woo Features	Banners for offers and store benefits (free shipping, returns, etc.).	Building trust on shop pages
Secure Transactions	A trust/badge strip about safe payments.	Checkout reassurance
Sidebar Products	A compact product list for sidebars.	Shop sidebar widgets

Editing tips: select a WooCommerce block and open its Settings (gear) to choose how many products show, which categories to pull from, the column count, and whether to display price, rating, or the Add to Cart button. To curate exact products, use the block’s hand-picked option where available.

Store page templates (Single Product, Shop/Archive, Cart, Checkout, Order Confirmation) are covered above under “Store templates” and are edited in Editor → Templates.

20. Performance, SEO & Accessibility

Performance

• Fonts are bundled and served locally — no external font requests, which is faster and better for privacy.
• Block-specific styles (such as the button outline) load only on pages that use them.
• For best results, add a caching plugin and serve images in modern formats. If you use an optimization plugin, make sure it does not block the theme’s small script, or sliders and the search toggle may stop working.

SEO

• The theme outputs clean, standards-based HTML with a sensible heading structure.
• Use one H1 per page (usually the page or post title), then H2/H3 for sections — the patterns already follow this.
• Always add descriptive alt text to images (select an image → Settings → Alt text). Pair the theme with an SEO plugin if you want titles, meta descriptions, and sitemaps.

Accessibility

• A visible focus outline and a “skip to content” link are built in for keyboard users.
• The header search toggle can be opened and closed with the keyboard.
• Keep good color contrast when you change palette colors — very light text on light backgrounds is hard to read.

21. Updating the Theme & License Key

With a saved, activated license key (Section 3, Step 4), updates arrive automatically:

1. When an update is available, you will see it under Dashboard → Updates or Appearance → Themes.
2. Click Update Now.

No license key means no automatic updates. You can still update manually by uploading the newer ZIP. Your content lives in the database, not the theme, so it stays safe — but always take a full backup before updating if you have added custom code.

22. Developer Notes

A light reference for developers. End users can skip this section.

Design tokens (theme.json)

• Layout: content width 780px, wide width 1400px.
• Font families: sofiasans, dmsans, syne, system-sans-serif, system-serif.
• Spacing presets use fluid min() values (slugs 8 through 120), so padding scales down on small screens automatically.
• Color slugs: background, foreground, primary, secondary, tertiary, text-link, body-text, title-color, button-color, button-hover-color, border-default-color, plus dark accents.

Note: the border slug is border-default-color (renamed from border-color to avoid clashing with WordPress core). Update any custom CSS that referenced the old slug.

Custom block styles

Registered in inc/block-styles.php: core/button gets Theme Default and Outline; other blocks get Arrow icon, Pill, Checkmark, With arrow, and With asterisk. assets/css/button-outline.css is enqueued per-block so it loads only when a button is present.

Child theme

Create a folder with a style.css whose header sets Template: high-performance-pro, enqueue the parent stylesheet from the child’s functions.php, then override any template or part by copying the matching .html file into the child’s templates/ or parts/ folder. Add custom patterns by dropping a .php file with a standard pattern header into the child’s patterns/ folder.

23. Translation & RTL

• Translation ready: a .pot file is in the languages/ folder. Use Loco Translate or Poedit, or simply set Settings → General → Site Language.
• RTL support: a right-to-left stylesheet loads automatically for languages such as Arabic and Hebrew — no setup needed.
• Text domain: high-performance-pro.

24. Troubleshooting & FAQ

I don’t see the “Pages” full-page patterns. Make sure the theme is activated and the FSE Pro plugin is installed and active, then refresh the Site Editor.

My changes aren’t showing on the live site. Click Save (top right) and confirm the items. Clear any caching plugin or CDN cache and hard-refresh your browser (Ctrl/Cmd + Shift + R).

I can’t find the Customizer. This is a Full Site Editing theme — there is no Customizer. Everything is in Appearance → Editor. Title, Tagline, and Site Icon are in Settings → General.

The theme update option doesn’t appear. Add and activate your License Key under Appearance → High Performance Pro (Section 21).

A pattern looks broken or empty. WooCommerce patterns need WooCommerce installed with products added; blog patterns need published posts; the Contact Form needs Contact Form 7.

My contact form doesn’t send / shows a shortcode. Install and activate Contact Form 7, then make sure the correct shortcode is in place and the Mail tab has a valid recipient address (Section 18).

My slider, carousel, or search toggle stopped working. An optimization or “defer JavaScript” plugin may be blocking the theme’s script. Exclude custom.min.js from optimization. Multiple carousels per page are supported.

A header overlaps my content / text is unreadable. Use a header designed for that page type (for example, Header Media for hero banners) and make sure you are on the latest theme version.

How do I edit the footer copyright? Go to Editor → Patterns → Template Parts → Footer, click the text, edit it, and click Save.

Where do I get help? Visit the Catch Themes support forum, or your My Account page for premium support.

25. Frequently Asked Questions

Many common questions about block themes and Full Site Editing — how the Site Editor works, templates and template parts, patterns, global styles, and more — are answered in the official Catch Themes FSE FAQ.

Read the full FAQ here: https://catchthemes.com/fse-faq/

---

High Performance Pro is built by Catch Themes and is based on the Catch FSE WordPress theme. Distributed under the GNU GPL v2 or later.