Theme Settings Overview

Theme Settings is where you configure how your website looks and behaves: colours, typography, layout widths, header and footer, the product catalog, the product page, and much more. It is Rey’s own settings editor, and it replaces the WordPress Customizer that older versions of Rey used.

This article is a tour of the editor itself: how to move around it, how to find a setting, how to preview and save your work. The individual options are documented in the per-area articles linked further down.

Opening Theme Settings

In your WordPress admin menu, go to Rey → Settings.

Theme Settings opens full-screen inside your admin. Everything you change here applies to the whole website. If you want to change something on one page only, that is done per page instead. See Settings for individual Page / Post / Taxonomy / Category.

The Overview screen

Theme Settings opens on an Overview screen rather than dropping you into a list of options. Each card is one settings area, with a few of its most-used sections listed underneath as direct shortcuts.

• Click the card title (or anywhere on the card) to enter that area.
• Click one of the small links underneath to jump straight to that section.

You can return to this screen at any time by clicking the Rey logo at the top of the sidebar, or the Overview entry at the top of the settings list.

Moving around

The sidebar on the left lists every area (General, Header, WooCommerce…). Click one and it expands into its sections, the actual settings pages. Only one section is shown at a time in the main panel, which keeps each page short.

Two extras help when you are jumping around a lot:

• Recently visited: a dropdown in the top bar listing the sections you opened most recently, newest first. One click takes you back. It only moves you around; it never changes a value.
• Your place is remembered: the section you are on stays in the address, so refreshing the page (or bookmarking it) brings you back to the same spot.

Finding a setting

Rey has hundreds of options, so search is usually faster than browsing.

Search everything

The search box sits at the top of the sidebar. Press ⌘K (Mac) or Ctrl K (Windows) from anywhere in the editor to jump into it. ⌘F / Ctrl F works too, so your browser’s “find on page” habit lands in the right place.

It matches on the option’s label, its description, its choices, and the area/section it belongs to. Each result shows its full path, so you can tell two similarly-named options apart before clicking.

Search within the current page

Some sections are long. The magnifier button next to the page title filters that page as you type, hiding everything that doesn’t match. Useful on pages such as Product Card or Image Gallery.

The settings areas

Each area groups related sections, and has its own article. In the sidebar they appear in this order:

• General: site layout and widths, colours, typography, site identity, preloader, global sections, homepage, search and 404 pages, sticky social icons, scroll-to-top, mobile bottom bar, cookie notice, age restriction, fonts, and performance options.
• General → Blog: the blog listing and the single-post layout. Part of General, documented separately because it is large.
• Header: which header layout is used, plus logo, search, navigation, account, cart and the call-to-action button.
• Footer: the footer layout, its width, the copyright text and the reveal-on-scroll effect.
• Page Cover: the cover (hero) area used by pages, the front page and the blog.
• WooCommerce: only shown when WooCommerce is active, and split across three articles: Catalog, Product Page, and Cart, Checkout & Store.
• Advanced: reCAPTCHA, Instagram integration, which post types get Rey’s per-page settings, and admin preferences.
• Additional CSS: your own CSS, in a proper code editor. See How to add custom CSS.

The list is not fixed: enabling or disabling a Rey module adds or removes its section, and areas below WordPress settings in the sidebar are WordPress’s own options that Rey surfaces here for convenience.

Desktop, tablet and mobile

The device switch in the top bar has three states: Desktop, Tablet and Mobile. It does two things at once: it decides which device’s value you are editing, and it sets the width the live preview renders at.

Not every option is responsive. The ones that are show their own small device switch beside the field, so you can change device for that one option without touching the rest of the page. Each device keeps its own value and its own default.

The live preview

The preview button in the top bar opens your storefront in a panel beside the settings, so you can see changes as you make them.

• Resize the split by dragging the handle on the panel’s left edge.
• Change what is previewed with the page-type dropdown in the preview toolbar: a shop page, a product, the cart, and so on.
• Reload the preview, or open it in a new tab, from the same toolbar.
• Zoom (desktop only) renders the page at a wider or narrower logical screen. Lower than 100% simulates a larger monitor. Tablet and mobile always preview at their own device width.

Most style changes (colours, spacing, typography) appear in the preview immediately. Options that change the page’s structure may need the preview reloaded, and the preview always shows unsaved values so you can judge them before committing.

Saving, undoing and discarding

Nothing is written to your site until you save. The Save button shows a counter of how many options you have changed, so you always know there is unsaved work, even if the change was on a different page.

• Save: the button, or ⌘S / Ctrl S.
• Undo / Redo: the arrows next to Save, or ⌘Z / Ctrl Z and ⌘⇧Z / Ctrl Y. These step through your edits one at a time.
• Discard: the bin icon throws away every unsaved change and returns to the last saved values. It asks for confirmation first, and it cannot be undone.

The undo, redo and discard buttons only appear while there is something unsaved. If you try to close the tab or reload with unsaved changes, your browser warns you first.

Save history

Every save records a full snapshot of your settings. The Save history button (the clock icon, next to Save) lists those snapshots and lets you restore any one of them with a single click. Imports and restores are recorded too.

Restoring reloads the editor with the restored values, so you can immediately see what you rolled back to. And because the restore is itself a save, you can roll forward again from the same list.

Tip: This is the quickest way out of “I changed something and now the site looks wrong”. Instead of hunting for the option, restore the snapshot from just before you started.

Resetting an option

Any option that differs from its default shows a small ↺ button beside it. Clicking it puts that one option back to Rey’s default value, without touching anything else. On a responsive option it resets the currently selected device only.

Preferences, import and export

The gear button at the top of the sidebar opens Preferences, split into two tabs.

Import & Export

Export downloads all of your theme settings as a single file. Import takes that file back in: on the same site as a backup, or on another site to copy a configuration across. Files exported by older Rey versions are still accepted.

Editor

These preferences change the editor only, never your website:

• Theme: light or dark interface.
• Field help: show each option’s explanation in a tooltip, or printed underneath the field.
• Setting share links: show or hide the share buttons described below. Hidden by default.

Linking to a setting

With Setting share links switched on in Preferences, a share button appears next to the page title and next to each option. It gives you two things you can copy:

• the option’s full name: its breadcrumb, e.g. Header › Navigation › Hover Overlay;
• a link that opens Theme Settings on that exact option.

Handy when you are describing a setting to a colleague, or to us when you open a support ticket.

What is not in Theme Settings

A few things live on their own screens under the Rey menu, not in the settings editor:

• Modules: turning Rey features on and off. See the Rey Modules articles.
• Elements: enabling or disabling Rey’s Elementor widgets. See Rey Elements.
• Global Sections: the headers, footers, covers and popups you build with Elementor. See Global Sections. Theme Settings is where you assign them.
• Starter Sites: demo import. See Importing demos.
• Per-page settings: options that apply to one page, post or category only. See Settings for individual Page / Post / Taxonomy / Category.

Keyboard shortcuts

Good to know

• Theme Settings requires an active licence. If yours is missing or expired you will be asked to register or renew before the editor opens. See How to register/deregister Rey.
• Options appear and disappear depending on context. Turning off a feature hides the options that depend on it, which is why a setting you remember may not be visible right now.
• Settings changed here are global. When a page needs to differ, override it on that page instead of changing the global value.