Theme #6 "Mega"

You can easily customize this theme to match the specific contents of your store. Most of the theme's options are available on "Design" -> "Theme Settings" page. You can also open this page in the Shop app: "Storefront" tab -> "Design" -> "Theme Settings". Let's take a look at each of the items.

• "Background color". Set some of the several available colors for the background of your website.
• "Background image". Set some of the several available backgrounds for your website.
• "Custom background". You can upload your background image here.
• "Logo font". Set some of the several available fonts for your logo.
• "Logo font size". Height of the logo (px).
• "Top margin for the logo". You can move up your logo by entering a negative number into this field (px).
• "Logo text" Optional field containing your company name. It maybe useful for multi-domain stores.
• "Logo color". Hex or RGB value. For example: #000000, rgb(0,0,0).
• "Logo". You can use a graphical logo instead of text.
• "Logo image width". You can specify width of the logo image here..
• "Slogan". Optional field. The slogan will be displayed directly under the company logo.
• "Phone number title". Optional field for entering descriptive text to be displayed before the phone number; e.g.,"Call us:".
• "Working schedule". Optional field. Example: "Monday—Friday 10:00—19:00"
• "Show pages of the app:". You can use pages of the Site or Shop app in main menu.
• "URL prefix for images". Optional field which specifies the URL of the directory for uploaded images. This prefix used to display product category icons. It is recommended to create folders for uploading images using the "Files" section in the Site app. In this case, the desired folder's URL will be similar to this: http://your-site/wa-data/public/site/img (this string is displayed in the page header).
• "Use categories icons". If you have a set of icons for top-level categories, upload them into the image folder and enable this settings option. File names must match the id's of categories displayed in the "Storefront link" on the "Products" tab. Allowed file extension is ".png".
• «Use horizontal categories menu». When you choose this option categories menu will be located horizontally under the main menu.
• Type of navigation menu. If you use multi-level menus with large number of elements, it's great to choose "Accordion" or "Full" menu.
• "Minimal page width". Optional setting which limits the minimum width of all website pages. If the browser window size is less than the specified value, the horizontal scrollbar appears.
• "Maximal page width". Optional setting which limits the maximum width of all pages.
• "Header for storefront". Content of <H3> tag. For example: "Welcome!".
• "General welcome text for storefront". Short description of your store. HTML tags are available.
• "Storefront homepage slider". Available options are: Latest photos from Photos apps, Best-selling products: last photo as a background and Best-selling products.
• "Photo fetching criteria". Change default search criteria to any you like, e.g. 'album/1', 'tag/shop'. See Photos app manual for details.
• "Slider effects". 28 beautiful effects (+ "random") are available. You can also use more than one effect, just separate them with commas: topLeftBottomRight, curtainTopLeft, blindCurtainTopLeft
• "URL of the banner link". Here you can enter the address of one of the pages.
• "Type of the "Special offers" block". You can choose the "slider" view for products from the list "promo".
• "Type of the "Bestsellers" block". Select "slider" or "normal" view.
• Block "Facebook / Twitter / Google + / Livejornal / Pinterest URL". Optional set of fields for specifying the URLs of your company's pages in social networks.
• "Counter code". If you have additional counter code for your site, you can place it in this field.
• "Additional styles". Any CSS styles for all of your pages.
• Hide "New Photos" block, left sidebar, "social" buttons, counts in categories list, "recent" products list, "Write a review" link, "Add to comparison table" link. Enable this options if you do not want to display some of the items.
• "Hide checkout layout". By default the header and the footer of the checkout page are hidden.
• "Service ad for the storefront". For example, information about the temporary suspension of sales.
• "Open product page in new tab". Each product will be shown in its own tab.
• "Location of the filter unit". The filter may be placed in the left sidebar or on the category page.
• "AJAX-enabled product filtering by features". By default, search results in a product category are updated automatically when you change the search criteria in the filter.
• "Additional text for "Printable version"". Address or whatever.
• "Copy protection". Prevents copying text and images from your website.

Website top menu.

Top horizontal navigation unit displays links to your website's main sections and consists of two parts:

1. Installed apps (e.g., "Shop", "Blog", "Photos", etc.).
2. Pages of the Shop app or the Site app (e.g., "About us", "Shipping and payment", "Contacts", etc.).

You can add custom menu items by creating a new page in "Shop" -> "Storefront" -> "Pages" or "Site" -> "Pages".

Slider.

Note the animated banner (slider) when you take a look at the theme's demo page.

You can easily make such a banner yourself by using the standard functionality of the Photos app.

How to add a banner:

1. Install the free Photos app and create a new album.
2. Upload banner images into that album in Photos. Use 900 pixels wide images of equal height. Do not use the "Private access" setting for your album.

If it is the first album, no further action is needed. Otherwise proceed to the next step.

3. Get the created album's ID. It's the last number in the browser address bar when you are viewing an album, for example:

your-site.com/webasyst/photos/#/album/1/

In this example album ID is 1. By default, the banner uses this identifier. If you move your image to another album, simply change the value of field "Banner album ID".

Right sidebar.

This theme supports three-column layout (optional). If you want to place right sidebar on your website, simply create the block "shop.right_sidebar" on the page "Site" -> "Blocks".

Conclusion.

In most cases, the settings are flexible enough to create the desired look for your store. Should you need more freedom in customizing your website design, you may use the built-in design editor to make any additional changes.

Good luck!