Video Tutorial of Product List View
The product list view is the screen that displays when a customer clicks on any option in the collection list. The products under that collection category are displayed in a structured format here.
Let’s first go to the app design on which you want to customize the look of the product view list. To do this, click on the Edit icon of the design you want to edit on your Swipecart dashboard.
Then, click on the “Product View List” tab on the top navigation menu of your design dashboard.
The app’s product list view screen appears on the center screen. On the right, you have UI style variants in two formats:
Product Grid
Product List
Click on any one and it is automatically placed on the app’s product list view design. If you want to select another style, click on a UI variant you like and it automatically replaces the old one.
Next, let’s customize the style of the widget. Hover over it and click on “Edit Style”. Let’s see the styling parameters in detail.
How to Edit Style Content of Product List View?
Radius- You can round off all four edges of your widget container.
Padding- Adjust the top, bottom, right, and left padding of the image/video.
Container Padding- Adjust the top, bottom, right, and left padding of the widget container.
Widget Title-
Title Name- Give a heading or title to the widget.
Title Alignment- Keep the title left-aligned, center-aligned, or right-aligned.
Font Size- Select an appropriate font size for the title text.
Letter Spacing- Edit the letter spacing of the text.
Font Color- Change the font color with the help of the color picker. You can also type in the RGB, HSL, or Hex values.
Font Style- Select if you want the font in Normal or Italic
Font Weight- Select the thickness of the font from varying options of light to bold
Reset- Clicking on it will erase all the new settings and restore it to default settings.
Customize Images- Adjust the image position to Fill, Cover, or Contain.
Customize Width-Height- Adjust the Image Width and Image Height.
Image Padding- Enabling this toggle switch will give you the option to adjust the top, bottom, left, and right padding of the image inside the container.
Padding Color- Change the padding color with the help of the color picker. You can also type in the RGB, HSL, or Hex values.
Text Control- You can choose to display the clipped version or the entire product title through the “Clip” and “Wrap” options.
Background- You can choose to color the background with the help of the color picker or upload an image from your system file.
Box Shadow- Enabling this will give a shadow effect to the container.
Product Price Display: When you enable the “Product Price Display” you can choose to display it in a number of formats with the help of-
{MIN_PRICE}- Minimum selling price of the product range
{MAX_PRICE}- Maximum selling price of the product range
{COMPARE_MIN_PRICE}- The original minimum price of the item before a sale.
{COMPARE_MAX_PRICE}- The original maximum price of the item before a sale.
Each box has a copy icon to copy the tags and paste them in the format you want in the text box below.
For example: {COMPARE_MIN_PRICE} Now At {MIN_PRICE}
Show price with strike through- If you want to display the strike-through price- Enable the “Show price with strikethrough” toggle switch. Select one variant from among the options.
💡 Note: If you enable the strike-through display, your custom tag display format becomes disabled.
Infinite Scrolling- Enabling this displays the entire product list so that users can continue to scroll down without having to wait for the products to upload.
That’s it. We are done editing and customizing the Product List View screen for your app on Swipecart.
What's Next? 🤔
Explore the next article Product Page View