CS-Cart Before After Banners

Banner

The CS-Cart Before After Banners addon helps you create and display impressive before and after images on the storefront. Customers can easily compare these images using a slider. They can see the benefits of the products. Admins can upload images, set creation dates, and activate banners. It's a simple way to highlight product improvements and engage customers visually.

Feature

  • Create new banners by uploading before and after images, setting a name, creation date, etc.
  • Works smoothly with CS-cart multivendor.
  • Add banners to your homepage by creating a new block in the Design Layouts section. 
  • Adjust the width and height of banners and customize their appearance.
  • The admin can enter "before" and "after," banner text and set the background and font colors.
  • Customers can use a slider to compare before and after banner images easily.
  • Showcase promotional content effectively, helping customers see the benefits of your products.

Installation:-

How to install Addon

https://store.ecarter.co/blogs...

How addon Work

  • Go to >> General Tab
  • Click on >> Items for menu link to directly access the addon. 
image1
  • Below page will show you the list of created banners.
  • Click on >> (+) icon to create new banners.

image2

Banner creation settings explanation 

  • Name: Enter the name of the banner
  • Before image: Click on local to upload before image. 
  • After image: Click on local to upload After image.
  • Width and height: Enter the Width and height of the banner.
  • Before and after text: Enter before and after banner text. 
  • Background and font color: Select the before and after banner text background and font color.
  • Creation date: Here you can select the banner creation date. 
  • Status: Set the status as Active. 
  • At the end, click on >> Create button.
image3

image4

  • Go to >> Marketing
  • Click on >> Before After Banners 
image5
  • Below you can see the created banner. 

image6

Creating the layout of this banner

  • Go to >> Design menu.
  • Select >> Layouts.
  • Then, Click on >> Layouts.
  • Switch to the >> Homepage
  • On the same page, below you find (+) icon. Click on that icon to add a new block. 
image7


image8

  • Now Switch to >> Create New block
  • Click on >> Before After Banners  

image9

  • In the General Tab, Enter the name of the block. 

image10

  • Switch to >> Content tab.
  • Here, you can set the filling.
  • Click on >> Add Banners 

image11

  • Tick the checkbox to select the banner.
  • Then, click on Add banners and close. 

image12

  • After the successful addition of the banner in the block, you can see the notification "The Items were added successfully". 
  • Now, click on >> Create button. 

image13

  • Below the homepage of layouts shows the new block that we have created. 

image14

  • In the storefront, you can see the added "Before and After" images. By moving the slider, you can view and compare both the images. This feature helps showcase impressive product images on the storefront. 
  • At the bottom corners, the boxes show the text before and after with different backgrounds and font colors.

image15

Addon-Version:

Version-1.0

Supported Versions:

CS-Cart, CS-Cart Multivendor 4.8.x, 4.9.x,4.10x,4.11x,4.12,4.13x, 4.14x, 4.15x, 4.16x, 4.17x, 4.18x

Support:

This app is developed and published by Ecarter Technologies Pvt. Ltd., a CS-Cart developer. You are guaranteed quality add-ons.