Guide to Magento Brand Guidelines for Online Stores

Guide to Magento Brand Guidelines for Online Stores

Want to make your online store stand out from the crowd? Magento brand guidelines are a set of design principles and rules that help create a consistent brand experience.

In this article, we will explain the user guide to Magento brand guidelines to design your Magento 2 store.

Key Takeaways

  • Core elements of Magento brand guidelines.

  • Steps to set up brand settings using extensions.

  • Best practices for implementing brand guidelines.

  • Methods how to use analytics to measure guideline effectiveness.

  • Find out how to create compelling brand content and layouts

What are Magento 2 Brand Guidelines?

Definition of Magento Brand guidelines

Magento brand guidelines are a set of standards that define how the website should be represented across all touchpoints. These guidelines cover aspects such as

  1. Logo usage: Use your official Magento logo correctly and consistently with variations in size and resolution.
  2. Color palette: Implement Magento's primary colors and complementary secondary colors.
  3. Typography: Choose appropriate fonts for headings and body text.
  4. Imagery styles: Use high-quality, consistent images that align with the brand.
  5. Tone of voice: Develop a consistent language style for all brand communications.

The purpose is to maintain a consistent brand identity.

Key Elements of Magento Brand Guidelines

Element Guidelines
Logo Usage and Placement Use the official Magento logo in accordance with the provided guidelines
- Maintain clear space around the logo to ensure visibility
- Do not modify or distort the logo in any way
- Place the logo in prominent locations, such as the header or footer
- Use the appropriate logo file format (e.g., SVG, PNG) for the intended usage
Color Palette Adhere to Magento's primary color palette.
For example,
- Orange (#FF6600): Used for primary buttons, links, and highlights
- Gray (#333333): Used for text and secondary elements
- Use secondary colors to complement the primary colors
- Ensure sufficient color contrast for readability
- Maintain consistency in color usage throughout the store
Typography Store admins can use the recommended font families:
- Headings: Futura or similar sans-serif font
- Body text: Open Sans or similar sans-serif font
- Maintain a clear hierarchy of font sizes and weights
- Use typography to enhance readability and visual appeal
- Ensure consistency in font usage across the store
Imagery and Photography - Use professional Magento images that align with your brand
- Maintain consistency in image style, composition, and color scheme
- Optimize images for web usage to ensure fast loading times - Use images to showcase products, convey brand personality, and engage users
- Ensure images are properly sized and positioned within the layout

Best Practices for Magento Brand Guidelines

1. Compelling Brand Content & Descriptions

  • Product descriptions- Tell a story about each product type that reflects your brand voice and values. Highlight the unique benefits and experiences your products provide.

  • Category descriptions - Set the tone and context for each category of products with immersive descriptions. Transport the shopper into the lifestyle and emotions associated with that product group.

  • "About Us" and brand story pages - Dedicate pages to telling your brand story and sharing what makes you unique. Discuss your history, mission, values, and what sets you apart.

  • Make sure your descriptions are seo-friendly, incorporating relevant Magento keywords. If your brand is known for sustainable products, emphasize this in your product descriptions.

2. Leveraging CMS Blocks & Widgets

  • Feature brand-related content like videos, lookbooks, customer stories/photos, and more. CMS blocks and widgets enable you to place this content strategically.

  • Promote branded offerings like guides, tutorials, and events. These add unique value and reflect your brand's expertise and personality.

  • Use a banner slider widget to showcase different brands and their unique offerings on your homepage. This dynamic feature not only grabs attention but also allows customers to explore various brands quickly.

  • Additionally, layered navigation helps customers filter products by specific brands.

3. Designing Brand Page Layouts & Templates

  • Create custom templates for core branded pages like the homepage and key category pages. Use these templates to establish a branded look and feel with your logo, colors, fonts, and imagery.

  • Develop unique page layouts that organize content in a way that guides shoppers as they scroll and click. Consider how the progression of content reflects your brand narrative.

  • Incorporate branded design elements like icons, background images, and button styles. It is to make pages distinctly yours while still being easy to navigate and use.

  • For instance, upload the brand logo as a category image to give a visual cue about the brand. Use the Magento 2 dynamic page builder to adjust the custom brand page layout. This approach helps in setting up a unique brand identity that resonates with your target audience.

Analytics & Magento Brand Guideline Effectiveness

1. Choose the Right Analytics Tool

  • Google Analytics is a free tool that many website owners use. It helps you understand how people use your website. For example, it can tell you how many people visit your site, which pages they look at, and how long they stay.

  • Magento Business Intelligence is a tool that comes with Magento 2. It helps you understand which products are selling well, who your best customers are, and total revenue. It understands e-commerce data better than general tools.

  • Heat mapping tools, such as Hotjar or Crazy Egg, show you where people click on your website. They create a picture that looks like a heat map, with "hot" areas showing where lots of people click.

  • It can help you see if people are noticing and clicking on important parts of your website. These tools can also show you how far people scroll down your pages.

2. Setting Up Baseline Metrics

  • Baseline metrics are measurements of how your website is performing right now before you make any changes. They're like a snapshot of your website's current health. Here are the important metrics you should measure:
    1. Bounce rate is the percentage of visitors who leave your site after only viewing one page. A high bounce rate might mean people aren't finding what they're looking for.
    2. Time on site measures how long visitors stay on your website. Generally, if people spend more time on your site, it means they find it interesting or useful.
    3. Pages per session tell you how many different pages a visitor looks at during one visit. More pages usually mean people are exploring your site more.
    4. Conversion rate is the percentage of visitors who complete a desired action. It includes making a purchase or signing up for a newsletter.
    5. Click-through rates show how often people are clicking on important parts of your website. It could be your menu items or "Buy Now" buttons.

3. Define specific KPIs

  • Key Performance Indicators are the numbers for your brand. They help you see if your brand changes are working well. When you update your brand look, you want to know if it's helping or hurting your business.
  • For example, you change your website's main color from blue to red. You want to know if this new color makes people more likely to click on buttons like "Buy Now" or "Sign Up." It is done by checking the following:
    1. Count how many people click these buttons before the color change
    2. Change the color accordingly.
    3. Count the clicks again after the change.
    4. Compare the two numbers.

4. Segmenting Data

  • Segmenting data means splitting your website visitors into different groups. It helps you see how different types of people react to your brand changes.
  • To monitor new vs returning visitors to your Magento website:
    1. Split your data into two groups: first-time visitors and recurring visitors.
    2. Look at how each group interacts with your brand elements like logos and splash pages.
    3. It shows if your brand appeals more to new or repeat visitors.
  • Grouping visitors by location involves categorizing your website visitors based on their physical location.
  • When you group visitors by country, you can see how your Magento brand guidelines are received.
  • It is particularly useful for businesses operating internationally. Or it could be those considering expansion to new markets.

Future Trends in Magento Brand Guidelines

1. Dynamic Product Lists and Brand Sliders

  • Magento brand guidelines may emphasize the use of dynamic product lists and brand sliders on the front end.

  • These features allow customers to see a wider range of brand products quickly, improving engagement.

  • For instance, a brand slider widget could showcase different attributes of a brand. It helps customers discover new products within their favorite brands.

2. Enhanced Product Page Branding

  • Future guidelines may emphasize customizing brand page layouts. This could improve visibility and provide more information.

  • Adding short descriptions or tooltips for each brand can offer quick insights. Customers can learn about brand values and offerings at a glance.

  • These enhancements help create a more engaging product page experience. They allow shoppers to connect with brands more easily.

3. Voice Search Optimization

  • Brands should focus on using natural language in their names and descriptions. This makes it easier for voice assistants to understand and relay information.

  • Short, clear product descriptions help voice search accuracy. Including common questions in FAQs can improve voice search results.

  • Brands should also consider local search optimization, as many voice queries have local intent. Using structured data markup can help search engines better understand product information.

  • Structured data markup is a standardized format for providing information about a webpage. It helps search engines understand the content and context of the webpage.

4. GraphQL Integration for Flexible Brand Data

  • It allows for efficient retrieval and display of brand information. GraphQL modules can improve performance by enabling precise data queries.

  • Developers create custom GraphQL schemas for brand-related data. These schemas define the structure of queries and mutations.

  • Store admins can then use queries to fetch specific brand information quickly. This reduces data overfetching and improves load times.

  • Customization options are expanded, letting developers tailor brand data presentation.

FAQs

1. How can I set up a Magento 2 shop-by-brand feature?

To set up a Magento 2 shop by-brand feature, install a shop by brand extension. Navigate to Stores → Products → Attributes → Product → Brand to configure brand attributes. Create brand categories, adjust the custom brand page layout, and enable the brand list widget on your front end. Don't forget to save the settings after making changes.

2. Can I display the brand logo on product pages in Magento 2?

Yes, you can display the brand logo on product pages. Use a Magento 2 shop by brand extension to enable this feature. Enable the option to show the brand logo. You can also adjust the image width and height for optimal display.

3. How do I create a brand category in Magento 2?**

To create a brand category, navigate to Catalog → Categories. Add a new main brand category, then create subcategories for each brand. Upload the brand logo as a category image and add a description. Use keywords for each particular brand to improve SEO. This setup allows customers to shop by brand and define their favorite brands easily.

4. What is the benefit of using layered navigation for brands?

Using a Magento 2 layered navigation extension for brands provides a better user experience. It does this by letting customers filter products by particular brands. This brand awareness makes it easier for customers to find products from their preferred brands. It potentially increases conversions and customer satisfaction.

5. How can I customize brand information display across different store views?**

To customize brand information for different store views, go to Stores → Attributes → Product → Brand. You can adjust the custom brand page layout and information for each store view. It allows you to tailor brand content, descriptions, and keywords. It ensures consistent brand representation across your Magento 2 store.

CTA

Summary

Magento brand guidelines act as a framework within which you can creatively showcase your business. In this article, we explained how to configure the guidelines according to your brand and its best practices.

  1. Magento extensions enable custom product sorting and brand info display on product pages and lists.
  2. Set up Magento 2 shop by brand page by adjusting custom brand page layout for different stores.
  3. Use the extension to enhance brand functionality.
  4. Add new attributes as brands and define the main brand categories.
  5. Implement analytics to see how customers interact with brand elements.

Utilize managed Magento hosting to provide the best user experience using creative brand guidelines.

Nanda Kishore
Nanda Kishore
Technical Writer

Nanda Kishore is an experienced technical writer with a deep understanding of Magento ecommerce. His clear explanations on technological topics help readers to navigate through the industry.


Get the fastest Magento Hosting! Get Started