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 to it the Frontpage template 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, use either the default, the left sidebar or the fullwidth template, depending on the layout you want for the page. Plugins like Contact Form 7 or Jetpack can help you add contact forms.

(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 your 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 Slides > New Slide, 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×1000), add text in the text editor (optional). Then in the Slider Details panel you can optionally add a subtitle, set a URL to which the user will be redirected when clicking on the slide button. Change the button’s text and publish the slider item.
add-new-slide
Slider speed and autoslide functionality can be adjusted under CSSIgniter settings > Homepage Options.

main-slider-settings

Slider items can be organized into categories. You have the ability to display one of these categories on your homepage by selecting it in the Homepage Options panel drop down. This allows you to create thematic sliders and switch between them very 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 and switch between easily.

4) Adding products

The most important thing about your e-shop is your products. In order to add them 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. The theme also features a menu next to the cart icons on the top right of the page. To use it, create a new menu and assign it to the Top Menu location under manage locations.

hugo-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 which appears as your homepage’s main content:

  • CI Text
  • CI Product Categories
  • CI Items
  • CI Callouts
  • CI Carousel widgets

Duplicate the demo’s layout

On the theme’s demo homepage we have our slider featuring three slider items and the following widgets: A CI Text widget with some information, a CI Product Categories widget displaying three product categories in a three column layout, a CI Newsletter widget, a CI Items widget displaying six products in a three column layout, a CI Callouts displaying three callout items, a CI Items widget displaying two posts in a two column layout and finally a CI Carousel Latest widget displaying the twelve latest 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 them in the Header background metabox located below the page’s/post’s main text editor.

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. Also you can set the number of columns and products your shop listing page will have.

hugo-e-commerce-options

8) Custom Widgets

The theme features several custom widgets that are shown below, help you display your content better.

hugo-widgets

All widgets can be accessed from Appearance > Widgets. Below each widget you will find a small description explaining their function.

The CSSIgniter settings panel

Last but not least, under Appearance > CSSIgniter settings, you can find a custom built settings panel. From here you can shape multiple features your theme has, including, changing your logo, setting a custom background, changing color scheme and applying custom styles via the custom CSS tab. All options include a description so that you instantly know their function.

Additional Information

Useful Plugins

  • CSSIgniter Shortcodes You can use this custom made shortcode plugin to help you create a variety of layouts and elements on your site. 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 Hugo theme are:

  • Featured Thumbnail (used in single posts/pages) : 750×400px
  • Fullwidth image: 1140×475px
  • Header Image: 1920×200px
  • Default shop catalog image: 750×665px
  • Slider: 1920×1000px
  • Listing Page Thumbnail: 500×390px