What is Element Flow?
Work on the native Classic theme
Can it work with Preminum themes?
How to copy popups and sidebars?
How to switch from a theme to the Element Flow
Header
How to add create a menu.
Submenus disappear when hover onto them.
I see there are widgets for header, can I use other widgets in the header.
How to adjust the position of a sidebar/popup?
1. How to create a mobile header.
Generally, you need to create two rows, one for desktop, and one for mobile. You can find settings under the "Advanced" tab to show/hide for different breakpoints.
2. How to make all images in webp.
PrestaShop 8 and PrestaShop 9 has a built-in WebP feature for product images, enabling the feature to make all product images, category images, and brand images in WebP. If that's not enough for you, you would like to use WebP format for all images, then use our WebP module, which can make all images in WebP format.Â
PrestaShop 1.7 users can use a WebP module to convert all images to WebP format.
3. Why are banner images still end with .jpg
You may find the extension of product images becomes .webp as expected, but the extension for some other images is still .jpg, don't worry about that, your server will serve them in WebP format if their WebP version exists.
4. Choose no extension or .jpg extension in the filemanager
Once you generate WebP images for the /img/cms/ folder using a WebP module, you will find the same image shows twice in the file manager, one with no extension, one with .jpg extension, which one to choose? Choose the one with NO extension, its .jpg extension just not showing by the filemanager. The one with .jpg extension actually has a .jpg.webp extension.
What would happen if the .webp gets chosen, then the image will show out fine everywhere but the Safari browser.
5. How to add custom icons
6. How to add custom fonts
Go to BO > Element Flow > Settings > "Upload custom fonts" section to upload custom fonts.
8. Svg VS csutom icons
They could be the same; the custom icons you get can be in a font file, or they can also be a set of SVG files. I prefer using svg files.
9. What doesn't the Clear template && css cache button do?
The Clear cache on the BO > Improve > Element Flow > Settings page is used to clear template files generated by the Element Flow. The content of a record is saved to a template file, PrestaShop loads the template to show the content on the front end. The template file will be updated automatically when the content is changed, but in these two cases, the template file needs to be erased manually for regeneration.
- When your Element Flow is upgraded.
- When a file included in the template is changed. For example, when a product miniature is changed, then all template files that use the product miniature need to be erased for them to be regenerated.
10. How to completely clear the caches?
Do the following steps (order matters):
- Go to BO > Advanced Parameters > Performance > Enable CCC for js and css. Yes, enable them to avoid having browser cache related issues.
- Go to BO > Improve > Element Flow > Settings page > Clear the template & css cache, see the above step #9.
- Use an FTP client to remove the /var/cache/dev/FrontContainer.php and the /var/cache/prod/FrontContainer.php. Only need to do it once after every update.
- Go to BO > Advanced Parameters > Performance > Click the Clear cache button on the top right corner to clear the Smarty cache.
By doing the above steps to clear the caches completely, if an issue still exists after clearing the caches, then it's not a cache-related issue.
Note:
- No need to clear the browser cache.
- The Template compilation setting and the Cache setting on the BO > Advanced Parameters > Performance page don't matter.
11. What's the Smarty cache setting?
The Smarty cache on the Performance has to be enabled to make the Smarty cache setting on every record work. If the overall Smarty cache is disabled, then all records won't be cached even if their Smarty cache is enabled.
If the Smarty cache for a record is enabled, the record's content will be cached. For a cached record, the cache content will be shown right away, which is an excellent way of shortening the page loading time. It's recommended to enable the Smarty cache for all records except theme templates (Theme templates are records under BO > Element Flow > Theme builder > Theme templates)
If the Smarty cache is disabled, then PrestaShop queries the database to retrieve data for generating content every time the record is shown. This is useful in some cases, for example, to highlight the current category in the menu.
Some widgets will up updated automatically if they are in a cache-enabled record, like the shopping cart widget, because their content shouldn't be cached. If a shopping cart widget is in a Smarty cache-enabled record, then the shopping cart will be automatically updated when the page is loaded.
Then why should the Smarty cache be disabled for the theme templates? like the product templates and the category templates.
Whether the Smarty cache is enabled for a theme template or not, the template will work fine for two reasons:
- PrestaShop retrieves data from the database every time for every category page, regardless of the Smarty cache setting. So, enabling the Smarty cache won't speed up the pageload time.
- The product list of a category where the category template gets used for the first time will be cached, but the cached product list works for the category only. So, the cached product list will be automatically updated via Ajax on other categories when the page is loaded, which slows the page rather than speeds it up.
Every time a record is edited, element flow will try to clear its cache, but whether the cache will be successfully cleared or not depends on the Template compilation setting on the Performance page.
How does it work with other cache modules?
They will take care of everything, so enable the Smarty cache for all records except theme templates, like always.
12. How to perfectly center an element vertically and horizontally.
- Set it parent's position to Relative. Since the position of container is Relative by defaullt, no need to do anything.
- Set a fixed width to the element.
- Set the element's Position: Absolute, Top:50%, Left:50%
- Set the Offset X and Offset Y to -50% in the Transform section.
13. Clicking on the Add to wishlist button does nothing.
14. The editor doesn't load on a multistore site.
This happens if different stores use different domains, for example.
- First store: one.elementflow.com
- Second store: two.elementflow.com
They are two stores using two different domains. If you log in to the first store using this url one.elementflow.com/youradminfolder, then you can't edit the content on the second store, because it triggers cross-domain violation.
To edit content on the second store, then log in to the back office by using this url two.elementflow.com/yourbackofficefolder.
The demos are using the same domain, so once you're logged in, you can edit the content on every demo site.
- elementflow.com/one/
- elementflow.com/two/
They are under the same domain.
15. Can I have a dev site.
It's a common practice to have a dev site. You can install Element Flow on both the live site and the dev site. Put the dev site under maintenance mode to make sure Element Flow work 100% fine without registering. If the dev site is a copy of the live site, then you may get a notice saying the domain doesn't match; just ignore it.
