We are excited to showcase the screenshot of the Magento demo-store homepage. This design will also be used as the first design package released with Magento. We are working nights to bring you Magento Beta1 (preview) in these next few days (and yes, it could be as late as the 31st, but certainly in August), and thought you might like a taste of how the front-end will appear in full color. Click on the image below to see a full-size version.
With the release of the Beta1, Preview version of Magento approaching in the next couple of weeks we present a sneak peek of the Magento Admin Panel.
Today we will take a look at creating a new category in the Magento Admin. Click on the picture to bring up a full size version.
The first thing to do is select the store where you would like to add the category from the stores dropdown menu. The default is for all stores managed by the admin panel, but you can elect to create the category in only one of the stores by selecting that store.
After that you will need to enter a name for the category which will appear on the sites selected. You can then select the location the category will be located in. The default is root, meaning the category will be a top-level category. If you select an existing category the new category will be created as a sub-category of the one you selected.
You can then enter a description, upload an image and enter meta information for the category.
After that it really gets interesting. If you would like customers to be taken to a landing page - instead of the standard product listing page - when they select the category, you can select a page from the Landing Page dropdown. This list will contain all the landing pages created in the Magento CMS. An example would be to create a Nike landing page and directing all customers to that landing page when they select the Nike category.
You then have 3 options for the look and feel of this category page. The default is Display Products Only, which will show the customer a grid list of the products. The second is display only Landing Page, which will display the landing page selected in the above dropdown, and the third is Display Landing Page and Products. This third option will place the content from the selected landing page above the grid list of products.
You then select whether the category is active on the site. Selecting no will hide the category on the site.
Finally you select whether the category page is an anchor. Anchors are used for the Layered Navigation in Magento.
If you set the category to be an Anchor the layered navigation (see this post for a look at the layered navigation) will display the sub-categories of this category in the layered navigation. The layered navigation then takes all the products underneath, including ones in the sub-categories, and displays all the filterable attributes of those products. If you do not set the category as an Anchor it will not display the filterable attributes in the layered navigation.
Here is a look at the layered navigation for the Apparel category which is set to be an anchor.
After that you can select products to populate the category from the Category Products tab and you have created a new category for your online store.
With the Product Pages we had one goal in mind, increasing conversions by presenting relevant product information to customers in a clear manner. A customer who is viewing a product page is just one click away from the shopping cart, making the presentation of that product the priority. Yet we still needed to present other relevant information to the customer such as related items, the wishlist and the customer's shopping cart. With this in mind we made it effortless for customers to find any additional information they might seek. Let's look at the layout of the Product Pages.
Product Page Wireframe (click to see full-size)
The product images are presented in the left side of the page, allowing customers to zoom in and view multiple views of a product. While reviews reside at the bottom of the page, an overview of the reviews is prominently placed underneath the product title. Reviews, like other elements on the page, are optional elements in Magento. If you do not elect to turn the reviews or other optional elements on, the remaining elements will move up on the page so this space is not left blank. Optional elements will be called out here with an *.
Below the review overview is the stock availability* and shipping information*. We gave these elements prominence as they are shown to increase conversions. Immediately below is the price information, which will include tier pricing* if it is in use for that product. We placed the calls to action below the pricing. By keeping these elements in the center of the page, not only the Add to Cart button but the Add to Wishlist* and Add to Compare* links as well, we highlight the most important calls to action to the customer. Required Items*, for instance a HDMI cable if the customer is on a product page for a projector, are highlighted right above the product description.
The product description resides above the fold to provide customers with relevant information on the product, and below this are upsell items*, selected by the store owner. The bottom of the product page is given to customer-generated content, including product tags* and the aforementioned reviews*.
In the right column we feature related items*, a mini shopping cart, the customer's wishlist*, the product comparison box* and an area for a marketing callout*. You can read more about this right column in the Behind the Scenes: Category Pages post.
Prefer a tabbed view of the product page? By tweaking the templates and CSS, this page could be redesigned to accommodate this.
To provide rich media functionality to the customer, product images can be zoomed and dragged right in the product page. Images can also be opened in a slideshow, where multiple images can be browsed at a larger size.
Tier pricing will display as shown above. If only 1 item is added to cart, the regular price is used.
Products with Variants
Selectable product options will appear directly above the call to action area. Of course, variants are saved when adding to the cart, wishlist, or compare box. The product price adjusts based on the options the customer selects.
Magento also allows store owners to sell multiple products with similar characteristics on one page, making customers' lives easier by allowing them to compare all the products in the group. This also encourages customers to purchase more items in the group by allowing them to add all the items to the cart with one click.
That's it for the product page. As always, tell us what you think! Have a suggestion or a question? Let us know in the comments!
We had a great turnout last week for our inaugural community chat. The ambitious plans to discuss a wide array of topics was scaled back and concentrated on US Taxes, Coupons/Promotions (see transcript below) and Taxonomies (specifically integration with 3rd party providers). It was an absolute success and the conversation was flowing. Seems ya'll have a lot to say That said, we are already looking forward to our v.2 community chat, happening on Thursday, August 9th at 11 AM PST. We'll discuss user registrations, product search, and more (should time allow). Get those screenshots ready (we love 'em!). We are opening this up for everyone across the world ... but, here's the catch ... there are only (roughly) 20 spots available. Interested? We'd love to hear from you. Step 1 - Contact Us Step 2 - Get online on Thursday bright and early to ensure you have a spot(if reading via feed, view the transcript on our blog)
|Topic: Coupons / Promotions|
We’re looking for the best sites across the world. eCommerce Sites that are well executed, visually appealing, easy to use, intuitive and put usability in the forefront. Any favorites? Let us know in the comments.
Our goal with Magento’s Category Page was to create a customizable browsing experience and keep shopping tools at customers’ fingertips. The customer never has to stop browsing to see essential elements like the shopping cart and wishlist. Price and rating are displayed right on the category page, eliminating the need to drill down into the product info pages. This saves the customer valuable time and makes shopping as convenient as possible.
Grid View Wireframe (click on the image to see full-sized)
Magento’s Category Page was designed with functionality and flexibility in mind. Customers should decide how they browse a catalog, and our extensive Pagination Tool supports this philosophy, creating a quick and intuitive experience. Customers can decide how many products they want to view per page, how they prefer to view them (in grid or list view, outlined below), and how each page is sorted (by price, manufacturer, popularity, etc). The customer’s preferences are then saved, creating a customized shopping experience. The Store Owner also has the option to control the way customers view their catalog. If a site is better viewed in one format over another the Store Owner can make this viewing style the default. This flexibility creates several browsing options for customers and helps Store Owners showcase products in the way that best fits their needs.
Each viewing style has its advantages for both the customer and Store Owner. Grid view (top) shows more products at a time, while the list view (bottom) allows for more information like the product description to be immediately available to customers. Both views allow customers to see the product image, the rating, and the product name. In addition, customers can add products to their cart, compare box, or wishlist, potentially eliminating one more step between the customer and a conversion.
Customers will also find this ease and flexibility in Magento’s Compare Box. Unlike many online stores, customers will be able to compare products not just in a single category, but across the site. This allows customers to compare attributes from any category in your catalog, no matter how different they may seem. If a son is shopping for Father’s Day he can compare shared attributes like price or product rating between a golf club and an easy chair just as easily he could compare attributes like weight and size between two chairs. We wanted the Compare Box to remain visible while a customer browses, providing a constant, helpful list of items already added to compare, without forcing the customer onto another page.
The entire page is designed so that the customer sees browsing options like tags and product types first, on the left, while shopping tools like the Shopping Cart, Compare and Wishlist are available on the right. The constant presence of these tools provide an immediate reminder to the customer that they’re interested in these products, and encourages conversion.
Take a look, and tell us what you think! Have a suggestion or a question? Let us know in the comments!
Varien is committed to the open source community and in that spirit we are pleased to announce Magento will be distributed under the Open Software License (OSL 3.0), an OSI-approved open source license. You can find more information about the license in our new License/Trademarks FAQ page and on the Open Source Initiative site.
We’ve also posted information on the usage of Magento trademarks. As mentioned in the FAQ, the code is free, but the Magento trademarks, service marks and logos are not. Please review the License/Trademarks FAQ if you have any questions on what are appropriate and inappropriate uses of Magento trademarks.