Web Design Tips

Introducing Zoey’s New Design Suite

By Ryan Gilmore on October, 14 2015

Over the last 15 months it’s been our mission to reimagine Magento Community Edition as platform made for merchants, not developers. Essentially, we want to make it easier for more people to use and benefit from the advantages provided by advanced technology.

The first version of our design tools were a step in that direction. For the first time, merchants could design on Magento without having extensive knowledge of front-end code.

Despite this early success we know that design continues to be of significant importance to merchants, and that our tools needed to improve in both usability and power. That’s why we’ve spent the last three months completely revamping our design tools.

So, without further ado, we’re thrilled to announce Zoey's new design suite.

Let’s take a tour of its features and what they mean for Zoey users. 

Theme Library 

Every design starts with a theme. It’s the foundation on which you can layer additional customizations with the other tools in the design suite.

With our new theme library, you can download multiple themes to your store, make customizations, preview them, and apply the one you like the most to your live site.

This results in less interruptions to your business by giving you the flexibility to create and test designs without impacting your live site.

As with our old design tools, all of our themes are fully responsive and completely free for all users.  

Page Editor

The Page Editor is a powerful drag and drop tool that allows you to edit the layout and content of nearly every element in your store. It’s really fun to use and we think you’ll love it. You can use it to do things like:

  • Arrange your image(s), copy and add to cart button anywhere you want on a product page
  • Move your logo anywhere in the page header
  • Resize banners, product grids, and other elements to fit your desired look and feel
  • Create a custom design for mobile devices

You can also use the Page Editor to add and edit content with just a few clicks. Here are some examples:

  • Add a new banner or image slideshow anywhere on your site
  • Add or remove columns and rows from a product grid on any page
  • Change a banner to a new image
  • Add an additional image to a slideshow

Style Editor

The Style Editor is very similar to our current design tools in that it allows you to adjust styling across your entire site. A few examples of things you can do with this tool include:

  • Upload your logo
  • Select from hundreds of Google Fonts
  • Change the color of text, page backgrounds and buttons
  • Adjust the width of your design and control the amount of padding used around elements like products in a product grid

Adding a New Page

One of our most requested design features is the ability to add custom pages to a store and with our new design suite, that's now possible. Here are a few examples of ways we envision merchants using this functionality:

  • Creating custom content pages like About Us or Privacy Policy 
  • Creating custom templates for specific products or categories
  • Creating a custom templates for use as PPC landing pages

Code Editor 

We created the design suite to make designing a store extremely easy for non-technical users, but that doesn't mean we forgot about developers. Our design suite features an in-context editor that allows you to do things like: 

  • Insert custom HTML 
  • Modify and add custom CSS 
  • Insert custom JavaScript 

Page Manager

If you’re worried that this advanced functionality might leave you a little confused, don’t be. We’ve created an intuitive homepage called the Page Manager that makes it very easy to access all the functionality of the Design Center. From the Page Manager you can:

  • Access the Theme Library
  • Access the Style Editor
  • View all of your default templates, custom templates and custom content pages
  • Click into any page or template to access the Page Editor
  • Add a new page or template

If you ever feel lost, you can also hit the back button to return to the Page Manager

We hope you’ve enjoyed this tour of our new Design Center and are excited to give it try! The best way to really get a sense of all you can achieve is to log into your Pixafy account and start playing around. If you don’t have Pixafy account, we encourage you to start a free 14 day trial

Happy designing!

Recommended Articles

Submit a Comment

Subscribe and stay up to date