Setting up your theme

WooCommerce

This theme has the WooCommerce plugin pre-installed for you. If it is deactivated, you can go under Plugins > WooCommerce and activate it. Also go under WooCommerce > Settings and in the Products tab set the image sizes that best fit your shop under the Product Image Sizes section, in case you need different values than the theme sets by default.

1) Creating theme pages

Start by adding the pages you are going to need. Go to Pages > Add New and create the following pages:

  1. Home. This will serve as your homepage. Assign the Frontpage template to it from the Page attributes panel. See below for homepage configuration.
  2. Blog. This will be your posts page.
  3. Contact (optional) here you can place your contact form.

(TIP: all page titles serve as examples, you can name your pages according to your needs.)

Once the pages are created navigate to Settings > Reading, set the “Home” page to be your static frontpage and the “Blog” page to be your posts page, as demonstrated in the image below:

reading-settings

2) Populating your blog

To add new posts to your blog, go to Posts > Add new, title your post and enter content in the editor. Upload a featured image by clicking Set featured image on the Featured Image panel, add a category and/or tag to the post from the respective panels and publish the post by clicking Publish.

add-new-post

3) Adding Slideshow items

To add items to your homepage’s slider go to Slideshow > Add New, set a title for the slider item and upload a featured image (which will be the image displayed on the homepage, images for the slider should be at least 1920×850). Add text in the text editor (optional). In the Slider Details panel you can optionally set a URL to which the user will be redirected when clicking on the slide button. You can also change the button’s text or use a URL to a video that will be displayed on the slider item. Finally, publish the slider item. Slider speed and auto-slide functionality can be adjusted under CSSIgniter settings > Slider Options.

amaryllis-slider-details

Slider items can be separated into categories. You have the ability to display one of these categories on your homepage by selecting it in the Frontpage Options panel drop down. This allows you to create thematic sliders and switch between them easily. For example, if your e-shop features weekend offers, you can create two slider categories. One for the featured items you want to display during working days and one for the weekend ones. In doing so, you will be able to switch between them in a second.

4) Adding products

To add your products, check this detailed guide provided by WooThemes here.

5) Creating your menu

Now that your content is in place, you will need a menu. Go to Appearance > Menus check the pages you want on your menu and add them. Give your menu a name and save it. You will need to set your menu as Main menu. This can be done either by checking the Main menu box in Menu Settings just below your menu items in Menu Structure or by going to the Manage Locations tab and selecting the menu you just created.

amaryllis-menu

(TIP: for more info on creating and managing menus, please read the WordPress Menu User Guide here)

6) Setting up your Homepage

After you create your slideshow items as described above, navigate to Appearance > Widgets and assign widgets to the Homepage sidebar. Τhe following widgets are suggested for the FrontPage Widget Area that appears as your homepage’s main content:

  • WooCommerce Products
  • CI Product Categories
  • Text

TIP: the number of columns outputted by the WooCommerce Products widget can be configured under CSSIgniter settings > Homepage options.

Duplicate the demo’s layout

On the theme’s demo homepage you can see slider items and the following widgets: A text widget with some information, a CI Product Categories widget displaying three product categories sorted by name (A-Z) in a three column layout and finally a WooCommerce Products widget displaying the six most recently added products.

7) Changing Header Display image & Footer text

The default theme’s header display image can be set under CSSIgniter Settings > Appearance Options.
You can also set custom header images for posts & pages by uploading your custom image in the Header background metabox located below the page’s/post’s main text editor.

amaryllis-header-display

The theme’s footer features an area for you to enter your copyright info, privacy policy etc. To change the text you need to go to CSSIgniter settings > Site options and use the appropriate box (5th box down).

footer-text

8) e-Commerce options

Under CSSIngiter settings > e-Commerce options you can toggle the display of up-sells & related products on the single product page. You can also set the number of columns and products your shop listing page will have.

amaryllis-e-commerce-options

9) Custom Widgets

The theme features several custom widgets (that are displayed below) to help you display your content better.
All widgets can be accessed from Appearance > Widgets. Below each widget you will find a small description explaining their function.

amaryllis-widgets

The CSSIgniter settings panel

Last but not least, under Appearance > CSSIgniter settings, you can find the settings panel. From here you can manipulate various aspects of your theme, including changing your logo, setting a custom background, changing color scheme and applying custom styles via the custom CSS tab. All options feature a description so that you know their provided function.

Additional Information

Useful Plugins

  • CSSIgniter Shortcodes You can this shortcode plugin to create a variety of layouts and elements on your website. Instructions can be found here.
  • Socials Ignited Use this plugin to create a widget that links to all your social profiles. You can also customize it with your icons and add new social networks. A guide can be found here.
  • Contact Form 7 Use this plugin to create a contact form, then copy the shortcode it gives you and paste it in an empty page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.

Image Sizes

The recommended image sizes for the Amaryllis theme are:

  • Post Thumbnail: 848×380px
  • Header Image: 1920×340px
  • Slider: 1920×950px
  • Listing Page Thumbnail: 500×390px