How to create an app like The Fancy

Install Swipecart to start using it. It is available on the Shopify app store and WordPress plugin center. You'll be taken to the dashboard after signing up for Swipecart.

On the dashboard, click on "Layouts" in the left menu.

Click on "Create Layout" to create a new layout.

Clicking on “Create Layout” will open a popup. Name the layout "The Fancy". Click on "Create".

Further, you'll have the option to select from ready-to-use layout templates or a blank layout. We select "Blank Layout" since we have to create an app like The Fancy and click on "Create Layout".

A blank layout with the name The Fancy is formed. For more details about creating layouts on Swipecart, click here.

You'll be taken to the layout dashboard with the default tab "Theme Settings" and the sub-tab "App Bar Settings". Basically, the theme settings allow you to set the theme and customize it for the brand.

App Bar Settings: Set your branding element on the app bar or the action bar because it stays on the top throughout all pages of your app. Here, we upload the brand logo to customize the app bar. For more details on app bar settings, click here.

We then go to Side Menu Settings, Bottom Bar Settings, Profile Page Settings, and Input Style Settings. Here, we select our choice from the style variants and save it to the app.

Theme Style Settings: In this, we can change some of the styling parameters for the app's theme such as app background color and font style & color. Click here to know more about theme style settings on Swipecart.

Here's the mobile preview of the app with the customized theme, app bar, and bottom bar.

Next, we move on to designing the app's home screen. Click on the "Home" tab. A blank home screen is displayed with only the app bar and bottom bar.

We add content to the home screen by dragging and dropping style variants of widgets. These are accessible in the right section of your screen.

Click here for more information about widgets on Swipecart.

Single Banner: Let's highlight information at the top of the app's home screen with a single banner.

Select "Single Banner" from the widget list. From among the different style variants offered by Swipecart, select one and place it under the app bar on the app's home screen.

Click here for detailed information on single banners.

To add content to the collection slider, hover the mouse pointer over the widget and click on "Add/Edit Content". In the opened popup, add all relevant collection categories from the collection list to the slider.

Click here for details about adding and editing content on widgets.

To customize the single banner, hover again and click on "Edit Style" to open a popup. In it, set the styling parameters for the single banner.

Click here for details on styling widgets on Swipecart.

Here's how the app looks with a single banner added to it.

We add one more single banner to the app's home screen. Repeat the same process as mentioned above to add content to the single banner and customize it.

Product Slider: To display specific products on the home screen, select "Product Slider" from the widget list. Place one among the style variants inside the home screen. Click here for information about product sliders on Swipecart.

Click on "Save" before you exit any popup. Click on "Update" on the dashboard after you save to update the changes to the app.

Have a look at the added product slider on the app's home screen.

Collection Grid: We use the Collection Grid widget to display the collection categories in a grid format on the app.

Select "Collection Grid" from the widget list. Drag and drop your choice of style variant into the home screen.

Click here for details about the collection grid on Swipecart.

Add collection categories to the grid from the collection list through the "Add/Edit Content" option. Set the styling elements for the grid through the "Edit Style" option.

Here's the preview of the app with the collection grid added to it.

We repeat adding single banners and product sliders to the app.

You can explore other widgets on Swipecart to add them to your app, including the Banner Grid, Banner Slider, Carousel Banners, Collection Slider, Product Slider, Product List, timer and Search Bar.

Have a look at the final "The Fancy" app we have designed on Swipecart.