Outer

Thank you for choosing Outer & WooCommerce for your online store.

The fastest way to install Outer is through the WordPress admin dashboard.

1. Go to: Appearance > Themes > Add New / Upload Theme
2. Upload the outer.zip file you have downloaded from WooCommerce.com
3. Activate as you would any other WordPress theme then proceed with the Setup and Configuration.

To install Outer manually:

1. Download the latest version of Outer from WooCommerce.com
2. Upload the extracted folder to the /wp-content/themes/ dir on your server via FTP.
3. Activate Outer the Appearance > Themes screen in your dashboard.

More info at Using Themes.

Before proceeding with the install process, please make sure that the WooCommerce is installed.

Once you’ve activated Outer and WooCommerce, your eCommerce site is ready to make use of Outer features & customizations. You can now proceed to the Customization section below.

If you wish to import demo/dummy content for Outer, follow the below steps.

Download Dummy Data:

1. Download the dummy content files from this link – Outer Dummy Content.
2. Extract the files and keep them handy for the next import steps.

Import Content:

1. From your WordPress admin dashboard, go to Tools > Import > WordPress.
2. Click on Install Now button at the WordPress option available in the list.
3. Once the installation is complete, it’ll show a new option to Run Importer, please click on it.
4. From this WordPress Importer page, click on Browse and select the file ending with .xml from the above downloaded & extracted Dummy files.
5. Now click on Upload File and Import, it’ll ask you two things, (a) To assign authors for the import data you can select from the options below or keep it as it is (b) To download and import attachments, this option imports the media used in the dummy content.
6. Hit the Submit button now, once this completes you’ll be greeted with a successful import message.

Import Widgets:

1. Make sure you have Widget Importer & Exporter plugin installed & activated, if not please do so to continue with the below steps. (Learn more about managing plugins)
2. From your WordPress admin dashboard, go to Tools > Widget Importer & Exporter, it will take you to its import & export page. 
3. Click on Browse, and select the file ending with .wie from the above downloaded & extracted dummy files.
4. Hit the Import Widgets button, once this upload completes all the widgets will be imported into your site (Note: This can take up to 2min to import).

To make your site look exactly like our demo, you can set a static homepage either by selecting the Home page from imported dummy pages or by selecting your own.

Follow these steps to set it:

1. From your wp-admin Dashboard, go to Appearance > Customize > Homepage Settings.
2. Once you’re in the Homepage Settings panel, set homepage display as to A static page option.
3. Post the second step you’ll need to select a page for homepage, select Homepage imported in the demo data above from the dropdown menu.
   
   Note: This will also require you to set a blog/posts page, select Our Blog Articles page imported in the demo data or create a static page and select it.
   
   
4. Last step is to hit Save/Publish button visible at the top.

You can now proceed with the site customization and modifying the dummy content/pages as per your store needs.

Your customization settings are located under Appearance > Customize > Site Identity, Colors, and Theme Options respectively.

You can change your logo and favicon at Site Identity section.

Additionally, you also have an option to enable Retinafy Site Logo, once enabled site logo will be shown at 50% width/height of its original size, making it look sharper and crispier. (We recommend uploading a 2x image for the logo if this option is enabled.)

At Colors section, you will be able to set your site Color Scheme (Dark/White).

You can also change the color scheme palette by overriding the color options available in each scheme. This panel also includes color selection for theme buttons and their hover behavior.

At the Menus section, you can set up your menus. Outer has 2 menu locations Primary and Footer.

Setting up your menus is standard to all WordPress themes and is described in detail in the official WordPress documentation: https://codex.wordpress.org/WordPress_Menu_User_Guide

Under the Theme Options panel, you can find all the other theme-related controls and settings.

Outer has a wide range of controls for all of the important aspects of your site namely Typography, Theme Buttons, Layout, Header, Footer & some extra Site Settings.

At the Theme Options > Typography section, you can set up the body & headings font from the vast library of Google fonts.

You can also control the site font sizes from the font scaling system provided under this panel, which controls both body & headings text used throughout the site.

At the Theme Options > Theme Button section, you can control the text & border-radius for the buttons used throughout the theme.

At the Theme Options > Layout section, you can control the content width for singular posts & pages. There is also Blog layout and columns control for Grid layout.

At the very bottom of this section, you will find Hide titles for Pages control, which as the name suggests let’s you hide titles from front-end pages. And this is a multi-selection control, so you can select as many pages as you’d need.

At the Theme Options > Header section, you can set the layout of the site header from 2 provided styles (Default and Centered).

You can also toggle header magic links such as Search, Cart, Account, Light/Dark Mode.

At the Theme Options > Footer section, you can add a CTA block to the footer, you can find the steps to do so at here.

You can also toggle the CTA block display conditions according to your preference for e.g. at shop & homepage only. You also get the option to control footer widget columns and text at the very bottom.

Outer’s site color scheme feature comes enabled by default with two palettes namely Light and Dark, you can customize these palettes to your preferred colors and have them toggle via a front-end toggle available at the header.

To customize the palettes for each of the color schemes, from your WordPress admin dashboard, go to Appearance > Customize and then Colors section. Here you’ll be able to select and preview changes to the respective color scheme.

Here’s a screenshot of the Color Scheme controls available at WordPress Customizer Colors section.

Switching between these two color schemes will toggle their respective color controls and changes/previews should be a cakewalk following this. You can also try previewing other pages or theme buttons to adjust their color and hover behaviors.

Here’s a screenshot displaying color defaults set for the Dark color scheme palette.

You can also enable the front-end toggle available at the header, to enable this from the WordPress Customizer go to Theme Options > Header section and enable the Light / Dark mode switch available at the very bottom.

Once you toggle the Light / Dark mode switch from the above-shown Header section, a color scheme toggle icon will be displayed at the very top right of the site header.

Note: This frontend color scheme toggle comes disabled by default in the Customizer, for color control live previews in the Colors tab.

If you ever wish to reset the color schemes back to their defaults, you can always find the Reset color scheme button at the very bottom of the Colors tab.

Outer uses the re-usable blocks feature from Gutenberg aka Block editor to add a call-to-action block at the footer of the site. To know how you can create one for your own site and display it at the footer, follow the below steps.

1. From your WordPress admin dashboard, create a new post, or open the block editor page from any post/page.

2. Once you’re in the editor create a desired block with your content. At our demo we have a cover block with one heading and paragraph blocks inside, here’s a screenshot for reference –

From the block toolbar for that respective block, click on the 3 dots button at the very end which says “more options” and it should expand another list of options below. Now click on the “Add to Reusable blocks” option.

Once you do that it’ll ask you to give it a name, enter a name as you prefer, and make sure to hit save.

Note: You are not required to save the page/post you’re using to create a reusable block.

To make it visible at the site footer, you need to set the same reusable block which we just saved above, from your admin dashboard go to at Appearance > Customize and then Theme Options > Footer > CTA Block.

Take a look at the below screenshot for reference:

You can further use the “Display on” toggles to conditionally set the display of this block at the footer on your desired pages, in the above screenshot from the demo site we have it set to display only at Homepage & Single Products page.