Adelaide ecommerce theme - your store's header

From Spiffy Stores Knowledge Base

Editable areas in your store's header


The header of the Adelaide theme contains your logo, menus, and links to your cart, search and login pages. The options can be edited in your theme editor in the Store Header section of your Theme Editor.

We'll go into detail with some of these sections below.

  1. Your logo
  2. Your top menu
  3. Setting up drop-down menus
  4. Setting up a mega menu


You can upload your own logo in the Store Header section of your Theme editor. You simply tick the Use a logo? option, select your logo file, and click the Save Settings button.

The theme editor will resize the logo for you when you upload it. You can also set your theme to resize the logo to a maximum width. This is handy for getting the position and sizing of your logo perfect.

A tall thin logo will not look good in this theme, and you would do better getting a designer to come up with an alternative solution for you. If you need assistance with this, please contact us.

Using Pixlr to create create a logo image

Pixlr is a free online image editing program, where you can edit your images in your web browser.


  1. Go to the Pixlr editor
  2. Click "Create a new image"
  3. Set the width to 580 and the height to 200, tick the "Transparent" box, and click OK. 580px is the maximum width that your logo will be displayed in your store. 200px is the recommended maximum logo height.
  4. You now have your canvas to work within. You will need to explore the various tools and options.
  5. Open your own logo image in Pixlr using "File -> Open image" in the Pixlr menu. Select the "Wand" tool, and select only the type and any icons in your logo. There are also various other tools available so that you can select your logo without the background.
  6. Once you have your logo selected, you can then copy and paste it into your canvas.
  7. When you have pasted your logo image into the canvas, you can resize it by using the <CTRL> and <T> keys on your keyboard. Make sure you're viewing it at 100%, and see if you can get it as close as possible to the left with a small amount of space around it. You should then crop closer to the edges of your logo image using the crop tool.
  8. When your logo is looking gorgeous, save it by choosing "File -> Save" from the Pixlr top menu.
  9. Choose "PNG (Transparent full quality) for your format, and save it to your computer
  10. When you've saved the file to your computer, upload it in your Theme Editor, tick the Use a logo? option, and click the Save Settings button.

Selecting your top menu


By default, the Adelaide theme uses the menu called "Top menu" in your store's header.

If you're switching to the Adelaide theme from another theme, and have all of your menu items in a different menu, you can select the menu that you want to use in your store's header in the Store Header section of your Theme editor. You simply select the menu you want to use and click the Save Settings button.

Creating drop-down menus in your store's header


The Adelaide theme supports up to 4 levels of drop-down menus. This should be plenty. If you have more complex menu requirements, then you'll likely want to set up your drop-down as a mega menu.

There's no mucking about with code to get your drop-down menus working. You can create them simply by following the simple steps below. One important note though... you can't create links to nothing! If you haven't created the page or collection you want to link to, you need to create them first.

First item

  1. Log in to your store's Toolbox and go to the "Store menus" tab
  2. Scroll down to the "Top Menu" section, and click "Add new Menu Item"
  3. Type in the name of your menu item
  4. Select whether you want your menu item to link to a page, product, or collection
  5. A new list of options will appear. Select the name of your page that you want to link to.
  6. Click the "Add menu item" button to save.


Sub item

  1. Create another menu item the same way you created one above
  2. Click the "Reorder" link
  3. Click and drag the item you want to drop down to the right (so it sits directly underneath and to the right of the one above - see example)
  4. Click "Done reordering"

Previewing your store should show your second item as a drop-down. You can do this with multiple levels, and re-arrange your menus by dragging items up, down, left, or right whilst you're in "re-order" mode.


Adding a link to the "Collections" page in your store

The Adelaide theme also has a "Collections" page that shows all of the collections in your store.

To add the “Collections” page to your store, you just need to create a link to a page that has the address "/collections" to do this, follow the instructions below:

  1. Go to the "Store menus" section of your toolbox
  2. Scroll down to the menu that you want to add the link to
  3. Click the "Add Menu Item" link
  4. Enter the name of your link (e.g. Collections)
  5. Choose "Web address" next to "This item links to:"
  6. Enter "/collections" (without the quotes)
  7. Click the "Add item" button

You're also able to edit the text that appears on this page. To do this, follow the instructions below:

  1. Go to the “Pages & blogs” section of your Toolbox, and click the “add a new page” button. Give your page a title, and add some text, then save it.
  2. Click on the edit link, and then click on the “handle” link, which is next to the “Title” field. This should then display the field for your handle.
  3. Change the handle of your page to “collections”.


Setting up a mega menu

Creating a mega menu is not for the faint of heart! If you get stuck, we can always assist you though... but we encourage you to forge ahead! The secret to setting up your mega menu easily is to plan ahead. Draw out what you want in your menu on paper before even trying to set it up... otherwise you're in for hours of headaches!

Overview

A mega menu consists of a 7 column grid. This can of course be changed for you for a fee... depending on what you require, but we suggest working within this structure, as it was created to be as flexible as possible.

Adelaide-ecommerce-mens-mega-menu-02.png

Here's what a simple 7 column mega menu can look like...

Adelaide-ecommerce-mens-mega-menu-01.png

A column you create can span multiple columns using CSS classes that can be added when you create the menu item...

Adelaide-ecommerce-kids-mega-menu-02.png

Here's what that mega menu looks like...

Adelaide-ecommerce-kids-mega-menu-01.png

And here's my beautiful drawing to plan out the menu...

Adelaide-ecommerce-kids-mega-menu-drawing.png

Supported column widths

A column can span every width up to 7 columns, so you can create a column structure that suits you

  • 7 Columns - Custom CSS Class Name: column-span-7
  • 6 Columns - Custom CSS Class Name: column-span-6
  • 5 Columns - Custom CSS Class Name: column-span-5
  • 4 Columns - Custom CSS Class Name: column-span-4
  • 3 Columns - Custom CSS Class Name: column-span-3
  • 2 Columns - Custom CSS Class Name: column-span-2
  • 1 Column - Custom CSS Class Name: column

Supported image widths

An image spans the full width of the column it has been inserted into. It can be either left aligned or right aligned. In the 'Men's' menu above, the image has a class of image-right. In the Kids' menu above, the image has a class of image-left.

  • Left aligned image - image-left
  • Right aligned image - image-right

Supported classes for text

In version one of this theme, the only current text style for links is "title".

  • Title - title

Getting started with your mega menu

The first thing you need to do is to enable a hidden option in your account.

  1. Log in to your store's Toolbox and go to the "Your Settings" section
  2. Tick Enable all advanced options and click the save button

You're now ready to start setting up a mega menu!

First item

  1. Go to the "Store menus" tab
  2. Scroll down to the "Top Menu" section, and click "Add new Menu Item"
  3. Type in the name of your menu item
  4. Select whether you want your menu item to link to a page, product, or collection
  5. A new list of options will appear. Select the name of your page that you want to link to.
  6. Enter megadrop in the Custom CSS Class Name field
  7. Click the "Add menu item" button to save. This means that this top level item is now a mega menu


Column All mega menus must contain columns. The total of your columns needs to add up to 7... although the theme is a little forgiving and you can be a bit lazy.

  1. Create another menu item
    1. Name of the new Menu Item: column
    2. This Menu Item links to: Web Address
    3. Web address field: enter #
    4. Custom CSS Class Name: column or column-span-2 or column-span-3 etc.
  2. Click the "Add menu item" button to save
  3. Click the "Reorder" link
  4. Click and drag the item to the right (so it sits directly underneath and to the right of the one above). It need to sit INSIDE the column (see example).
  5. Click "Done reordering"

Sub item

  1. Create another menu item
  2. Type in the name of your menu item
  3. Select whether you want your menu item to link to a page, product, or collection
  4. A new list of options will appear. Select the name of your page that you want to link to.
  5. If you want this item to be a title - Custom CSS Class Name: title
  6. Click the "Add menu item" button to save
  7. Click the "Reorder" link
  8. Click and drag the item you want to drop down to the right (so it sits directly underneath and to the right of the column)
  9. Click "Done reordering"




« The Adelaide theme guide