Search

Artificer

Setting up the homepage ↑ Back to Top

After you’ve installed the theme, you will notice your homepage looks a bit empty. You must install and activate the WooCommerce plugin to begin setting up your homepage. To learn more about setting up WooCommerce please see the docs here: Setting up WooCommerce

Stand First ↑ Back to Top

This is the main text area on the homepage with a button for a call to action.

Artificer Stand First

Artificer Stand First

The main headline is your site title which you can set in Settings > General. To set the text beneath go to: Artificer > Theme Options > Homepage Options > Stand First to add your text.

Other homepage content ↑ Back to Top

There are a couple of other options on the Homepage theme option. First you can specify your store information (phone number, email address) and whether you want to display that on the homepage or not. This only appears on the homepage sidebar. Secondly, you can define whether to display your latest tweet or not. This will also appear in the sidebar and your Twitter ID is specified in the contact details tab.

Store Info and Twitter Homepage Sidebar

Store Info and Twitter Homepage Sidebar

Homepage Products ↑ Back to Top

The products on your homepage are pulled in from your featured products and ordered chronologically. To make a product featured navigate to your products and either check the star here on the products overview.

Featured Products Overview

Featured Products Overview

Or when you are editing a product you can set it as featured too.

The fourth most recent product will appear larger than the rest, so remember to re-order the products by date accordingly.

WooCommerce Image Sizes ↑ Back to Top

While we’re talking about the featured products, you’ll want to be sure to set your WooCommerce image sizes correctly. In particular, since the fourth most recent product has a larger image size than the rest. Set your image sizes as follows.

Artificer WooCommerce Image Sizes

Artificer WooCommerce Image Sizes

  • Catalog Images – 197px width / 197px height
  • Single Product Image – 425px width / 425px height
  • Product Thumbnails – 100px width / 100px height

If you’ve already uploaded product images be sure to use the Regenerate Thumbnails plugin to create new thumbnails for your site.

WooCommerce Options ↑ Back to Top

Beneath the Homepage settings you’ll find the WooCommerce Options. Here there are a few options regarding your products, and the layout of your WooCommerce pages.

Products

Here you can specify how many products to display per page, on product archive pages.

Layout

Here you can specify whether or not to display a sidebar on the shop archive pages. If so you can populate that sidebar with widgets as usual. However if you choose not to display a sidebar here the product container will simply expand to fill the full width of the theme wrapper.

Custom Shortcodes ↑ Back to Top

There are three custom shortcodes built into Artificer which you can use throughout your site.

Mini Features


The mini features shortcode allows you to to easily display short snippets of content in columns of 3 alongside icons, as displayed in the screenshot above.

This shortcode should be laid out like so:

[mini-feature-wrap]
[mini-feature icon="http://path.to/image.png" title="Feature 1"]
Feature Description.
[/mini-feature]
[mini-feature icon="http://path.to/image.png" title="Feature 2"]
Feature Description.
[/mini-feature]
[mini-feature icon="http://path.to/image.png" title="Feature 3"]
Feature Description.
[/mini-feature]
[/mini-feature-wrap]

Take note that features will most effectively be displayed in multiples of three as the CSS automatically sorts the mini features in to rows of 3. Also note than the mini features must be wrapped inside the [mini-feature-wrap].

Sale

The [sale] shortcode allows you to easily display a sale banner anywhere on your site. This tandems nicely with our sale page template.

To use the [sale] shortcode simply wrap your sale banner content within [sale] tags like so:

[sale]Sale now on, up to 50% off all stock![/sale]

Sticky

The [sticky] shortcode allows you to easily display notices on your site which are styled to appear as post-it notes. This is perfect if you want to make a short piece of content stand out somewhere on your site. It can be aligned to the right or the left of your content and be given a custom class.

To use the [sticky] shortcode simply wrap your message within [sticky] tags like so:

[sticky]This is a sticky note, awesome![/sticky]

As you would expect, you can attach any class name you like to the sticky shortcode, just incase you want to add any further custom styles to a particular sticky.

Back to the top