Mugistore Theme

1. Getting Started

After the theme and required plugin installations, you can either import the demo data via Appearance→Theme Setup or start from stretch following the WooCommerce store setup wizard.

In order to use Mugistore’s product patterns, you also need to have WooCommerce products and WooCommerce categories.

2. Header

I always recommend setting up the Header and Footer of your website first.

To customize the Header, go to Appearance > Editor. From here, click on the top left icon (this is either the WordPress logo or your site logo) to open the site navigation panel. Click on Template parts to open the Template Parts overview.

Now click on ‘Header Shop’ to open the Mugistore Header template part. You will see the editor view of your Mugistore header template part.

At the moment Mugistore comes with one Header pattern, but we will add more alternative patterns to choose from.

Tip for the Editor:
To get a better overview of the blocks and nested blocks in use, I recommend to have the List view open when working in the Editor.

IMAGE: List View

For small Template parts like the Header it can also be helpful to activate the Top toolbar view.

IMAGE: Top toolbar

2.1. Navigation menus

The default Mugistore Header comes with the following navigation options:

1. Tablet- and desktop-only Navigation top bar left.
2. Tablet- and desktop-only Navigation top bar right.
3. Desktop-only main navigation in middle header element centered.
4. Account/Sign up page link with Account icon.
5. Mobile- and tablet-only navigation right-aligned with Mobile icon always on.

Image: Numbered Navigations in editor (1-5)

To fill the Navigation block with your links you need click on the Navigation placeholder and a Plus-Symbol will occur. Now you can click on the little ‘Plus’ button to add links to your Navigation block to create a new Navigation.

IMAGE: Add link to Navigation block

As a second option you can open the Block settings panel via the Settings icon on the top right of the editor and choose a previously created Navigation from the select panel under Menu.

IMAGE: Select menu for Navigation block from block settings.

account-icon class for Account page link

3. Footer

4. Landing Page

Once you have added products, you can start to set up your website’s landing page. If you have imported the demo content, you will have our sample products in your WooCommerce products catalogue. If you start without the demo content, please make sure that you have a number of WooCommerce products added before starting. Otherwise, the WooCommerce products blocks on the landing page will be empty.

Select the ‘Header and Footer’ Page Template. Find out how to select a page template. (Link to tutorial)

Now open the block inserted panel, click on the ‘Page’ pattern category and select the ‘Landing Page’ pattern. The entire Landing Page content will be added to your site.

You can now exchange the demo content with your own.

Alternatively, you can select individual patterns from the patterns’ category to build your own landing page.

5. Styles