How to Set Up an eMa7el Store: A Step-By-Step Guide
How to set up an online store
- Add the products you want to sell
- Setup the Categories
- Setup the Homepage Part 1 – logo & Slider & Color
- Setup the Menu
- Setup the Footer (address, phone, social & quick links)
- Setup the Homepage Part 2 – Dynamic contents
- Adding Pages & Blog posts
- Setup Payment, Shipping & Taxes
- Adding users for my team
- Setup the Homepage Part 3 – Static contents & blog entries
1. Add your products
What’s an online store without anything to buy? Adding products should be one of the first things you do, because your products are what you’ll design the look and feel of your website around.
In your new eMa7el store, go to Administration → Catalog → Products → Add New to create your first product.
There’s a number of decisions we’ll be making on this page, so let’s break them down into steps.
- Enter the Product name.
- Enter the product Short description that will be displayed in the catalog.
- Enter the product Full description that will be shown on the product details page. Here you can add text, bullet points, links, or additional images. Make sure to write a detailed description as it affects your buyers’ decision making.
- Enter the product SKU. This is the product stock keeping unit, used internally for tracking the product. This is your internal unique ID used to track this product.
- Categories. You can assign a product to as many categories as you want.
Price, in a predefined currency.
You can change the store currency in Administration → Configuration → Currencies.
Tick Shipping enabled if the product can be shipped.
Set the product parameters which will be used for the shipping calculation: Weight, Length, Width, Height.
You can change predefined measures in Administration → Configuration → Measures.
- Some products may not require inventory tracking. For example, services, second hand or custom-made goods. In this case, a store owner can opt for no tracking, by choosing the Don’t track inventory option in the Inventory method field.
- Warehouse which will be used when calculating shipping rates.
- In the Add a new picture area, click Upload a file to select a new picture you want to upload to your product page.
- In the Alt field, enter a value for the “alt” attribute of “img” HTML element. If empty, then a default rule will be used (e.g. product name).
- In the Title field, enter a value for the “title” attribute of “img” HTML element. If empty, then a default rule will be used (e.g. product name).
- Define the Display order of the image on a product page. 1 represents the top of the list.
- Product attributes are quantifiable or descriptive aspects of a product (such as, color). For example, if you were to create an attribute for color, with the values of blue, green, yellow, and so on, you may want to apply this attribute to shirts, which you sell in various colors (you can adjust a price or weight for any of existing attribute values). You can add attribute for your product using existing list of attributes, or if you need to create a new one go to Catalog → Attributes → Product attributes. Please notice that if you want to manage inventory by product attributes (e.g. 5 green shirts and 3 blue ones), then ensure that “Inventory method” is set to “Track inventory by product attributes”.
Photo Size / Dimensions
- 300 W x 263 H
Prior to adding new products, a store manager should create categories, to which the products will later be assigned. To manage categories, go to Administration → Catalog → Categories.
Search for a category in the Search panel by entering the Category name or a part of the name, by the Published property or among all the categories of a certain Store (if more than one store enabled).
To remove categories from the list, select the items to be deleted and click the Delete (selected) button. You can export the categories to an external file for backup purposes, by clicking the Export button. After clicking the Export button you will see the dropdown menu enabling you to Export to XML or Export to Excel.
Adding a new category
To add a new category click the Add new button in the top of the page. The Add a new category window will be displayed.
This page is available in two modes: advanced and basic. Switch to the basic mode which displays the only main fields or use the advanced mode displaying all the available fields.
In the Category info panel, define the following category information:
- Name – this is the name of the category displayed in the catalog.
- Description – a description of the category. Use the editor for layout and fonts.
- If this category will be a subcategory, select a Parent category from the drop-down list. The new category will be placed under this category in the public store.
- Picture – an image representing the category. Upload the image from your device.
In the Display panel, define the following category information:
Select the Published checkbox, to make the category visible in the public store.
Select the Show on home page checkbox, to display the category on the home page.
Select the Include in top menu checkbox, to include the category in the top menu on the home page.
Select the Allow customers to select page size checkbox, to enable customers to select a page size, i.e. the number of products displayed on the category details page. The page size can be selected by customers from the page sizes list entered by the store owner in the Page size options field.
- In the previous checkbox is ticked the Page size options is displayed. Enter a comma separated list of page size options (e.g. 10, 5, 15, 20). First option is the default page size if none are selected.
The Page size option is displayed if the Allow customers to select page size checkbox is unticked. It sets the page size for products in this category e.g. ‘4’ products per page.
Price ranges – allow defining ranges of price by which customers can filter the products. Separate the ranges by a semicolon, for example, 0-999; 1000-1200; 1201 – (1201 means 1201 and over).
Display order – the order number for displaying the category. This display number is used to sort categories in the public store (ascending). The category with the display order 1 will be placed at the top of the list.
Photo Size / Dimensions
- 300 W x 263 H
3. Homepage Part 1 – logo & Slider & Color
This chapter covers the basics of your store design configuration.
Uploading your logo
To upload your logo in your new eMa7el store, go to Administration → Appearance → Themes → Layout → Settings → Logo Image
Photo Size / Dimensions
- 100 W x 70 H
Upload your slider in the Homepage
To upload your slider in your new eMa7el store, go to Administration → Appearance → Plugins → Anywhere Sliders → Manage Sliders → Edit
Photo Size / Dimensions
- 1200 W x 400 H
Choose your color for your store
To choose your color in your new eMa7el store, go to Administration → Appearance → Themes → Layout → Settings → Preset
4. Setup the Menu
To setup your Menu in your new eMa7el store, go to Administration → Appearance → Plugins → Mega Menu → Manage Menus→ Edit
5. Footer (address, phone, social & quick links)
To setup your Information part in your new eMa7el store, go to Administration → Configuration → Languages → Edit En → In resource name type sevenspikes.themes.brooklyn.footer.information.text→ Edit what you want to type in this part.
In this part you can add your Address & your Phone.
Also if you want to add or edit special page in the footer you can do it, just go to Administration → Content management → Topics (pages) → Choose Contact us as an example → In the Display part you will find 3 options to Include in footer → Check the column you want then Save
- To setup your Instagram icon in the footer, just go to Administration → Appearance → Themes → Layout → Settings → Instagram URL
- To setup your Pinterest icon in the footer, just go to Administration → Appearance → Themes → Layout → Settings → Pinterest URL
- To setup your Vimeo icon in the footer, just go to Administration → Appearance → Themes → Layout → Settings → Vimeo URL
To setup your Social Icons in the footer, just go to Administration → Configuration → Settings→ General Settings → Social Media
6. Homepage Part 2 – Dynamic contents
To setup your JCarousels in your new eMa7el store, go to Administration → Appearance → Plugins → JCarousel → Manage JCarousels→ Edit or Add new JCarousels
- You can create carousels of Featured Products, Bestsellers, Recently Viewed Products, Also Purchased Products and so much more, and display them on any of your website pages.
- There are more than 15 predefined data source types to choose from.
- You can add new products, categories, manufacturers, or vendors to an existing carousel.
- There is a swipe-to-slide option for a better mobile experience.
- You can set the maximum number of items to be included and the number of visible items in a carousel.
You can choose the page and the widget zone where to display the product carousel.
Dynamic contents example: –
A blog is a great way to connect with your existing customers, keeping them informed about latest product offerings or educating them, as well as to find new customers.
To manage blog posts go to Administration → Content management → Blog posts → Add New
Topics (pages) are free-form content blocks that can be displayed on your site, either embedded within other pages or on a page of their own. These are often used for FAQ pages, policy pages, special instructions, and so on. To create custom page, you should create a new topic and enter your custom page content on the topic details page. Content can be written for each language separately.
To add a new topic go to Administration → Content management → Topics (pages) → Add New
To setup your Payment in your new eMa7el store, go to Administration → Configuration → Payment methods.
Payment is COD (Cash on Delivery) by default, and you can add manual payment as well as add your PayPal account
To setup your Shipping settings in your new eMa7el store, go to Administration → Configuration → Settings → Shipping settings.
- Check Estimate shipping enabled (cart page) to display estimate shipping information based on customer’s shipping address on the shopping cart page. See the screenshot below.
- Check Estimate shipping enabled (product page) to display estimate shipping information based on customer’s shipping address on the product details page.
- Select the “Pick up in store” enabled to display the pickup in store option during checkout at the shipping address step.
- Tick Free shipping over ‘x’, to enable free shipping for orders over a certain total amount. The following field is then displayed, enabling you to define the value of ‘x’.
- In the Value of ‘x’ field, enter the value over which all orders with a total greater than this will qualify for free shipping.
Define the shipping origin details:
- Select the Country.
- Select the State/province.
- Define the County/region.
- Enter the required City.
- Enter the required Address 1.
- Enter the required Zip/postal code.
This section describes your store tax settings, for example, defining prices including or excluding tax, defining the tax display type and more.
To manage your tax settings in your new eMa7el store, go to Administration → Configuration → Settings → Tax settings.
9. Adding users for my team
To manage your users in your new eMa7el store, go to Administration → Customers→ Customers→ Add New.
10. Homepage Part 3 – Static contents & blog entries