Video Tutorial of Banner Grid
- For this, go to “Designs”.
- Hover over the design where you’d want to add the banner grid 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 “Banner Grid” from the drop-down list.
- Banner 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 Banner Grid?
- Upload an image: by clicking on the box you can upload an image.
- Internal Linking: With this, you can add an image link that will go to-
- Product
- Collection
- Page
- External Link (web URL)
- Choose the product, collection, or page you’d want to link to, or add a link to an external page (Select the “Open outside the app” option for a link that’ll open with the device browser). Click on “Add” when done.
- If the “Internal Linking” option is unchecked, you’d be able to upload only an image without a link.
- Once done, click on “Save Banner”.
- Once you’ve uploaded your banner grid, there will be an “Edit Style” option below Add/Edit Image.
How to Edit Style Content of Banner Grid?
- Here, you can edit the
- Radius
- Padding
- Container padding
- Widget Title
- Images
- Background
- Box Shadow
- 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.