Considering the different tastes and various businesses that use our store app, we have created a suitable page builder for you from the beginning of our work. According to this page builder, you can create banners, grids, buttons, etc. anywhere on the page without restrictions. Next, the settings of the first page of the application will be explained.
Getting to know the different parts of the page builder:
At the top of the page, there are two statuses to choose from. Full screen mode and normal mode. The default mode is the normal mode and all the facilities are in it. First, we will explain the normal status, which is the default, and then we will go to the full screen status section.
The normal state of the settings of the first page of the application:
By clicking the add button, a list of page builder features will open for you. From the given list, you can choose the desired element.
Slider element:
If the slider element is selected, like the image below, the slider element will be placed like this. To add an image, just click on the + sign to go to the media section of the site and select the desired image. We have two slider states. Auto-rotate slider, manual-rotate slider (your customer has to scroll the image by hand).
If you want the auto-rotate mode to be active, it must be checked as shown in the image below. The pause time (the length of time each image is displayed to your user and then moves to the next image) should also be at least 2000ms so that your customers can view the banner properly.
The proper dimensions of the slider are 480*960.
According to the image above, you can assign a link to any image. These are repeated in grids (grid types), full width image, button.
Things you can link:
1- To the categories page in the application
2- Single category. By selecting this option, the list of product categories will be displayed to you. You must choose one of the categories to avoid problems.
Note: In this case, if there is a link to the parent (main) category, when you click on the photo, you will display either the products or the list of subcategories according to the settings. (Refer to the article related to application settings)
3- Product ID: If you want your banner image to be linked to a specific product inside the application, it is enough to enter the product ID. According to the image below, you can find the ID of each product.
4- Telegram ID: To enter the ID, please enter only the word itself without the @ sign, for example: appcharsupport
5- Instagram ID: To enter the Instagram ID, just enter the desired word, for example: appcharcom
6- url address: the given address can be to your own site or to other people's sites. When entering the Internet addresses, pay attention that they must be written completely, such as: https://new.appchar.com/
7- Contact number: If you want your users to call you by pressing only one button, the best thing is to use a contact number.
Note: The items mentioned above are available for all users. But by activating the blog plugin, new items are also added Blog guide will be available.
Button element:
Using this element, you can create single row buttons. These buttons, like the slider, have the ability to link to the explained items. Of course, the button has the ability to define a search button, which is not present in the rest of the elements. As in the image below, by selecting the button, a box will open to write the name of the button, and next to it, there is the ability to link to the desired location.
Full width image element:
Full-width images cover the entire width of the phone and are placed individually. All the items that could be linked in the slider. In this element, it can be linked.
Suitable dimensions for full width image: width 960 and height depends on your choice.
An example of a full-width image:
Grid element:
By selecting the grid element, a box will open for you to select the grid type. Single, double and triple grade. Note that this element can be used in many ways. Grades can also be linked to the items explained in the slider. In the following, images of the use of grades with different dimensions are shown.
Suitable dimensions for a single grid: width 960, but height according to your personal taste (square or rectangle)
Suitable dimensions for double grid: width 480, but height according to your personal taste (square or rectangle)
Suitable dimensions for three grids: width 320, but height according to your personal taste (square or rectangle)
What is the difference between single grade and full width: In the full-width image, the entire width of the phone is filled, but in the single grid, a frame remains from the left and right of the image. The difference can be seen in the photo below.
Product list element:
By selecting this element, according to the image below, you can first enter the name of the product list and then select the type of list. The latest, the best sellers and a special category. By selecting a specific category, the list of categories will be placed for you and you can enter an item.
In the update of Apchar plugin version 3.8.0, you can set the number of products in each row as you wish. By default, 15 products are displayed in each row. But this amount is adjustable (it is recommended not to put more than the default number because it affects the initial load of your application)
How to do it: After making the above settings, just hit the save button. After pressing the save button, a new box will open in front of your element (according to the image below) where you can set the number and finally press the save button again.
Display the list of products
Category slider element:
Through this element, you can have the categories together as buttons.
1- You can display all parent categories by selecting main categories.
2- By selecting one of the parent (main) categories, all its sub-categories will be displayed.
3- When choosing the color, you can choose green color, the main color of the application.
4- Door this site You can easily find the color code you want and it gives you good suggestions for color combinations.
Display this element in the application:
Full screen status of the application's front page settings:
By selecting the full screen status and saving it, the following screen will be displayed. Note that if any settings have been made in the normal state, with this, all previous settings will be lost.
According to the image below, in this section, you can only use the full-width image element and no other element should be used. You can assign different links to these images as above.
Display full width mode in the application:
September update:
In September, the slider category was added to the settings of the first page of the application in the form of a picture. It is enough to check the category display and then it will be displayed with the image in the application.
Display in the application:
