Eris Shop is WooCommerce ready WordPress theme. It’s extended version of popular Eris theme – beside portfolio and blogging capabilities, now allows user to set and use online store. Eris Shop combines simplicity and design with great features that will help you to boost sales.
WordPress is well-known for its ease of installation. Under most circumstances, installing WordPress is a very simple process and takes less then five minutes to complete. Many web hosts now offer tools to automatically install WordPress for you. However, we strongly recommend that you install WordPress yourself, the following guide will help http://codex.WordPress.org/Installing_WordPress.
Theme can be installed in two different ways:
- Installing through WordPress
- The Traditional installation using FTP client
Installing through WordPress
Installing a theme through WordPress is quite easy and it will take only few minutes of your time. Login into WordPress admin panel, and go to Appearance -> Themes. Click on Add New button, and then Upload from the navigation bar right below it. Click on Choose File button, and browse your computer for eris.zip file and click Install Now. After installation is complete, click on Activate link.
Very important note if you bought the theme from Themeforest: Please do not upload the whole file you have downloaded. Browse for eris.zip file inside WP directory, in the main file you have downloaded.
The Traditional installation using FTP client
First things first, you will need an FTP client (example FileZilla which is free, easy to use and it works on Windows, Mac and Linux) to access your web host server. Now that you have access to your WordPress installation files simply transfer your unzipped theme to your server in the ..wp-content/themes/. The only thing left to do after that is activating the theme, to do that go to your WordPress admin panel and navigate to Appearance -> Themes, search for Eris and click Activate link right below it.
Very important note if you bought the theme from Themeforest: Please do not upload the whole file you have downloaded. Browse for eris.zip file inside WP directory, in the main file you have downloaded. For more detailed explanation on how to install themes, visit this link.
First Steps After Theme Activation
Eris theme uses latest post reading setting. Of course, you can set theme to display desired static page, instead of posts, but you will also need to create posts page.
Setting theme reading settings – Latest Posts landing page
Login into WordPress admin panel, and go to Settings -> Reading. Set Front page displays option to Your latest posts. Press Save Changes button in order to populate changes.
Setting theme reading settings – Static Page landing page
Login into WordPress admin panel and go to Pages – > Add New. Create new page – enter title (e.g. Home). Click on Publish button in order to populate page. Now create another new page (e.g. Blog), with Default page template, using the same method.
When you are done, go to Settings -> Reading. and set the theme to display static page. Then select previously create pages – for Front page select your desired page (e.g. Home), and for Posts page select your page with Default page template (e.g. Blog) . The page you select for your Post page will display all blog posts.
Press Save Changes button in order to populate changes.
Next important thing to do is setting your permalinks, we strongly suggest the use of pretty permalinks. Go to Setting -> Permalinks and select Post name.
Installing suggested plugins
Eris Shop theme comes with extra plugins. After theme activation, you will be prompted to install and/or activate those plugins.
Some plugins are required, since they adds theme functionalities. Other plugins are there to add some extra features.
- Eris Shop Custom Post Types
- Eris Widgets
- Flickr Badges Widget
- MailChimp List Subscribe Form
- TK Advertising Widget
- TK Contact Form
- TK Shortcodes
- TK Social Share
- Widget Visibility
Eris Shop Custom Post Types
Kirki is plugin that enhances theme experience by adding useful elements in the customizer, like image position picker, font settings and such.
WooCommerce is a free eCommerce plugin that allows you to sell anything. Built to integrate seamlessly with WordPress, WooCommerce is the world’s favorite eCommerce solution that gives both store owners and developers complete control.
Eris theme comes with custom widgets which extends default widgets. Included widgets are:
Flickr Badges Widget
Flickr Badges Widget plugin allows you to display your Flickr photos in the sidebar. After activating the plugin an new widget called Wolf Flickr will be available in Appearance -> Widgets. Here you can set widget options – enter Flickr username, title, text and number of photos.
MailChimp List Subscribe Form
MailChimp List Subscribe plugin allows you to quickly add a MailChimp signup form widget to your WordPress.
TK Advertising Widget
Advertising Widgets adds custom post type Advertising. With advertising you can create ads and display them on site. Advertising allows you to create custom banners or to paste third-party banner code(Google Ads). Learn more about Advertising plugin.
TK Contact Form
TK Contact Form allows creating and setting simple contact form and adding Google Map to any post or page. Form can be added using [tk_contact_form], and map can be added using [tk_contact_map]. Contact settings can be changed in Customizer -> Contact Settings.
TK Shortcodes plugin will add awesome shortcodes to your theme. With them you can enrich your content and create different content layouts. Learn more about Themes Kingdom Shortcodes.
TK Social Share
TK Social Share plugin adds social share component to Eris theme. After plugin installation, and activation, new option TK Social Share will appear in admin panel sidebar. TK Social Share plugin settings:
- General Settings: Her you can set turn on or off where social share plugin will appear – on posts, pages and on archive page.
- Social Settings: Easily add or remove desired sharing services. Simply drag and drop desired social networks sharing to enabled services.
- Display Settings: Display settings panel allows you to customize position of sharing buttons, and to select style for your sharing buttons.
Instead of dealing with different sidebar areas and setting same widgets for different pages or posts, this plugin allows you to set visibility for each widget. This means that you can set which widget will appear on what page and/or post.
In Appearance -> Widgets you will find that each widget now have additional button Visibility. Read more in Widgets section.
Importing Demo Content
Read first: Before importing content, please make sure to install all required plugins!
Traditional Demo Import
If you want your site to look like Eveny demo, you will need to import demo content.
Go to your Themes Kingdom account and click on the XML icon to download demo file.
After download is complete, you will need to import demo content:
- Login into your WordPress admin panel.
- Go to Tools -> Import.
- Click on the WordPress, install the plugin if you don’t already have it.
- When the plugin is opened click on the Choose File button.
- Select XML file you previously downloaded.
- Select authors to assign to posts. You may choose an existing author or create a new one.
- WordPress will then import each of the posts, pages, custom post types, comments, and categories contained in our demo version.
- Done! Very important thing to do after you are done with importing demo content is updating menus. To do that go to Appearance -> Menus. Select desired menu and under the Menu Settings at the bottom of the page check Primary Menu, then click Save Menu button to save changes.
For more detailed explanation how to Import demo content, visit this link.
The Customizer is great WordPress feature which allows you to customize theme and set theme options. Customization options available in The Customizer:
- Site Identity
- Background Image
- Contact Settings
- Front Page Settings
- Color Settings
- Eris Settings
- Additional CSS
Site Identity allows you to set your site logo, title, tagline and icon. Site title is the name of your site and it’s displayed in the header, where logo is displayed. Tagline is short description, or your motto, and it’s displayed just under the title.
- Logo: For logo set JPG, JPEG or PNG image.
- Logo Size: Moving slider to the left or right will increase or decrease logo size. Changes in logo size will be displayed in the preview panel.
- Site title: Name of your site. Site title is displayed only if logo is not set.
- Tagline: Site punchline. Tagline will be displayed together with logo or site title.
- Display Site Title and Tagline: If enabled, both title and tagline will be displayed in the header.
- Site Icon: The Site Icon is used as a browser and app icon for your site. Icons must be square, and at least 512px wide and tall.
Background Image allows you to upload image that will be used as background image instead of solid color.
- Background Image: Upload your background image. JPG, PNG and GIF formats are supported.
- Background Repeat: If you are using large, one piece image, then you should set No Repeat option. However if you plan to use smaller, repeating pattern, then you should select:
- Tile: Image will be repeated by default, starting from top left corner.
- Tile Horizontally: Image will be repeated horizontally, starting from top left corner.
- Tile Vertically: Image will be repeated vertically, starting from top left corner.
- Background Position: Defines where and how background should be placed. You should use Center if you are using large, one piece background.
- Background Attachment: Defines if background image will have fixed position, and always visible to the user, or it will scroll as user scrolls through the site.
This option allows you to quick manage created menus. You can select which created menu will be displayed as Primary Menu or Social Menu. If you need to manage actual menu items, you can do that in Appearance -> Menu.
Widgets section allows you to quickly manage widgets in widget areas. This option allows you the same possibility as Widgets option in WordPress admin panel.
Front Page Settings
This option works the same way as Settings -> Reading. It allows you to set them to read latest post or to use static pages for landing and blog page.
In Contact Settings you can manage contact form and map settings that will be displayed on page or post where shortcodes are included.
To display form, use [tk_contact_form]; and for displaying map is used [tk_contact_map] shortcode.
- Display contact page map: If checked, map will be displayed. If it’s not checked map will not be displayed regardless if the shortcode is included in the post or page.
- Display contact page form: If checked, contact form will be displayed. If it’s not checked contact form will not be displayed regardless if the shortcode is included in the post or page.
- Contact Email address: Email where messages submitted through contact form will be sent.
- Google Maps API key: Map is displayed using Google Maps. Google Maps require for each user to create and set API key. Guide how to create and set Google Maps API key: https://help.themeskingdom.com/knowledge-base/how-to-generate-google-maps-api-key/
- Map Color: Custom color which is used to highlight map.
- Map X coordinate and Map Y coordinate: Desired location longitude and latitude. You can get map coordinates here: http://www.mapcoordinates.net/en
- Map Zoom Factor: Default level of Zoom. Maximum value is 21, minimal value 1. For best visibility recommended value is 16.
- Map Marker Title: Text that you wish to appear on map marker info bubble. If empty, info bubble will not be displayed.
- Upload Marker Icon: Image that will be displayed instead of default Google Maps pin. Image should be 115x60px in JPEG or PNG format.
- Map Type: Select map type to display. Hybrid(combination of satellite and roadmap), Roadmap, Satellite and Terrain map types are available.
Front Page Settings
Front page settings controls slider, call to action and products sections on the front page.
Slider settings control presenc of the slider and effects.
- Enable Slider section: Turn on to enable slider on the front page. Please note that this is different slider than slider on portfolio page. This slider is using items from Slider section.
- Parallax effect: If enabled, slider will have parallax effect.
Call to Action Settings
In Eris Shop theme is possible to create several call to action sections.
- Enable Call to Action section: If enabled, call to action sections will be displayed on the front page.
- Layout: How call to action sections will be displayed – in two, three or four columns; or shuffled.
- Repeater Sections: List of blocks with created call to action sections. Each block can be expanded and independently set.
- Add New: On clck, new call to action section will be created.
Each call to action block can have different settings. Options that allows feature menagement:
- Heading: Call to action title that will be displayed on the front page.
- Heading color: Color for call to action heading.
- Heading font size: Heading can be set as small, medium or large. Sizes in pixels are: 20px, 36px and 50px.
- Description: Text related to call to action section. HTML formatting is accepted.
- Description color: Color for text description.
- Link text: Text that will link to desired URL.
- Link URL: Where previously entered text will lead.
- URL text color: Color of text that is used for URL.
- Hover URL text color: Color of text that is used for URL on hover.
- Text Alignment: Position of text on the cover image.
- Make full-width: Call to action section will be wide as content area.
- Cover image: For call to action section can be set background image.
- Background Color: If cover image is not set, background color will be used instead.
Product Archive Settings
Defines layout of product archive pages, and what products will be displayed.
- Enable Product Archive section: Turn on to enable products section on the homepage.
- Heading: Heading for products section. Can be left empty.
- Shop Layout: Products can be displayed in two, three or four columns; or in shuffle mode.
- Shop Archive Display: What products will be displayed – new, products with discounted price, top rated, featured or products from specified categories.
- Number of products to display: How many products will be displayed on the homepage.
WooCommerce panel keeps settings specific for shop – layout, what products and categories will be displayed, and theme specific image sizes for the shop.
Store notice is small marketing enhacment. Enter desired text, and enable it and it will be displayed just above the header. Very useful for promoting sales, new products and such.
Product catalog defines how WooCommerce pages – main store page and product category pages will display products, how many and in what layout.
- Shop page display: Choose what to display on the main shop page – products, categories or both.
- Category display: Choose what to display on product category pages – products, subcategories or both.
- Default product sorting: Defines what parameter will be used for default product sorting.
- Shop page layout: Products can be displayed in two, three or four columns; or in shuffle mode.
- Number: How many products will be diplayed per page. For optimal loading speed this number should be between 2 and 20. In most cases 12 will work the best.
Settings related to image width on shop and single product page.
- Main image width: Main product image widht, which will be used on single product page.
- Thumbnail width: Width for main product image on shop page.
- Thumbnail cropping: How thumbnail will be cropped. There are three settings: 1:1 – image will be cropped proportionally based on original dimensions; Custom – depednign from input value, cropping will use that proportion; uncropped – image will be scalled down.
Colors panel allows you to set color for some elements in the theme.
- General Theme Colors: General colors of the theme. Here you can set colors for headings, links, text…
- Header Colors: Color of main navigation elements and header navigation background color.
- Slider Colors: Background and navigation elements colors.
- Footer Colors: Footer background, link and text colors.
Eris options panel contains theme specific settings.
Header settings option allows you to manage how navigation will be displayed, and to enable or disable fixed header(“sticky” header). Header cart can also be turned on here.
Portfolio settings allows you to set portfolio page layout and number of items that are displayed.
Layout can be displayed in shuffle mode (items are randomly placed on the page, without strict order), three or four columns where items are nicely sorted.
Portfolio Page Header
In this panel you can set what will be displayed on portfolio page header and number of portfolio items.
- Choose what you wish to display on top of Portfolio page template: In header can be displayed featured slider or headline text; or header can be left blank.
- Exclude projects from this category to display in portfolio listings: Portfolio items that are displayed in the slider will be excluded from listing on portfolio page.
- Select Projects Number: Number of portfolio items that will be displayed on portfolio page.
Eris Paging Settings
- In Paging settings you can set paging type – infinite load or standard paging; on infinite load posts will be displayed in chronological order, while another set of posts will be loaded on click or scroll. Standard paging will display number of posts that is set in reading settings, while for paging are displayed next and previous arrows.
- You ca can set how infinite scroll will work – on scroll or click. On scroll new posts will be loaded when you reach end of page; while loading on click will display new posts when you click on load more button.
Eris theme allows you to set font family for headings, paragraphs, and navigation elements.
In Footer Settings can be entered text in combination with HTML to display credits, copyright information, additional information…or anything else.
In Additional CSS section can be entered any custom CSS definition without need to create child theme.
Eris theme comes with one default menu location – primary menu, and social menu.
The Primary menu is located in theme’s header area. This menu can contain custom links, pages, categories, tags, or posts.
Social menu is used to display links to the social profiles.
Creating Primary menu
Login into WordPress admin panel and go to Appearance -> Menus. Click on Create a new menu link. Enter name for your menu(e.g. Primary), and press Create Menu button. Your new menu is created. Now you can add your pages, posts, categories, tags and links to the menu. When you are done check option Primary Menu and press Save Menu button.
- Click on “create new menu” to add new menu.
- Here you should define a name for your menu, after that click on the Create Menu button right next to it.
- Select pages you want to add to your menu. When you are done with selecting pages, click on Add to menu button below. You can also add custom links, posts, categories etc. as you can see in the panels below.
- If you want to customize or delete menu item, click on the arrow icon in the top right corner of the menu box to expand it. Inside you will find:
- This menu editor allows you to create multi-level menus. To do that simply hold your left mouse button and drag desired menu items left or right. Dragging menu items slightly to the right will make them sub-menus for the menu item that is above them. You can also change the order of appearance of menu items by dragging them up or down. Remember to save the changes when you are done with editing (No4).
- Set “Primary Menu” check box to checked if you want this to be your primary menu.
Widgets are used to add content and features to your sidebar and footer. There are default WordPpress widgets and and custom widgets that come with the theme. Adding and removing widgets is quite easy, just follow the instructions below:
Login into your WordPpress admin panel and navigate to Appearance -> Widgets.
- Choose a widget you would like to use, and drag it into the sidebar to right (shown in No 3). Widgets will become active after a page refresh.
- Widget area where you place desired widgets.
- You can add, remove or customize widgets in widget areas. To do that click on the arrow icon in the top right corner of the widget box to expand it. You can also change the order of appearance by simply dragging widgets up and down.
Eris theme have four widget areas – default sidebar, and two footer widget areas.
If you have installed Widget Visibility plugin that is bundled with the theme, you will be able to set widget visibility depending from post or page. Visibility works in simple if or if not logic. This means that you can set widget to be visible if some condition is, or if it’s not matched. Widget visibility options will be displayed as part of the widget.
Show widget only on contact page: Select from dropdown Show only, and then from list check box near your contact page. Save changes. This way widget will be displayed only on contact page.
Hide widget only on contact page: Select from dropdown Hide, and then from list check box near your contact page. Save changes. This way widget will be hidden only on contact page.
Advertising widget allows you to display ads in sidebars and footer, in order to use this widget you will have to install TK Advertising Widget plugin. You can find out how to add new ads in chapter Advertising.
- Select Ad: Select ad you want to show.
- Ad size: Ads can be shown in “fullwidth” or “halfwidth”. Size is calculated based on widget area width.
- Bottom margin: Spacing between bottom of the ad and the next widget. Value is in pixels.
- Top margin: Spacing between top of the ad and the next widget. Value is in pixels.
Flickr widget allows you to display images from Flickr, in order to use this widget you will have to install Flickr Badges Widget plugin.
- Title: Insert widget title.
- Type: The type of images from user or group.
- Insert Flickr ID: Instructions how to get Flickr ID: http://zourbuth.com/tools/flickr-nsid/ .
- Number: Insert number of images you want to be displayed in the widget.
- Display Method: You can set widget to display latest or random images.
- Sizes: Set size for displayed images. It can be standard, thumbnail and medium.
- Show Copyright: Show widget copyright with link on the front page.
- Save widget settings.
Facebook widget allows you to place URL to your Facebook page. After you add Facebook page URL, Facebook like box will appear in desired widget area. Make sure that you are using your page full URL (example https://www.facebook.com/themeskingdom).
Newsletter widget works with two services – MadMimi and MailChimp. Both MadMimi and MailChimp will require that you to have an active account. For detailed instructions how to set MadMimi or MailChimp accounts, please check this link.
Twitter Stream widget
Twitter widget will display desired number of latest Tweets. It requires you to have Twitter account and Twitter API key.
You can find all the instructions how to setup Twitter here.
- Title: Title that will be displayed above the tweets.
- Consumer key: Key that you have generated in Twitter API setup. Details how to generate API keys can be found here.
- Consumer Secret: Equivalent to your Twitter password. Details how to generate API keys can be found here.
- Access Token: Twitter API token. Details how to generate API keys can be found here.
- Access Token Secret: Twitter API token password. Details how to generate API keys can be found here.
- Cache Tweets: Twitter caching option that allows you to set how often tweets will be obtained. This option should speed up site, and reduce chance that you will hit Twitter API calls quota. Usual value is between 2 – 4 hours.
- Tweets to display: Number of tweets that will be displayed.
- Exclude replies: Check this option if you don’t wish to display replies to your tweets.
Instagram feed widget
Instagram feed widget will display images from desired Instagram account.
- Title: Title for your Instagram feed widgets.
- Username: Instagram username from which will be displayed images.
- Number of photos: Number of photos that will be displayed in the feed.
- Open links in: Where links will be opened – in the same tab or in the new one.
- Link text: Text that will appear for Instagram profile link.
Eris theme comes with several different post formats: Standard, Gallery, Video, Quote and Link.
- Post title: Name of your post. It will be displayed on the front end.
- Post content: Content of your post – text, images, shortcodes and other.
- Publish: Publish options. You can set custom date and time for publishing your post, and set post status – draft, in review or published.
- Post formats: Different post formats will display content in different way. You can choose one of the following post formats:
- Category: Each post in WordPress is filed under one or more categories. This aids in navigation and allows posts to be grouped with others of similar content.
- Tags: Tags are words that allows you to organize posts by similar content.
- Set featured image: Featured image will be used as cover image on front end.
Standard post format
Standard post format is the most common format, and it can be used for different purposes. In Standard post format, featured image will be displayed above the title and post content.
Gallery post format
Gallery post format allows you to set several images which will be displayed as slideshow on the single post page. After selection Gallery format, additional Gallery Fields will be displayed. You can add additional Gallery images fileds, so you can upload desired images. Featured image will be used as cover image on the front page, while additional images will be displayed as slideshow on single post page.
Video post format
Video post format allows you to easily add video to your post. After selecting Video format, additional Video Options panel will be displayed below editor area. Here you can paste URL to your video (e.g. YouTube, Vimeo…). Player with your video will be displayed above the post title and content.
Quote post format
Quote post format is great way to display different thoughts. After selecting quote Quote post format, two additional fields for quote text and quote author will be displayed below the editor. On the front end, featured image will be displayed above the quote text and quote author. Featured image and text will be displayed on black background, so quote and image will look like poster.
Link post format
With Link post format you can create cool looking links to interesting Internet locations. After selecting quote Link post format, two additional fields for link text and link URL will be displayed below the editor. On the front end, featured image will be displayed above the quote text and quote author. Link post format will display featured image above the post title and link text. Featured image and text will be displayed on white background.
Pages are for content such as About, Contact, etc. Pages live outside of the normal blog chronology, and are often used to present timeless information about yourself or your site — information that is always applicable. You can use Pages to organize and manage any content.
Eris theme uses different page templates to display different information. Included page templates:
- Default Template – Default Template is multipurpose page template, without any special property.
- Portfolio Template – On page with Portfolio Template will be displayed all Portfolio items.
Portfolio is custom post type, that comes with Eris Custom Post Types plugin. Portfolio(or Projects) are used to display your work on page with Portfolio Tempalate. Portfolio items can be associated with Portfolio categories.
- Project name: Enter your project name.
- Project content: Content of your project – text, images, shortcodes and other.
- Gallery Images: Multiple images for portfolio slideshow. When uploading image, make sure that image points to file URL.
- Display type: Portfolio can be displayed in two ways – standard and split. Standard view will display featured image or slideshow at the top of single portfolio page, and under it will be displayed additional content. However, with split view, on the left side will be displayed content, and on the right side of page will be displayed images. Split is mostly used when you have portrait images.
- Publish: Publish options. You can set custom date and time for publishing your project, and set project status – draft, in review or published.
- Tags: Tags are words that allows you to organize portfolio items by similar content.
- Category: Each project can be filed under one or more categories. This aids in navigation and allows projects to be grouped with others of similar content.
- Set featured image: Featured image will be used as cover image on front end.
Slider section is used for creating slides. Slides are displayed on the landing page. Slider on the landing page is different than slider on Portfolio page which is using portfolio items as slides.
- Slider title: Name of the slider which will also be displayed on the front page.
- Slider content: Text that will be displayed on the slider.
- Headline font size: Title font size.
- Headline URL: Link where headline will point.
- Headline color: Headline text color.
- Headline hover color: Headline color on hover event.
- Text color: Content text color.
- Text alignment: Position of the text. It can be center, left or right.
- Once you click update/publish, your slider will be published.
- Slider Categories: Slides can be organized into categories for better organization.
- Featured Image: Featured image is used as cover image in the slider.
Advertising post type allows you to create ads that will be displayed in Advertising Widget. This widget can be placed in footer, custom sidebar or default sidebar. In order for this custom post type to be displayed in your admin make sure to install TK Advertising Widget Plugin. You can find additional information regarding this plugin in Included plugins section.
- Advertisement name.
- Ad view / click statistics. Blue line represents number of views and while red represents number of clicks.
- Advertisement link: Link where advertisement is pointing. You should enter full URL (http://www.example.com).
- Custom banner code. Here is a guide how to get Google AdSense code.
- Once you click update/publish, your ad will be available in Advertising Widget.
- Featured image will be used as advertisement image.
You can find more information how to use Advertising Widget in Advertising Widget section.
If you need additional assistance for this theme, please submit a ticket in our support system.