Modify Single Banner with Filter

Modified on Fri, 16 Jul 2021 at 10:15 AM




    1. LAYOUT

        Tick to have the Boxed Layout, an auto padding will be added around the main wrapper.

        Height: Input the banner's height into the box with the number in pixel. You can modify the banner's height in tablet and mobile modes as well by adding a comma "," after the number as the example below (Desktop, Tablet, Mobile respectively)

Section margin: Enter the numbers in pixels to set the margin for the section. Following the format of the example to set the margin in order Top Right Bottom Left (eg: 50px 20px 0 20px). 

If you also want to set the margin for this section in other interfaces (Tablet, Mobile), just adding a comma "," and continue to type the number for that interface following the order Desktop, Tablet, Mobile (eg: 50px 20px 0 20px20px 30px 0 30px30px 20px 0 30px)

Section Padding: filling the numbers in pixels with the same format as the margin settings above

* There is a link for the people who have not identified the difference between Margin and Padding yet.


        - Background color: you can choose any color to display for the background by clicking on the color picker

  - Background image: another option for you to modify the background. You can upload your own image or choose an available one

        - Background Size: Scroll down to choose the size of the banner to display: Auto/ Cover/ Contains

        - Position: Scroll down to select the position: Left Top/ Right Top/ Center Center etc.

      - Repeat: Scroll down to change the background repeat: No Repeat/ Repeat/ Repeat X (repeat horizontally)/ Repeat Y (vertically)


        Insert the content for Text 1, Text 2. Eg: A new level of comfort, Tested for your safety

         Color: Choose any color to change for each Texts' content by clicking on the color picker

        Font size: The font-size property sets the size of a font, enter the font size into the boxes for the Text 1,Text 2. Eg: 56px,36px,24px corresponding with the Desktop, Tablet, Mobile.

        Font weight: Drag to adjust how thick or thin characters in text should be displayed, Eg: 500

        Margin: Input the margin in order of Top Right Bottom Left, Eg: 5px 10px 5px 10px


Background color: click on the color picker to set the color for the filter background, or you can delete the number in the box placed next to color picker to clear the filter background.

Text color: set color for the "reset" text 

Theme setting

Give the title for each level text box on the Filter 

  • Filter level 1's title
  • Filter level 2's title
  • Filter level 3's title

  • Data Input: type the exact name of JSON data into the box to operate the Filter on the store

Check this link to know how to create a JSON data

Note: Please click Save on the top right of the screen to save the step-by-step that you just input.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article