WHAT IS SHOPNEY DESIGN EDITOR?

Shopney Design Editor is where you design and customize your app’s showcase screen. Working with drag & drop principle, the editor takes ease into another level in design. The design elements, each of which serves a different user experience and display type, make the design options limitless.

The showcase design screen is divided into three sections. The one on your left is the ‘element menu’ where you can pick and drag the needed element from. The one in the middle is the ‘app screen display area’ where you can drop the dragged element in and change the orders of the dropped elements. The right-hand side one is the ‘element editor menu’ where you can customize the content of the element used in the design.

As your store will be connected with Shopney, all of your store content will be ready to be given place in the design elements and to be customized to your delight. You can preview any change in your showcase at any time by Shopney Preview App and ensure your app looks gorgeous!

Let’s have a deeper look into Shopney Design Editor and get to know each element.

THE SEARCH BAR 

Search Bar is the element that enables the users to search for a certain keyword or tag in your mobile store.

It has three different types of options. You can pick one in accordance with your brand’s visual identity. 

THE DIVIDER

The Divider is the element that you can use as padding or separator between two elements to increase the space and to have a better look. 

It has five different preset types and 1 customizable type which you can set a visual too. 

THE TITLE

The Title is the element that enables you to set a title to any element below. It can also be placed to bottom of an element as a subtitle of it according to your delight of design. 

It has three alignment options as left, center and right. 

You can enable it to interaction by setting a collection link. In this case, the user will be directed to the linked collection when the Title is tapped.

THE CIRCLE

The Circle is the element in which you can display different products, collections or custom content pictures in a circular image frame. It works as a carousel with many contents inside and slides from right to left. You can use an existing image of a collection-product or set a custom one for your mobile store.  

Its inner layout is also customizable. You can adjust margins and title placements. Also, you can set a specific title to the Circle or hide it. Besides, you can enable or disable the tapping interaction with this element. 

THE GALLERY

The Gallery is a similar element to circle in terms of working principles. However, it enables you to display images in cornered image frames. Also, you can set a specific title to the Gallery or hide it. You can display products, collections and custom content inside. You can use an existing image of a collection-product or set a custom one for your mobile store. The gallery has more customization options than the Circle due to image frame shapes and enables you to show prices inside.

The shape of image frames can be set as a horizontal rectangle, vertical rectangle and square form. 

The size of each frame is also customizable. It can be set as small, medium and large to your choice. 

As in the Circle, its inner layout is also customizable. You can adjust margins and title placements. Besides, you can enable or disable the tapping interaction with this element by the user. 

THE IMAGE

The Image is the element in which you can display collection or product images in bigger dimensions with a vertical slider layout. The user can navigate the items inside by scrolling. You can use an existing image of a collection-product or set a custom one for your mobile store. Also, you can set a specific title to the Image or hide it. The Image has different display options on image frame shapes as a horizontal rectangle, vertical rectangle and square form.

If you want you can add a title to the Image and choose where the title will be placed as inside or outside. You can also hide the title. 

The margins of the image are also customizable. You can give it the shape you desire. And you can enable or disable the tapping interaction with this element by the user. 

• New Feature & Pro Tip for the IMAGE element

We have added a new feature to the Image element to provide you with even more flexibility in design. Now, when you select the 'custom' for the content type, you will see the 'auto' button on the right-hand side. By clicking on it, you can enable this element to fit any image with any dimensions horizontally and arrange the height accordingly without changing the ratio.

So, you can create horizontal bands like banners for Black Friday as in the example below. Or you can use it in whichever way you want regarding your design taste.


THE SLIDESHOW

The Slideshow is the element in which you can display collection or product images in bigger dimensions with a horizontal slider layout. The user can navigate through items by sliding. You can use an existing image of a collection-product or set a custom one for your mobile store. Also, you can set a specific title to the Slideshow or hide it. The Slideshow has different display options based on image frame shapes as a horizontal rectangle, vertical rectangle and square form. 

If you want you can add a title to the Image and choose where this title will be placed as inside or outside. You can also hide the title. 

The margins of the Image are also customizable. You can give it the shape you desire. And you can enable or disable the tapping interaction with this element by the user. 

THE FEATURED

The Featured is the element in which you can display collections or products in a grid layout. The user can navigate the items inside by scrolling. Also, you can set a specific title to the Featured or hide it. You can use an existing image of a collection-product or set a custom one for your mobile store. 

The Featured has different display options on image frame shapes as a horizontal rectangle, vertical rectangle and square form.  

The margins around the images are customizable. You can have it with margins or without as you wish. You can also hide or reveal the content titles, prices. And you can enable or disable the tapping interaction with this element by the user. 

THE SLIDER

The slider is the element in which you can display collection or product images in a horizontal frame with a horizontal slider layout. The user can navigate through items by sliding. You can use an existing image of a collection-product or set a custom one for your mobile store. Also, you can set a specific title to the Slider or hide it. Apart from The Slideshow element, The Slider has only one display option on image frame shapes as a horizontal form.  

The margins of the Slider are customizable. You can give it the shape you want. And you can enable or disable the tapping interaction with this element by the user.

Now you are ready to design your awesome app with design elements!

 

Did this answer your question?