If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

OpenCart 2.x. How to work with Parallax module

Good news for all on-line store keepers! This new tutorial will show you how to manage Parallax module in your OpenCart store.

OpenCart 2.x. How to work with Parallax module

Parallax is a special scrolling technique in computer graphics wherein background images move by the camera slower than foreground images, creating an illusion of depth and adding to the immersion.

Today we want to show you where exactly in the template this technique is used and how to manage Parallax module.

Parallax may appear in multiple places on your website. For example, let us edit banner in the footer section where Parallax effect is used:

opencart_2.x_how_to_work_with_parallax_module_1

  1. Log into your OpenCart admin panel. Go to Design->Banners under System wheel icon:

    opencart_2.x_how_to_work_with_parallax_module_2

  2. This banner title is Parallax-2. Press Edit icon on the left:

    opencart_2.x_how_to_work_with_parallax_module_3

  3. Under Banner name type the name of your banner.

    You may enable or disable banner by selecting corresponding option from Status drop down.

    Under title field type the title of your banner. In case you have multilanguage option, this title may differ for every language.

    Paste the capture for slides in the Description field. That part may be also different for different languages. We will change Free Shipping text to New text.

    You may also set a link to your banner in the Link field:

    opencart_2.x_how_to_work_with_parallax_module_4

  4. To edit the image, click on it and then click on the Edit icon. In case you want to delete image, click on Trash bin icon:

    opencart_2.x_how_to_work_with_parallax_module_5

  5. Click Upload icon:

    opencart_2.x_how_to_work_with_parallax_module_6

  6. Upload new image from your computer:

    opencart_2.x_how_to_work_with_parallax_module_7

  7. Double click on the new image to replace the old one:

    opencart_2.x_how_to_work_with_parallax_module_8

  8. Now our new image appears in the admin panel. Click Save button to save the changes. Alternatively, you may click Add button in the footer to add a new banner to the group in the same way:

    opencart_2.x_how_to_work_with_parallax_module_9

  9. After all changes were made, refresh front end to see the result. Now our new image and new capture on it appear:

    opencart_2.x_how_to_work_with_parallax_module_10

  10. You may also change dimensions of the banner image. To perform this, go to Extensions->Modules:

    opencart_2.x_how_to_work_with_parallax_module_11

  11. Scroll the page until you see the module you need. In our case it is Parallax->Parallax-2. Click Edit button:

    opencart_2.x_how_to_work_with_parallax_module_12

  12. This is the section where you can change Width and Height of the image in case you need it:

    opencart_2.x_how_to_work_with_parallax_module_13

That’s it! Now you know how to manage Parallax module in your OpenCart store. Please feel free to check the detailed video tutorial below:

Feel free to check the detailed video tutorial below:

OpenCart 2.x. How to work with Parallax module