Advice and answers from the Rentech Digital Team

  • Product Slider

    Display products on sliders and direct customers towards what they might be interested in

    Video Tutorial of Product Slider

    • You can add a product slider 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 slider 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 slider” from the drop-down list

    • Product slider 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 Slider?

    • Upload an image.

    • There are 3 ways the product slider works-
    • You can manually add products from the drop-down you’d want in the slider.

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

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

    • Once done, click on “Save”.

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

    How to Edit Style of Product Slider?

    • Radius
    • Padding
    • Container Padding
    • Customize Images
    • Widget Title
    • Text Control
    • 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.

    • Additional Products Button- Enabling the “Additional Products Button” toggle switch allows you to select See All, See More, View All, or View More text clickable option for the customers.
    • Button Type-
    • Underline- Enabling it will underline the additional products button text.
    • Button Color- Enabling it will allow you to change the Button Background Color and Button Font Color.

    💡 NOTE: Some of the above-mentioned features may be included/omitted depending on the widget and the variant you have selected.

    • 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.