WHAT IS SHOPNEY DESIGN EDITOR?

Shopney Design Editor is where you design and customize your app’s showcase screen. Working with the drag & drop principle, the editor smooths designing. The design elements, each of those serve a different user experience and display type, make the design options limitless and fun!

The showcase design screen is divided into three sections. The one on the left is the ‘element menu’ where you can 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 Shopify store will be connected with Shopney, all of your store content will be ready to be given a 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.

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 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 one customizable type thanks to which you can set a custom visual too. 

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

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

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

Countdown Timer is a design element in which the remaining time for a certain campaign will be displayed on your home page design.

You can create flash sales for a certain period like clearance or new drops, and display the time-span that the campaign runs in.

It's a rather complicated one, so we have prepared a dedicated article for it.

The Circle is the element in which you can display different products, collections, or custom content pictures in a circular image frame. It works like 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 by using the "Web Url" as content type.  

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 is a similar element to the 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 it enables you to show prices inside.

The shape of image frames can be set as a horizontal rectangle, vertical rectangle, or 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 Carousel is a similar element to the Gallery in terms of working principles. However, it has a sliding animation which features the item on the center.. Also, you can set a specific title to the Carousel or hide it like in Gallery and Circle elements.

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 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. 

We have added a new feature to the Image element to provide you with even more flexibility in design. Now, when you select the 'Web Url' 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. Also, you can use it in whichever way you want regarding your design taste.

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 Grid 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 Grid or hide it. You can use an existing image of a collection-product or set a custom one for your mobile store. 

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

The Grid also has different viewing sizes as small, medium and large. By choosing different view sizes, you can easily show more products on your showcase within one element.

Small displays 4 products in a raw, medium displays 3 and large 2 products as shown.

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

The slider is the element through 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.

Offering app-exclusive discounts is a great way to stimulate your mobile app users and drive extra traffic. This element is dedicated for it.

We have prepared a detailed guide for you to learn each and every detail about it.

NOTES: Should Integrations

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