July 05, 2022

Creating and Managing Pages

tutorial

Swipecart let’s you customize the home page as well as add mulitple pages.

tutorial

Let’s jump right into it.

tutorial

Go to Home after you click on Edit Layout.

tutorial

You can add a page by clicking on the Add Page button on the left panel.

tutorial

Once you click on Add Page button a pop up to Add a page will come up. Please name the page what you want.

tutorial

Add as a new page in home will add the page as a new tab item in the home page. By default this option is enabled. You can disselect this option and have the page not linked in the Home page.

tutorial

Once you hit the Submit button the new page will be added with a blank page screen. You can drag and drop elements into the page and design is the way you like.

tutorial

If the Add as a new page in home is enabled the page will show up on the app home page as a new tab item.

tutorial

Let’s go ahead and add a few elements in our page. Let’s add a collection grid, product grid and product carosal.

tutorial

Drag a collection grid from the right hand panel and drop it on the page design element.

tutorial

When you hover over the element is has two options initially. Let’s click on Add/Edit Content option to add some content.

tutorial

A pop up with show up.

tutorial

Please add the title for the widget.

tutorial

Now when you click on the Select collection dropdown it will show you all the collections that are available to you. You can select the collection you would like or you can search for it by simply typing.

tutorial

Once you select a collection it will show the image for the collection in the image selection box. You can keep the image or change it by clicking on the box with the collection image.

tutorial

Please hit the Save button to finish editing and see live preview.

tutorial

Once you hit the save button the content will be updated in the app design section.

tutorial

After you fill in the content you will be able to edit style of the element. Once you hover over the element it will show a side pop up with Edit Style option now.

tutorial

If you click on Edit Style a pop up with come up that has all style options. We are going into more detail into edit style option in our Edit Style Tutorial.

tutorial

Now let’s grab the product grid and fill in our content.

tutorial

Let’s add product carousal as well.

tutorial

You can add more widgets as you like. You can also change order of widgets by dragging and dropping them horizontally.