Web Stories for Opencart

Web Stories for Opencart: This extension allows the admin to create web stories for the products that make engaging content easy. These stories make your web store more attractive and eye-catching. The admin can set the description and header for the web stories after enabling the extension.

During the creation of a new story, the admin can add the publisher name, publisher logo, and cover image. In every web story, the admin can add any number of web story pages by adding the page title, description, image, and sort order.

This extension even allows the customers to share the stories over social media and emails.

• Add any number of web stores for different products.
• Can share the web stories over social media.
• The admin can add multiple web story pages for making the web story of any product more attractive and eye-catching.
• The admin can set the content over the Web story page to make it more attractive and engaging.
• Can add the publisher name, logo, and cover image on every web store.

First, extract the downloaded zip file. After that, open the correct Opencart Version Folder. According to Opencart Version installed in your system.

Then, upload the admin, catalog, to the OpenCart root directory.

Once you have uploaded the file then login to admin and go to Extensions>Installer and upload the .zip file- webstories.ocmod.zip. The zip file can be found in the ocmod folder. If you need a lower version then you have to download .XML file.

Now navigate to Extensions > Extensions > Modules. Find the Web Stories Module from the list. Click the Install button as visible in the screenshot below.

Further, by clicking on the edit button, the below page will open up.

Module Configuration

After the successful installation of the extension Web Stories Module. To configure the extension. Firstly, in the sidebar menu go to Extensions > Extensions > Modules > Web Stories Module.

However, the admin can set the description and header for the web stories after enabling the extension. On clicking on the edit button, the below page will open.

Select Store- A admin can select the store.

Select Status- An admin can select status as Enable or Disable.

Header Level- The admin can enter a title for web stories.

Description- Admin can write a description regarding the web stories they added.

Edit Layout

However, the admin can set the layout and display it on the frontend as set in the layout.

Webstory Creation

For this admin needs to navigate the webstory menu.

Furthermore, during the creation of a new story, the admin can add the publisher name, publisher logo, and cover image. Here, the admin can add, edit web stories as per the below image:-

Title- Admin can the entered title of the product.

Select Title transition- Here you can select the transition of the title as per the below image.

Title Color- From here you can choose colour.

Publisher Name- Here you can enter the publisher name.

Select Name Transition- Select name transition as per the below image.

Description- The description of the product for the web story.

Publisher Logo- Here you can add the logo for the web story.

Cover Page- Add the cover page.

Select Image Transition- Image transition select as per the below image.

Select Status- Admin can select status as enable or disable.

Web Story Preview

Admin can check preview via desktop or mobile have to click on web story preview icon as per the below image: 

Mobile Preview

Web Story Page

Web Stories are a web-based variant of the traditional “Stories” format that combines images, animation, and text to create an interactive viewing experience. By tapping through the content or swiping from one piece of content to the next, you can explore it at your own speed.

Moreover from here, the admin can add a web story page. 

And, the admin can edit or add the web story page. In every web story, the admin can add any number of web story pages by adding the page title, description, image, and sort order. 

Page Title- You can write the page title.

Select Title Transition- Select title transition so that it shows accordingly.

Title Color- From here, you choose the title colour.

Description- Enter the details of the product.

Image- Add an image for the web story.

Select Image Transition- Select image transition so that it shows accordingly.

Select Status- Select status as enable or disable.

Sort Order- Enter Order for sequence.

Web Story Preview

Here, you can view the web story preview.

Customer End 

Customer can view by click on Web Story as per the below image:

Moreover, this extension allows the admin to create web stories for the products that make engaging content easy. These stories make your webstore more attractive and eye-catching. Customer can view story details as per the below image:

Also, customers can check the Webstories on the category page as set in layout by admin.

View Story Details – Desktop

However, this extension even allows the customers to share the stories over social media and emails.