OpenCart — is an Open Source e-commerce application. OpenCart provides easy customization of your online store. OpenCart community includes a number of users starting from the experienced web developers looking for the user-friendly interface, ending with shopkeepers that start their online business for the first time. OpenCart provides a great amount of features that allow you to control your store. Using OpenCart tools you can easily uncover the store potential.

Document Opencart What`s new in Opencart 4

System Requirements for Opencart:

max_execution_time=3000
max_input_vars = 25000
post_max_size=350M
upload_max_filesize=200M
					

max_allowed_packet=16M
					

In this article, we will guide you some instructions and tips in term of configuration on OpenCart Theme.

You read user-guide to install default OpenCart:

1. Go to Admin › Simple Blog › articles . Missing Database Tables for this Extension, Click 'Install simple blog'

2. You must create a new author, new category, new article
3. Go to Admin › Simple Blog › Setting › General Setting. set values properties for for simple blog. Click Save
4. To view simple blogs outside you address type index.php?route=extension/so_theme/simple_blog/article or Admin > Menu Simple blog > General Setting > Simple Blog Seo Keyword Heading (This name will be as seo keyword when simple blog is clicked)

1.How to manage content, products and categories translations

1. Usually, Opencart top menu displays Categories. Navigate to Catalog › Categories, select the category you would like to translate, click the Edit icon and insert translation into corresponding language tab of the category:

   

2. Navigate to Catalog -> Products to start products translation. Select the product you would like to translate, click the Edit icon next to it and insert translations into the General tab of a product:

   

3. In case you would like to translate one of content pages on the site, open the Catalog -> Information tab, select the page required and insert translations into the corresponding language tab of content editor.
4. Navigate to Opencartworks -> So Themes Config to start translation, insert translations into the content:

   Note

   Because there are so many modules, Select the module you would like to translate. Insert translations into the content

   

   

5. Refresh the front-end with the Ctrl/Cmd+F5 hotkeys to check the changes.

3. How to use translate Language in our Module

If the module has language files for English and you want to translate them for Spanish, then at the very first copy all the language files from English language directory and paste all of them in Spanish directory in the same structure as it was in English language.

1. Extract the language archive file which you downloaded into your PC: patch_language_oc4.x
2. We filter out language files of theme and modules:

   - patch_language_oc4.x\extension\so_theme\admin\language\en-gb
   - patch_language_oc4.x\extension\so_theme\catalog\language\en-gb

   To your language: replace "en-gb" with the Locale of your language (English, German, Spanish, Arabic ...).

3. Upload this extension folders you into \extension\oc_arabic_language\extension\ folder
4. Then please go to \extension\oc_arabic_language\extension\so_theme\catalog\language\ar\module\ => you make translates language all files

   

5. Refresh the front-end with the Ctrl/Cmd+F5 hotkeys to check the changes.

1. Minify / gzip the CSS, Javascript and Jquery files, enable browser caching

This is the most important part when optimize OpenCart speed that you need to minify CSS, javascript and other files using gzip/ Enable GZIP Compression, enable browser caching.

Secondly, rename htaccess.txt to .htaccess in your OpenCart directory.

Then, open the .htaccess file and add the following code underneath the ReWrite rules

# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent


## EXPIRES CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType image/gif "access 1 month"
ExpiresByType image/png "access 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 week"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 month"
ExpiresDefault "access 1 month"

## EXPIRES CACHING ##

# gzip #

AddOutputFilterByType DEFLATE text/text text/html text/javascript text/plain text/xml application/xml text/css application/x-javascript application/javascript
# remove browser bugs
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

# gzip end #

2. Minify the CSS, Javascript in SO Themeconfig

Go to admin › OpenCartWorks › So Themes Config › Advanced Tab

Setting value : Show Minify CSS = On, Show Minify JS = On

Video to How to add Featured product

Go to admin › OpenCartWorks › So Themes Config › Button Product Feature

Click on product to create features product. Any product added config features will have labels so feature

Go to OpenCartWorks › So Themes Config › General Tab

1.Select Layout - Choose the layout that you like. Click button Apply Default Setting Choose the Layout

• New Color - Set name color (do not uppercase letters) and fill color. Continue Click button Compile CSS.
• Select Color - Select the color you just created › Click button Save

2.Sticky Menu on Top - When the user scrolls the page, Sticky Menu to the top of the browser window during scrolling

• Status - Option (yes|no)
• Select Block on header - Choose your parts you want to show on the sticky Menu

3.Top Bar

• Telephone No - is the content of Telephone
• Welcome Message - is the content of Welcome Message
• Checkout Link - show the link checkout
• Language/Currency - show the Language/Currency

View Frontend:

4.General

• Preloader - want to show the Preloader
• Preloader Animation - Choose the preloader that you like
• Status Payment - want to show the Payment
• Image (Payment block) - Choose a image path
• Copyright - It is the content to Copyright

View Frontend:

Choose the type of Header that you like, to pair with home page

Hover over image below to see effect.Choose the banner that you like

Go to admin › OpenCartWorks › So Themes Config › Layout Tab › With the boxed layout you can choose additional options such as custom background images, patterns and solid colors

• Layout Style - Select one in option (Default|Layout fluid|Layout boxed)
• Body Background Color - Set background color for Mainbody
• Overlay pattern - Set pattern image for Mainbody
• Background Image: - Set background image for Mainbody
• Background Image display mode - Set background image display mode
• Background Image display Attachment - Set background image display attachment

View Frontend: Layout Style = boxed

Go to admin › OpenCartWorks › So Themes Config › Page Tab › Product Category

1.Layout Category & Product

• Display column position - Select one in option ( Outside content| Inside content)
• Display column type - Add page content inside this div if you want the side nav to push page content to the right
• Sticky Sidebar - Attach sidebar to the page when the user scrolls such that the element is always visible

2.Category Info

• Display subcategory - You want to show the subcategory
• Choose subcategory grid number - Quantity is displayed subcategory
• Display category info - You want to show description category
• Choose Product grid number - Column number display page category

3.Product Item

• Show "Discount" - Options (yes/no)
• Show countdown - Show countdown of Special Offer product
• Show Ratings - Options (yes/no)
• Show Orders - show order number of product
• Show image gallery - Slider image gallery
• Status use placeholder images - Options(yes/no)

4.Group Cart

• Show position cart info - select align (Left|Right|Center|Bottom) position group cart
• Show "QuickView" Button - Options (yes/no)
• Show "Addtocart " Button - Options (yes/no)
• Show "Wishlist " Button - Options (yes/no)
• Show "Compare " Button - Options (yes/no)

View Frontend: The options on the create Menu features

Go to admin › OpenCartWorks › So Themes Config › Page Tab › Product Category › Product page

1.Options Styles

• Option Checkbox and Radio Style - refreshing the default option is more beautiful

2.Product Page

• Product gallery - Select one in option ( Gallery Bottom| Gallery Left| Gallery Grid | Gallery list | Gallery Slider)
• Enable Product Zoom - Options (yes/no)
• Enable Size Chart - add product image size chart
• Tabs block - Select one in option(vertical|horizontal)
• Enable Button Show More - Add button (show more) on product description, click button (show more) show full description
• Show Shipping & Payment - Add new tabs Shipping & Payment

3.Social Share

• Show Custom - Options (yes/no)
• Custom Content - Write content to Custom

4.Social Share

• Show Related - Options (yes/no)
• Related product number per row - Column number display related product

View Frontend: The options on the create Menu features

Go to admin › OpenCartWorks › So Themes Config › Page Tab › Coming Soon

• Coming Soon Background - Set background image for Coming Soon
• Coming Soon Title - is the heading of Coming Soon
• Date - is the dates of coming soon
• Content - is the content of coming soon

View Frontend:

Go to admin › OpenCartWorks › So Themes Config › font Tab

• Font Setting standard - It is the default fonts of the system
• Font Setting Google Fonts - It is the Google fonts, fast, and open through great typography.
• Google URL - Example: http://fonts.googleapis.com/css?family=Roboto:400,500,700 ⇒ View More
• Google Family - Example: Roboto, sans-serif;
• Add css selectors - is the css selectors of setting

Go to admin › OpenCartWorks › So Themes Config › social Tab

• Show sidebar social - It is the default fonts of the system
• Show Facebook - Options (yes/no)
• Facebook ID - is the Account Facebook.
  For example: Facebook ID = MagenTech (https://www.facebook.com/MagenTech)
• Show Twitter - Options (yes/no)
• Twitter username - is the Twitter username
• Show Custom - Options (yes/no)
• Custom block - is the content of custom block

Go to admin › OpenCartWorks › So Themes Config › custom Tab

• CSS Input - It is the css code direct
• CSS File - add file css, Enter file path file css
• JS File - add file js, Enter file path file js

Go to admin › OpenCartWorks › So Themes Config › Advanced Tab

• SCSS Compile - Compile scss source for get css styles using
• User Developer Compile Muti Color - Only user developer
• Show Minify CSS - compress all css to only one file
• Show Minify JS - compress all js to only one file
• Change the image type jpg , png , gif => webp - by add the code below before at the line 62 of this file catalog\model\tool\image.php

  					
  if($extension == 'jpg' || $extension == 'png' || $extension == 'gif' || $extension == 'jpeg') {
  $dir = DIR_IMAGE;		
  $name = $image_new;
  $newName = substr($image_new, 0, strrpos($image_new, '.')) . '.webp';
  				// Create and save					
  if (!is_file(DIR_IMAGE . $newName)) {
  	if ($extension == 'jpeg'  || $extension == 'jpg') 
  		$img = imagecreatefromjpeg($dir.$name);
  	elseif ($extension == 'gif') 
  		$img = imagecreatefromgif($dir.$name);
  	elseif ($extension == 'png') 
  		$img = imagecreatefrompng($dir.$name);
  		imagepalettetotruecolor($img);
  		imagealphablending($img, true);
  		imagesavealpha($img, true);
          imagewebp($img, $dir . $newName, 100);
          imagedestroy($img);							
  } else {
  	if ($extension == 'jpeg' || $extension == 'jpg') 
  		$image_new = $newName;
  	elseif ($extension == 'gif') 
  		$image_new = $newName;
  	elseif ($extension == 'png') 
  		$image_new = $newName;				
  }
  }
  					

Go to admin › OpenCartWorks › So Mobile › General

1.Select Layout - Choose the layout that you like. Click button Apply Default Setting Choose the Layout

• New Color - Set name color (do not uppercase letters) and fill color. Continue Click button Compile CSS.
• Select Color - Select the color you just created › Click button Save

2.Platforms

• Mobile Status On - use layout mobile/ Off - use layout responsive
• Logo Mobile - Choose a image path
• Sticky Top Bar - Attach sidebar to top the page when the user scrolls
• Copyright - It is the content to Copyright

Go to admin › OpenCartWorks › So Mobile › Bottom Bar

• Show Bottom Bar - Options (yes/no)
• Show Menu More - Options (yes/no)

View Frontend:

Go to admin › OpenCartWorks › So Mobile › Left Bar

• Show Search - Options (yes/no)
• Show Main Menu - Options (yes/no)
• Show All Category - Options (yes/no)
• Show Category - Options (yes/no)
• Show Wistlist - Options (yes/no)
• Show Compare - Options (yes/no)

View Frontend:

Go to admin › OpenCartWorks › So Mobile › Page

• More Category Button - Options (yes/no)
• Compare Button - Options (yes/no)
• Wishlist Button - Options (yes/no)
• Addtocart Button - Options (yes/no)

View Frontend:

Go to admin › OpenCartWorks › So Mobile › font Tab

• Font Setting standard - It is the default fonts of the system
• Font Setting Google Fonts - It is the Google fonts, fast, and open through great typography.
• Google URL - Example: http://fonts.googleapis.com/css?family=Roboto:400,500,700 ⇒ View More
• Google Family - Example: Roboto, sans-serif;
• Add css selectors - is the css selectors of setting

Go to admin › OpenCartWorks › So Mobile › Advanced

• SCSS Compile - Compile scss source for get css styles using
• User Developer Compile Muti Color - Only user developer

There are two ways to configure Extensions of this Theme:

Option 1: Go to Admin Control Panel => OpenCartWorks => So Page Builder => Select the Layout you want.

Themes is using extensions:

1. So Page Builder: Click here to read user guide
2. So Mega Menu: Click here to read user guide
3. So Onepage Checkout: Click here to read user guide
4. So Search Pro: Click here to read user guide
5. So Home Slider: Click here to read user guide
6. So Category Slider: Click here to read user guide
7. So Listing Tabs: Click here to read user guide
8. So Extra Slider: Click here to read user guide
9. So Deals: Click here to read user guide
10. So Filter Shop By: Click here to read user guide
11. So Latest Blog: Click here to read user guide
12. So Newsletter Custom Popup: Click here to read user guide
13. So Social Login: Click here to read user guide
14. So Instagram Gallery: Click here to read user guide
15. So Quickview: Click here to read user guide

Option 2: Go to Admin Control Panel › Extensions › Extensions › Choose the extension type: Modules => And choose the module you want.

Go to Admin Control Panel => OpenCartWorks => So Page Builder => Select the Layout you want.

1.Example So Page Builder : Edit Home 1

It will list all modules in the home page 1, You want to edit the module then click edit it

2.Example So Page Builder : Edit Footer 1

It will list all modules in the Footer 1, You want to edit the module then click edit it

3.Example So Page Builder : Edit Mobile Page Builder - Home 1

Frontend Appearance

Go to Admin › Opencartworks › SO Megamenu › So MegaMenu Tab › set values are adjusted for SO Megamenu

1.Config Menu - Shop

Config Menu item - categories:

Config Menu item - banner:

<div class="img-banner-w">
    <div class="img-banner"><a href="#"><img src="image/catalog/menu/megabanner/image-5.jpg" alt="banner"></a></div>
    <div class="img-banner"><a href="#"><img src="image/catalog/menu/megabanner/image-6.jpg" alt="banner"></a></div>
</div>

2.Config Menu - Page

Config Menu item - List pages:

<div class="row">
	<div class="col-sm-6">
		<ul class="row-list">
		   <li><a class="subcategory_item" href="index.php?route=information/information&amp;information_id=4">About Us</a></li>
		   <li><a class="subcategory_item" href="index.php?route=information/information&amp;information_id=6">Services</a></li>
 			<li><a class="subcategory_item" href="index.php?route=information/information&amp;information_id=3">FAQs</a></li>

		   <li><a class="subcategory_item" href="index.php?route=information/contact">Contact us</a></li>
		   <li><a class="subcategory_item" href="index.php?route=information/information&amp;information_id=7">Support 24/7 Page</a></li>  
		</ul>
	</div>
	<div class="col-sm-6">
		<ul class="row-list">
		  <li><a class="subcategory_item" href="index.php?route=information/information&amp;information_id=9">Typography</a></li>
		  <li><a class="subcategory_item" href="index.php?route=information/information&amp;information_id=5">Photo Gallery</a></li>
		  <li><a class="subcategory_item" href="index.php?route=information/sitemap">SiteMap</a></li>
		    <li><a class="subcategory_item" href="index.php?route=information">Page 404</a></li>
		  <li><a class="subcategory_item" href="index.php?route=information/information&amp;information_id=8">Coming Soon </a></li>
	</ul>
	</div>
</div>

Frontend Appearance

If you have any question that is beyond the scope of this help file, please send us via: Submit a Ticket

Our working hours: Monday to Friday 8AM - 5PM GMT+8.

Thank you so much for purchasing this theme!

We Do Support:

• Provide detailed documentation to help you install and configure the theme successfully by yourself.
• Answer your enquiries about theme configuration and use.
• Answer you how to edit and translate the language files.
• Fix bugs of our themes ONLY if the source code are not modified.

We Do Not Support:

• Upgrading the theme on your store if the source code was modified by any reasons.
• Editing the theme's source code for your own requirements which the theme's current version is not supported. Except editing language files.