• You can add a product list design to your mobile app pages simply by dragging and dropping the required widget into the draft app.

  • For this, go to “Designs”.

  • Hover over the design where you’d want to add the product list and choose “Edit”.

  • Click on the “Home” tab on the top bar.

  • You’ll see a widget panel on the right-hand side with different widget options.

  • Choose “Product List” from the drop-down list.

  • The product grid widget has multiple UI.

  • You can drag and drop from widget options and Select the UI variant you want to use with your application.

  • Once you finalize the view you can hover over the design section and see the button to “Add/Edit Content”.

  • Clicking on “Add/Edit Content” will open up a pop-up.

How to Add/Edit Content of Product List?

  • Name the widget.

  • There are 3 ways the product list works-

    • You can manually add products from the drop-down you’d want in the grid.

    • You can choose a collection to display and manage the products you’d want in the grid. The popup will display all the products in the grid and you can manage the products displayed as required.

    • With the Artificial Intelligence (AI) option, Swipecart will automatically display suggested products based on redecided variables.

  • Once done, click on “Save”.

  • Once you’ve uploaded your banner grid, there will be an “Edit Style” option below Add/Edit Image.

How to Edit Style of Product List?

  • Here, you can edit the

    • Radius

    • Padding

    • Container padding

    • Image (orientation)

    • Title Alignment

    • Background

    • Font Color

    • Box Shadow

  • Besides this, you can also use the toggle options for displaying

    • Product Title

    • Product Price

    • Add to Cart button

    • Favorite button

    • Additional products button(along with the button text)

  • Adjust these variables as per your design format. Check the eventual look of the widget in the preview given alongside.

  • Click “Save” when done.

  • You can see the “Preview” using the preview app.


Hurray! 🥳


What's Next? 🤔
Explore the next article Product Slider


Did this answer your question?