Video Tutorial of Single Product

The Single Product widget allows you to display only a single product on the app’s home screen instead of several products in a grid, list, or slider format.

The benefit is that the specific product gets highlighted, getting you more click-through rates and boosting product sales.

• On your Swipecart dashboard, go to "Designs".

• Hover over the design where you want to add a single product and click on the pen icon to edit the design.

• Now, click on the “Home” tab on the top navigation bar.
• You’ll see a widget drop-down box consisting of the widget list on the right side of your screen. Click on it to access the widget list.

• Scroll down and select “Single Product" from the drop-down list.
• You’ll see different UI style variants for the Single Product widget displayed just below the drop-down box.

• Drag and drop any preferred style variant inside the app’s home screen.

• Hover over it and click on “Add/Edit Content”.

How to Add / Edit content of a single product?

• In the opened popup, add a title and select a relevant product from the drop-down product list.
• Click on “Save” before you exit.

How to Edit Style content of a single product?

• Hover over the widget again and click on “Edit Style”.

In the opened popup, you can change the following parameters.

• Radius
• Padding
• Container Padding
• Widget Title
• Customize Images
• Background
• Box Shadow

• Product Title, Add To Cart Button, Favorite Button- By enabling or disabling these toggle switches you can choose to display or hide them on the page.
• Product Price- When you enable “Product Price”, 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- Enabling it will display the selling price.
• Next to it, the original price is displayed in a strike-through format.
• Select price display option- Select one display variant for the strike-through from among the options.
• Display compare price first- Enabling this will display the original price first before the selling price.
• Select tag- Select the display style from among the tag variants.
• Font Color- Select a font color for the price display.
• BG Color- Select a background color for the displayed price.
• Tag Position- Select the tag position to the top left or next to the price.

💡 Note: If you enable the strike-through display, your custom price tag display format becomes disabled.

• 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.
• Click here to learn how to preview app updates through the Swipecart mobile app on your mobile device.

That’s it. We are done adding the Single Product widget on the app’s home screen on Swipecart.