Video Tutorial of Edit Style
Swipecart gives you the option to customize the look of the widget as per your app’s theme.
Let’s learn how to edit the widget style once the images are uploaded for the widget.
Hover over the widget and click on “Edit Style” below “Add/Edit Content”.
Here, you can edit the styling parameters for your widget.
Edit Style for Banner Grid, Banner Slider, Collection Grid, Collection Slider, Carousel Banner, Single Banner, Search Bar, Timer, Text Widget, Text Marquee, Image Hotspot, Button, Divider, and Social Links widget
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.
Images- Adjust the image position to Fill, Cover, or Contain
Background- You can choose to color the background with the help of the color picker or upload an image from your system file.
Collection Title- (Only for Collection Grid, Collection Slider)
Text Control- You can choose to display the clipped version or the entire product title through the “Clip” and “Wrap” options.
Indicator- Enable the toggle switch to indicate the number of slides below the carousel. (Only for Carousel Banner)
Select Variants- Select the indicator variant you want to appear below the carousel.
Box Shadow- Enabling this toggle switch will add shadow effects around the widget container’s frame.
Select Variants- Select a variant to add depth to the frame.
💡 NOTE: SOME OF THE ABOVE-MENTIONED FEATURES MAY BE INCLUDED/OMITTED DEPENDING ON THE WIDGET AND THE VARIANT YOU HAVE SELECTED.
Additional features when you upload a video to the Banner Grid, Banner Slider, Carousel Banner, and Single Banner widget
Video-
Autoplay- Enabling this toggle switch will keep the video in autoplay mode. Else a play button is displayed on the video.
Video Sound- You can choose to mute or unmute the video sound.
Edit Style for Product Grid, Product List, Single Product, and Product Slider
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.
Product Data-
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.
Box Shadow- Enabling this toggle switch will add shadow effects around the widget container’s frame.
Select Variants- Select a variant to add depth to the frame.
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.
Infinite scrolling- Enabling it will display the entire product list. Viewers can scroll down without having to wait for the products to upload.
NOTE: SOME OF THE ABOVE-MENTIONED FEATURES MAY BE INCLUDED/OMITTED DEPENDING ON THE WIDGET AND THE VARIANT YOU HAVE SELECTED.
Additional features in Edit Style (Add/Edit Content) for Button
Button- Enter the text to display on the button.
Font Style- Select the font style to suit the app theme.
Font Weight- Adjust to make the font more pronounced.
Font Size- Increase or decrease the font size.
Letter Spacing- Adjust the spacing between letters in 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.
BG Color- Change the button background color with the help of the color picker. You can also type in the RGB, HSL, or Hex values.
Border- Increase or decrease the visibility of the button border.
Border Color- Change the button border color with the help of the color picker. You can also type in the RGB, HSL, or Hex values.
Reset- Clicking on it will delete all the settings and reset the values to default.
Button Icon- You can place an icon in the button when you enable this.
Icon Position- Keep the icon left or right aligned.
Icon Color- Change the icon color.
Delete- Delete the current icon on the button.
Icon Library- Search and select an icon from the existing icon library.
Upload Custom Icons- By enabling this you can upload custom icons from your system file.
Button Link- Link the button to any User-Defined page, System-Defined page, Product, Collection, or Web URL.
Additional features in Edit Style for Image Hotspot
Tooltip Setting-
Font Color- Change the tooltip title font color with the help of the color picker. You can also type in the RGB, HSL, or Hex values.
Background Color- Change the tooltip box background color with the help of the color picker. You can also type in the RGB, HSL, or Hex values.
Additional features in Edit Style for Text Marquee
Marquee Setting-
Font Size- Enter the font size in pixels.
Letter Spacing- Enter the space between the alphabets in pixels.
Background Color- Select the background color with the color picker tool.
Font Color- Select the font color for the text with the color picker tool.
Marquee Speed- Adjust the speed of the text sliding on the marquee
Reverse Direction- Enabling the toggle switch will make the text slide in the reverse direction.
Additional features in Edit Style (Add/Edit Divider) for Divider
Divider-
Height- Adjust the height of the divider
Font Color- Fill color in the divider space
Additional features in Edit Style for Search Bar
Customize Search Bar- Enter the text to be displayed in the search bar
Stroke- Select the border color and its weight.
Reset- Clicking on it will delete all the edits and reset the values to default.
Icons- You can opt to make the Search Icon or Mic Icon visible/invisible on the Search bar through the toggle switch. You may have only the Mic Icon or Search Icon depending on the UI variant you select.
Adjust these variables as per your design format. Check the eventual look of the widget in the preview given alongside. Click “Save” when done.
That’s it to editing the style parameters on Swipecart!
What's Next? 🤔
Explore the next article How to preview the app on Swipecart?