VIVAshop

VIVAshop - Responsive CS-Cart Theme update guide from v2.16 to v2.26 for CS-Cart 4.9.3

by: EnergoThemes
www.energothemes.com

IMPORTANT

Please note that VIVAshop theme version 2.26 included in your downloaded package is compatible with CS-Cart 4.9.3 version
If you have custom modifications to the files please make a backup of those files and restore them after the update is complete.
Please make sure you have installed CS-Cart 4.9.3 before installing the template.

This version unifies all 3 Skins into a single installation and you will be able to switch between them without having to delete and reinstall the whole theme. You will be able to use any of the 15 styles with any layout that the theme comes with.

Also note that the cookie law functionality has been removed as it does not conform to the GDPR standards.

Below you'll find the necessary details in order to update your VIVAshop template. Please make sure you follow all the installation steps EXACTLY the way they are explained. So, let's go ahead!

To follow the documentation easier you may insert your admin link in the box below: While setting up/configuring your theme you will see a link that will redirect you to the exact sections where you need to take a particular action.

IMPORTANT:

We STRONGLY recommend making a local backup of all your files and the database or at the very least use the built in CS-Cart database backup functionality to avoid any issues as this update may replace some of your custom block content if it is not performed correctly.

In order to create a backup using the CS-Cart functionality follow these steps:

Step 1:
Please log into your administrator area and navigate to "Administration" - "Backup/Restore". (link)
Step 2:
Click the + icon in the top right
Step 3:
In the new popup window make sure the following options are enabled:
- Backup database data: Checked
- Click the blue "Select all" link to select all the database tables
- Backup options: Backup database schema: Checked
- Backup options: Backup database data: Checked
- Backup file name: pre_theme_update_backup
Step 4:
Click the blue Create button in the lower right

In case you encounter issues once the theme update is completed you may restore using this backup by hovering over the name "pre_theme_update_backup.sql.zip" then clicking the gear icon and selecting the "Restore" option.

Part 1: Uploading and installing the new addons

Please log into your administrator area and navigate to "Add-ons" - "Manage Add-ons".

Step 1:
Click on + sign (Upload & install add-on).
Step 2:
In the new window under "Select a file or enter a URL" click on the "Local" button and locate the "addons" folder from your unzipped archive.

Select the file "energothemes_megamenu_image.zip" and click Open.
Step 3:
Click the blue "Upload & install" button.

Repeat this process and upload the following addons:

"energothemes_search.zip" - for the category search addon.
"energothemes_ie9fix.zip" - for legacy IE 9 compatibility.
"energothemes_license.zip" - required for license activation.
*NEW* "energothemes_vivashop_addon.zip" - required to activate Skin specific functionalities.

Part 2: Setting up the new addon

Step 1:
Log into your administrator area and navigate to "Add-ons" - "Manage Add-ons".
(link)
Step 2:

Scroll to the EnergoThemes - VIVAshop Addon addon, click the gear icon and click Settings.
Step 3:
Click on the "Select skin functionality" dropdown and select the skin you currently have installed.
Step 4:
Click the Save button in the lower right.

Step 1:
Please log into your administrator area and navigate to "Administration" – "Import data" - "Translation". (link)
Step 2:
Click on "Language variables" tab.
Step 3:
In the new tab under "Select a file or enter a URL" click on the "Local" button and locate the "update_files" folder in the "1.documentation" folder from your unzipped archive.

Select the file "vivashop_2.26_language_variables.csv" and click Open.
Step 4:
In the upper right side click the blue "Import" button.

IMPORTANT If you have custom modifications to the theme files please make a backup of those files and restore them after the update is complete.

OPTIONAL:

The default style files have been renamed in this version so the old ones can be safely deleted. To do this you need to navigate to "design/themes/vivashop/styles/data" and delete all the style files starting "vivashop" inside this folder. (For example: vivashop1.css, vivashop1.less, vivashop1.png)

Also navigate to "var/themes_repository/vivashop/styles/data" and delete all the style files starting "vivashop" inside this folder.

Step 1:
Please log into your administrator area and navigate to "Design" – "Themes".(link)

Click on + sign (Upload theme). In the new window under "Select a file or enter a URL" click on the "Local" button and locate the "themes" folder from your unzipped archive.

Select the file "vivashop.zip" and click Open.

Click the blue "Upload" button.
Step 2:
On the right side of the page in the "THEME INFORMATION" section find the "Directory" text and click on the "/vivashop" link.(link).

Click on the gear button in the top right and select the "Restore from the repository" option.

Adding the sticky mobile menu:

Please navigate to "Design" - "Layouts" and follow these 12 steps.

Step 1:
Scroll down and hover over the HEADER area title then click the + sign (Add grid) and click the "Add grid" link.
Step 2:
In the new window set the following options:
- Width: 16
- Content alignment: Left
- Offset: 0
- User-defined CSS-class: et-sticky-mobile
Click the blue "Save" button.
Step 3:
On the new grid click the + sign (add grid or block) and select "Add block"
Click on the block: All categories (Category trees)
Step 4:
Click the gear icon (Block options) of the block added in the previous step then click on the Wrapper dropdown and select: Sticky mobile Categories

Click the blue "Save" button.
Step 5:
On the new grid click the + sign (add grid or block) and select "Add block"
Click on the block: Logo (block with a particular template)
Step 6:
Click the gear icon (Block options) of the block added in the previous step then click on the Wrapper dropdown and select: Sticky mobile Logo

Click the blue "Save" button.
Step 7:
On the new grid click the + sign (add grid or block) and select "Add block"
Click on the block: Cart content (Current cart content)
Step 8:
Click the gear icon (Block options) of the block added in the previous step then click on the Wrapper dropdown and select: Sticky mobile Cart

Click the blue "Save" button.
Step 9:
On the new grid click the + sign (add grid or block) and select "Add block"
Click on the block: My Account (Customer profile access)
Step 10:
Click the gear icon (Block options) of the block added in the previous step then click on the Wrapper dropdown and select: Sticky mobile My Account

Click the blue "Save" button.
Step 11:
On the new grid click the + sign (add grid or block) and select "Add block"
Click on the block: Search (Block with a particular template)
Step 12:
Click the gear icon (Block options) of the block added in the previous step then click on the Wrapper dropdown and select: Sticky mobile Search

Click the blue "Save" button.

MultiVendor only layout update

Please navigate to "Design" - "Layouts" and follow these 4 steps.

Step 1:
Click the gear icon in the top right and select "Import layout".
Step 2:
In the new popup window select the "Update curent layout".
Step 3:
Click on the "Local" button and locate the "update_files" in the "1.documentation folder" from your unzipped archive.

Select the file "layout_update_mv_2.26.xml" and click Open.
Step 4:
Click the blue "Upload" button.

Please follow the all the parts and steps EXACTLY as they are described.

Part 1: Backup your current layout

Please navigate to "Design" - "Layouts" and follow these 3 steps.

Step 1:
If you have multiple layouts than click on the name of your current default layout.
Step 2:
Click on the gear icon in the top right and select "Export layout".
Step 3:
In the new window modify the "File name" field to: layout_backup.xml
Click the blue "Export" button and save it in a secure location on your computer.

Now you have a backup of you current layout that you will need to restore in order to maintain your block custom content/settings.

Part 2: Install the additional two Skin layouts

This is the part where some of your block contents/settings will be TEMPORARILY replaced with the default ones so be sure that you have the layout backup.

Please navigate to "Design" - "Layouts" and follow these 3 steps.

Step 1:
Click the gear icon in the top right and select "Import layout".
Step 2:
In the new popup window select the "Create new layout".
Step 3:
Click on the "Local" button and locate the "update_files/default_skin_layouts" in the "1.documentation folder" from your unzipped archive.

If you have Skin 1 currently installed than you will need to import the layouts for Skin 2 by selecting "skin2.xml" and click the blue "Upload" button then repeat the above steps for Skin 3 by selecting "skin3.xml".

If you have Skin 2 currently installed than you will need to import the layouts for Skin 1 by selecting "skin1.xml" and click the blue "Upload" button then repeat the above steps for Skin 3 by selecting "skin3.xml".

If you have Skin 3 currently installed than you will need to import the layouts for Skin 1 by selecting "skin1.xml" and click the blue "Upload" button then repeat the above steps for Skin 2 by selecting "skin2.xml".

Part 3: Reimporting the backup layout

This part will restore the layout backup from the file created in part 1 which contains all your block custom content/settings that have been affected in part 2.

Please navigate to "Design" - "Layouts" and follow these 4 steps.

Step 1:
Make sure you are on the correct layout of your store by clicking on its name in the "SWITCH LAYOUT" section.
Step 2:
Click the gear icon in the top right and select "Import layout".
Step 2:
In the new popup window select the "Update current layout".
Step 3:
Click on the "Local" button and locate the file "layout_backup.xml" you have created in part 1
Step 4
Click the blue "Upload"

Please log into your administrator area and navigate to "Add-ons" - "Manage Add-ons" and follow these 2 steps.

Step 1:
Scroll to the "EnergoThemes - License" addon, click the link on the right side and select "Disabled".
Step 2:
After the addon is disabled, click the link again and select "Active".

Log into your administrator area and clear your cache by adapting the following link:

yoursite.com/youradmin.php?cc&ctpl

You now have all 3 VIVAshop Skins. In order to switch from one skin to another please follow these steps:

In this example we assume we haveSkin 1 enabled and we will switch to Skin 3 functionality and layout

Step 1:
Log into your administrator area and navigate to "Add-ons" - "Manage Add-ons".
(link)
Step 2:

Scroll to the EnergoThemes - VIVAshop Addon addon, click the gear icon and click Settings.
Step 3:
Click on the "Select skin functionality" dropdown and select Skin 3.
Step 4:
Click the Save button in the lower right.
Step 5:
Navigate to "Design" - "Layouts".(link)
Step 6:
In the "SWITCH LAYOUT" section on the right side, hover over the VIVAshop 3 layout and click the gear icon then select "Make default"

Use the same steps to switch back to Skin 1 or switch to Skin 2.

NOTE 1: In order for an VIVAshop skin to work correctly both the functionality setting and the default layout need to be the same.

NOTE 2: When you select a new skin functionality the server cache is automatically cleared so the shop will load slower until all the new cache files are generated.

VIVAshop - Responsive CS-Cart Theme update guide from v2.16 to v2.26 for CS-Cart 4.9.3

Create a backup

Updating the addons

Updating the language variables

Updating the theme files

Updating the layout

Reactivating the theme

Clearing your server cache

How to switch skins

THANK YOU AND ENJOY YOUR NEW THEME!