How to create an app like Jcpenny

Once done, sign up and activate Swipecart on your website’s backend. On the Swipecart dashboard, click on ‘Layouts’ from the left menu.

To create a new layout, click on the “Create Layout” icon.

Clicking on “Create Layout” will open a popup. This popup would ask you to name the layout. Let’s name this layout ‘JCPenney'.

Swipecart allows you to choose between pre-made layout templates or to make a layout from scratch. As we’re doing the latter, select ‘Blank Layout’ and click on ‘Create Layout’ This will take you to the layout dashboard.  Here is where all the magic takes place.

You’ll be taken to your layout dashboard with the default tab “Theme Settings”. The primary function of “Theme Settings” is to customize the app's look. It has multiple options to set branding elements for your app.

Let's start with the App Bar Settings.

App Bar Settings- Here, you can customize the app bar that remains constant wherever you go on the app. click here to know what you can do with this.

Next, customize the look of the side menu, bottom bar, profile page, and input style (welcome/sign-in page). For all these, go to the respective tabs on the left menu. A set of readymade templates are available for each. Select an option from the variants and save it to the app.

Theme style settings- Here, you can manage and edit the fonts, colors, and app loaders for a universal app usage experience. To know more about this, click here.

Here’s what the draft app would look like after these settings.

The next task is to customize the Home Page of the app. Click on the “Home” tab to edit the Home page layout. Here, you have the app pages list to the left, the draft app to the center, and the widget library to the right.

Let's start by dragging and dropping widgets to create an app like JCPenney.

Single Banner- With this, you can attract your user’s attention towards a single item- this could be a collection, a product, or anything else.

Select ‘Single banner’ from the widget library drop-down and choose a style that matches your requirements. Drop it to the draft app home page. For more information, click here.

Upon hovering on the dropped the single banner, you will find the ‘Add/Edit Content’ option. In the popup that appears, add the image and links you'd want to showcase. To know more about the ‘Add/Edit content’ feature, click here.

Once you’re done with adding the image and link, hover again on the banner to find the ‘Edit Style’ option. This allows you to customize the widget’s look. For more information, click here.

Here's how the single banner would look on the draft JCPenney app.

Add another Single banner to the draft app.

Collection Grid- Next, you can set up a collection grid where you can add links to a set of images for easier navigation. Choose ‘collection grid’ from the widget library drop-down. Select the Collection grid style you’d want. For more details, please click here.

Add the images and links you’d want in the ‘Add/Edit content’ option upon hovering on the collection grid widget.

When done, customize the collection grid’s features in the ‘Edit Style’ option that you’ll find upon hovering on the completed collection grid.

Here's what the JCPenney app would look like after adding these widgets.

Add another Single banner to the draft app.

Banner Grid-Using this widget, you display the banners in a grid format. Select "Banner Grid" from the widget list. Place one from among the different style variants inside the app's home screen layout. click here, to know more about banner grids.

Add the images and links you’d want in the ‘Add/Edit content’ option upon hovering on the banner grid widget.

When done, customize the banner grid’s features in the ‘Edit Style’ option that you’ll find upon hovering on the completed banner grid.

Here's a mobile preview with all the widgets we've added till now.

Product Slider- Similar to the collection slider, you could use the product slider to showcase your star products.

Select the right product slider design from the widget library and drop it into the draft app layout. For more information about this, click here.

Add the images and links you’d want in the ‘Add/Edit content’ option upon hovering on the dropped widget.

When done, customize the product slider widget’s features in the ‘Edit Style’ option that you’ll find upon hovering on the completed product slider.

Besides this, you could add widgets like a Banner Slider, Collection Grid, Product List, Search, Carousel Banners, and Timer.

After you’ve added all the widgets, links, and images to your app, here’s what the draft JCPenney app would look like.