Documentation
Venedor Presashop Premium Theme
Thank you so much for purchasing our item from themeforest.
- Version: 3.3.0
- Author: Promokit
- Created: 3 September, 2014
- Update: 6 March, 2021
What’s In The Box
By purchasing Venedor Prestashop Theme you get:
- Docker — The archive what you can install in Docker
- Documentation — contains theme's documentation
- PSD — contains the Theme's Design in Adobe Photoshop format
- Theme — contains installable files. The main theme archive and the child theme
Installation
To install the theme you must have a working version of Prestashop already installed. For information in regard to installing the Prestashop platform, please see the Prestashop Documentation
Requirements
PHP configuration:
- PHP version: We recommend PHP 7.1 or later.
- memory_limit should be at least 128M (256M recommended)
- post_max_size should be at least 1M
- file_max_upload_size: 16M
- allow_url_fopen: on
- allow_url_include: off
- register_globals: off
Apache modules:
- mod_rewrite: on
- mod_security: off
- mod_auth_basic: off
- CURL. The Client URL extension is used to download remote resources like modules and localization packages.
- DOM. The DOM extension is needed to parse XML documents. PrestaShop uses it for various functionalities, like the Store Locator. It is also used by some modules, as well as the pear_xml_parse library.
- Fileinfo. The File information extension is used to find out the file type of uploaded files.
- GD. The GD extension is used to create thumbnails for the images that you upload.
- Iconv. The ICONV extension is used to convert character sets.
- Intl. The Internationalization extension is used to display localized data, such as amounts in different currencies.
- JSON. The JSON extension is used to manage JSON format.
- Mbstring. The Multibyte string extension to perform string operations everywhere.
- OpenSSL. The OpenSSL extension is used to improve security.
- PDO. The PHP Data Objects extension is used to connect to databases.
- PDO (MySQL). The PDO_MYSQL driver is used to connect to MySQL databases.
- SimpleXML. The SimpleXML extension is used to manage XML files.
- Zip. The Zip extension is used to expand compressed files such as modules and localization packages.
Permissions
- Permissions for all files should be set to "644"
- Permissions for all folders should be set to "755"
How to check out my php config?
1. If you have already installed Venedor theme, go to "Theme Settings" → "Welcome" tab and see "System Status"
2. You can also use a phpinfo() function to view your server current PHP information
- To create a phpinfo file, open a plain text file, add the following line, and save:
(Filename: phpinfo.php)
<?php phpinfo();
- Upload the file to your server. You should upload the file to the exact directory you want to test. Typically, this will be your prestashop ROOT directory.
- Visit the page in your browser. If you uploaded it to prestashop ROOT directory, you should now visit http://yourdomain.com/phpinfo.php, replacing yourdomain.com with your own domain name.
Please also check "Informaion" in "Advanced Parameters" of
your BO. All parameters should be "OK", like this:
Install through browser
Follow the steps below to setup your site template:
- Log into your Prestashop Back-Office and go to "Design" → "Theme & Logo"
- Then click on the button. Next browse for the zipped theme file.
make sure you take the "Installable zip" as this is what you would upload. "Installable zip" file is called "venedor-v.X.X.X.zip"
Once Prestashop has unpacked and installed the theme, just click to button
Installation video tutorial
Install through FTP
Manual Update
- Make a backup of your shop.
- Go to "Advanced Parameters" → "Performance" and set "Template compilation" to "Force compilation" and "Cache" to "no"
- Go to downloaded archive "Updates" folder and unzip an update archive.
- Upload unzipped "themes" and "modules" folders to the root of your prestashop.
- Done
Automatical Update
- Make a backup of your shop.
- Go to "Advanced Parameters" → "Performance" and set "Template compilation" to "Force compilation" and "Cache" to "no"
- Go to "Theme Settings" → "Welcome" tab
- Add your theme "Purchase ID" to the specific field and save
- Click "Check for Updates" and see if any updates are available
- Click "Run update" and wait while page will be reloaded
- You will see a message "The update was installed successful"
- Done
Theme Update Video Tutorial
Child Theme
This feature is only useful if you want to slightly modify a theme (to add a block for example). If you need to modify the markup more deeply, modify the theme, don’t create a child theme.
How to create a child theme
First you need to have the theme you want to use as parent in your store /themes folder. Then you can create a very minimal theme, containing only the following files:
.
├── config
│ └── theme.yml
└── preview.png
It’s recommended to copy these files from the Parent theme.
Once you have this, you will specify in your child theme theme.yml which theme should be used as a parent. The value must be the theme technical name (ie: the theme folder name).
Minimal config of child theme
parent: venedor
name: child_venedor
display_name: Child theme of venedor's theme
version: 1.0.0
assets:
use_parent_assets: true
js:
all:
- id: venedor
path: assets/js/venedor.js
priority: 59
position: bottom
After changing theme's config you have to delete
/config/themes/venedor/shop1.json
file to reload updated config.
Read more about Child themes in the Prestashop development documentation: https://devdocs.prestashop.com
You can find minimal child theme in the archive. Go to the "Theme" folder and find there "venedorchild.zip" file.
Modules
A module is a piece of software containing a group of functions. They extend functionality and add new features to the theme. The list of modules what comes with Venedor theme you can find below:
- Page Builder
- Simple Blog
- Revolution Slider
- Promokit Theme Settings
- Promokit Menu
- Promokit AMP
- Promokit Facebook
- Promokit Popup
- Promokit Captcha
- Promokit Lookbook
- Promokit Instagram
- Promokit Compare
- Promokit Product Tabs
- Faceted Search
Promokit Menu
See our video tutorials how to work with menu
Faceted Search
About
Faceted Search module is a default PrestaShop module that displays a block with the layered navigation filters. It enables the customer to define combined criteria to filter category products, little by little providing more details in order to reduce the number of displayed products. This is a great tool for customers who know the details of what they want (color, condition, price range) but are unsure how to find it.
In your PrestaShop admin panel go to Modules -> Modules and Services section, choose Installed modules tab and type in the Search field “Faceted Search” to find the module. If the module is not installed, click the Install button. When the module is installed, click the Configure button.
Indexes and Caches
To work properly, Faceted Search must be kept up-to-date with your latest products, product attributes, and all product prices. That’s why it is necessary to re-index the data.
Index all missing prices – only adds to the index the prices that were not indexed before. Rebuild entire price index – adds to the index all the prices, whether they were already indexed before or not. Build attribute index – adds to the index all the product attributes.
Image Settings
Prestashop can accept images of (almost) any size. It automatically reformats the images you upload and saves them according to it’s default image size. Prestashop also resizes the images to generate smaller thumbnails. So the best image size is the largest size that Prestashop uses (for zoomed up images), then the smaller images will be taken care of later.
By default Venedor theme has images aspect ratio 10:13, but you can change it as you like.
Tips to get nice looking images:
Image Settings
- All images sizes related to products should have the same ratio
Source Images
- Source images should have the same ratio as defined in the Image Settings
- Source images should not be smaller than defined for "large_default" image type
Here is the screen of image sizes by default:
Page Builder
See our video tutorials how to work with Page Builder
Page Builder – Content
Footer Builder
Menu Builder
CMS Page Builder
Product Page Builder
Page Builder – Images
Page Builder – Products
Theme and Modules Translation
Modifying a Translation
The most important tool of the "Translation" page is in the "Modify translations" section. This is where you can choose to add a translation, and completely customize each and every sentence if you wish so. Go to "International" > "Translations" to get it
Select the part of the current translation that you wish to edit:
- Back office translations. The text visible to you and your team from your store's administration panel.
- Theme translations. The text visible to your customers when browsing your store.
- Installed modules translations. The content from the modules. Note that modules which are available but not installed will not appear in the tool.
- E-mail translations. The terms used in the default email templates.
Modules translations
When you wish to translate a specific module, choose "Installed modules translations", then select the one module you want to edit. It will open a new page with the content from this module, and all its available strings.
Form Fields Translations
- go to shop back office
- go to localization → translations
- "type of translation" select "field name translations"
- "your language" select language that you want to modify
SVG Icons
Change an icon
For example you want to change "facebook" icon.
- Open the file
/themes/venedor/templates/_partials/svg.tpl
- find "facebook" icon, it looks like this:
<symbol id="si-facebook" viewBox="0 0 288.861 288.861"> <path d="M167.172,288.861h-62.16V159.347H70.769v-59.48h....."> </symbol>
- Find new icon, for example here: flaticon.com
- Download it and open in any Text Editor
- Copy all code between
"<svg>" and "</svg>"
tags - Paste it into the file svg.tpl between
<symbol id="si-facebook" viewBox="0 0 288.861 288.861">
and</symbol>
- Copy SVG dimensions
<svg viewBox="0 0 27.965 27.965">
and update them in symbol tag like this<symbol id="si-facebook" viewBox="0 0 27.965 27.965">
Now you can use icon code in any place of the theme, like this:
<svg class="svgic"><use xlink:href="#si-phone"></use></svg>
Suggestion: Use following shortcode to disaplay SVG icon throgh HTML Widget
[svg class="svgic"]<use xlink:href="#si-phone"></use>[/svg]
Icons List
AMP
AMP is an open-source library developed by Google that provides a straightforward way to create web pages that are compelling, smooth, and load near instantaneously for users. AMP pages are just web pages that you can link to and are controlled by you.
There is AMP Page Builder available in Venedor theme. That is a lightweight tool to build your own AMP layout! You can find it in submenu of "Layout Builder" in the left sidebar.
AMP requirements:
- "https" protocol must be enabled in your prestashop
- "Friendly URLs" must be enaled too
How AMP Prestashop module works
If AMP module is installed and enabled it works in following way: If your customer open your store on mobile device (phone or tablet) the module automatically rederect him to AMP theme version.
AMP Logo
Go to "Design" → "Theme & Logo" and upload your logo image.
AMP Home Page
We have developed special tool to build AMP pages. You can find it in the "Layout Builder" → "AMP Page Builder". It works exactly like any other builder tool and you can build your AMP homepage very quickly with drag&drop option.
AMP Menu
AMP version use native Prestashop menu module "Main Menu". Make sure you have it installed and enabled. Go to menu settings and select menu items to show to compose your AMP menu
Translations
All wordings used in AMP theme available in one place. go to "International" → "Translations". Select "Themes" → "Venedor". Find there domain Shop → Theme → Amp
AMP Home page translation available in "Installed modules translations". Go to "International" → "Translations", select "modules" and find "Page Builder".
Footer
Links
To build your own links set in the footer, you have to go to "Link List" module settings and
click "New Block" there. Put a title, select "displayAmpFooter" hook and needed links.
Social Icons
Go to Theme Settings → Footer, and enable "Display Icons of Social Networks". Then go to
Theme Settings -> Social Accounts and enable "Display Accepted Payments Systems". Then go to
Theme Settings -> Payment Icons and select payment services you are using.
Payment Icons
Go to Theme Settings → Footer, and select social networks you want to show.
AMP Troubleshooting
If your AMP theme doesn't work or has some issues please check out following items:
- The module "AMP" must be installed and enabled
- Go to "Theme Settings" → "AMP" and make sure the option "AMP" is enabled
- Go to "Shop Parameters" → "General" and make sure the option "Enable SSL" is enabled
- Go to "Shop Parameters" → "Traffic & SEO" and make sure the option "Friendly URL" is enabled
- Make sure permissions of the module folder and files are correct.
Theme in Docker Container
Performance
This section contain tips that might help you improve your shop's performance server-wise. We recommend you to enable these cache options only when you finish all necessary configuration actions
Recommended settings for working in production shop:
Smarty
- Template cache - Never recompile template files. Prestashop stop spending time for checking every file for modification to recompile it
- Cache - Enabled
- Caching type - File System
- Clear cache - Never clear cache files
Debug Mode
- Debug Mode - No. By enabling this option, technical error messages will be visible. It is useful when you are being helped by someone who does not have access to your shop but who needs to know what is going on technically.
Media. Combine, Compress and Cache (CCC)
- Smart cache for CSS - On. Combine and compresse CSS files
- Smart cache for JavaScript - On. Combine and compresse JS files
- Apache optimization - On. This setting will change your web server's configuration file in order to make it more efficient for CCC.
Technical details
Performance detailed description
Additional Optimization
Optimize your PrestaShop performance
Optimization from canonicalized.com
Prestashop Speed Optimization – How to make it insanely fast!
Theme Update
Manual Update
- Make a backup of your shop.
- Go to "Advanced Parameters" → "Performance" and set "Template compilation" to "Force compilation" and "Cache" to "no"
- Upload "themes" and "modules" folders from "Archive/updates/LATEST_VERSION/ to the root of your prestashop.
- Done
Automatic Update
- Make a backup of your shop.
- Go to "Advanced Parameters" → "Performance" and set "Template compilation" to "Force compilation" and "Cache" to "no"
- Go to "Theme Settings" module → "Welcome" tab
- Add your theme "Purchase ID" to the specific field and save
- Click "Check for Updates" and see if any updates are available
- Click "Run update" and wait while page will be reloaded
- You will see a message "The update was installed successful"
- Done
Theme Update Video Tutorial
FAQ
A FAQ is a list of frequently asked questions (FAQs) and answers on a particular topic.
- New
By default, all products you add are considered to be New. You may
change number of days during which your products is considered as
“New” in Shop Parameters → Products Settings
- Featured
To make the product Featured, go to Catalog
→ Products and in Associations field add it to Home
category
- Special
To make the product Special, go to Catalog
→ Products and add a discount.
- Bestseller
It's a product which was sold much times
Go to back-office > "Shop Parameters" → "Contact". There are two tabs available, "Contacts" and "Stores". Go to "Stores" tab and find all available contact details.
Please make sure the module "Contact form (by PrestaShop)" is installed and enabled
Go to "Design" → "Themes & Logo". Click on "Choose Layouts", find necessary page and choose desired layout.
Go to "Modules" → "Installed Modules", find there "Newsletter subscription". Click on "Configure"
Go to "Modules" → "Installed Modules", find there "Installed Modules". Click on "Configure"
1. Go to "Modules" → "Theme Settings" → "General Tab", find there
"Google API Key" and put your API key there. Read more about API key here
2. "Theme Settings" → "Contact Page". Put coordinates of your store
and save.
1. Make sure Maintenance mode is disabled
2. Make sure the module is enabled
If your translation doesn't work, try to change it and save, then change it back.
Go to Page builder. Click "Settings" and disable "Async Requests" option
1. How to manage sidebars on category page you can read here #faq5
2. How to add Product Filter (Faceted Search):
- Go to "Modules" in your back office
- Find "Faceted Search" module and make sure it's installed and enabled
- Make sure the module is configured properly and indexed all products
- Go to "Design" → "Positions", search "displayLeftColumn" hook and make sure the module is in the modules list of necessary hook
3. How to add any other module to your sidebar
- Go to "Design" → "Positions" and click "Transplant a module" button in the top right corner
- Select a module you want to move and "displayLeftColumn" hook
- Click "Save"
Step 1: Download the font
Find the custom font you want to use on your website, and then download the TrueType Font file format (.ttf). You can also download the OpenType Font format (.otf)
Step 2: Create a WebFont Kit for cross-browsing
Upload your .ttf or .otf file to the Webfont Generator and then download your Web Font Kit.
Step 3: Upload the font files to your website
Using your FTP or file manager, upload all the font files found
within your Web Font Kit to your website into the folder
/themes/venedor/assets/fonts/
. Typically this kit will
include multiple file extensions such as (.eot), (.woff), (.woff2),
(.ttf) and (.svg).
Your kit will also include a Cascading Style Sheet (.css) that you will need to update and upload in step 4.
Step 4: Update your CSS file
Open downloaded CSS file in a text editor
Replace the existing source URL with the new URL you created by uploading each file.
Here’s a quick example:
Before update:
@font-face {
font-family: "CustomFont";
src: url("CustomFont.eot");
src: url("CustomFont.woff") format("woff"),
url("CustomFont.otf") format("opentype"),
url("CustomFont.svg#filename") format("svg");
}
After update:
@font-face {
font-family: "CustomFont";
src: url("../fonts/CustomFont.eot");
src: url("../fonts/CustomFont.woff") format("woff"),
url("../fonts/CustomFont.otf") format("opentype"),
url("../fonts/CustomFont.svg#filename") format("svg");
}
Now copy that code and paste it to the beginning of the file
/themes/venedor/assets/css/theme.css
Step 5: Add your font to the Theme Settings Font List
Open the file
/modules/pkthemesettings/config/fonts.json
and add the
name of your font to the list. Here’s an example:
$fonts = array(
'CustomFont',
'ABeeZee',
'Abel',
'Arial',
...
- Go to your server through FTP
- Open the file
/ROOT/translations/cldr/main--en-US--numbers
(or your language, fr-FR, es-ES, ...) - find the code
...{"decimal":","...
- change "," to "."
Select your slider and click "Slide Editor". Select a slide what has youtube video. Find there "Source Settings" -> "Youtube Arguments" and add following arguments:
&autoplay=1&mute=1
- Get your code from Google
- Open the file
/themes/venedor/templates/_partials/javascript.tpl
- Add your code to the end of the file
- add
{literal}
tag around yor code like this:<script src="https://www.googletagmanager.com/gtag/js?id=UA-39464434"></script> <script> {literal} window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-39464434-1'); {/literal} </script>
Support
If this documentation doesn't answer your questions, So, Please contact us via Support Helpdesk at Item Support Page
We are located in GMT +1:00 time zone and we answer all questions within 12-24 hours in weekdays. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).
Don’t forget to Rate our theme
Go to your Themeforest Profile & then You can Rate & Review for our template.
Thank You in advance!