Knowledgebase

How to Configure VQ Code App with KartRocket Store

With VQ Code we can make changes with the theme’s color scheme and layout. It provides a a user-interface in which we can put the code which is any of the HTML/Javascript or jQuery’s code. Only the client side scripting is allowed, we can’t make use of the server side scripting in this app.
This app is ‘Position Specific’ which means if we put a code to manipulate any of the website element, so it will affect that element throughout all the layouts of the web-store front-end.

How it works?
This app provides a user-interface which have an editor to put and save the code, the code might be any HTML, JavaScript or the JQuery code. This code get renders on the template at selected position you select from its user-interface throughout all the layouts on your web-store. By making use of this app a new design implementation can be done or existing styling can be overridden

STEPS TO INTEGARTE WITH YOUR KARTROCKET STORE
1. Open your store on Kartrocket panel , log in with the username and password details and your dashboard would open. See Below for reference.

2. Click on Apps on the extreme left hand side

 

3. Go for the apps category tabs like Sales, Tools, Marketing, etc. on the page

 

4. Click on ‘Tools’ tab

5. You will see a list of apps under this category . The page shall be as below

 

6. Scroll down to reach ‘ VQ code’ app or go to the search bar on the right top position and search for ‘VQCode’

7. Click on the green ‘install’ button to install the application

 

8. The page will refresh and the ‘install Button would change to a ‘settings’ button


 

9. Click on the ‘Setting’ button

 

10. On clicking, you will be taken to a settings page. Below is the layout of this page. Here we have some fields like Position, Content Editor mode button, Content Page Editor

 

11. Field details are as follows:
a) Position: Here you can find pre-defined positions for the code you will put here which will remain as same throughout the template.
b) Content Editor switch: The switch which converts the content editor from normal to rich text editor or rich text editor to normal text editor.
c) Content editor: Afield to put / write the code.
d) Save Button: To save and apply the code.
e) 13. To put the code select any of the positions form position dropdown menu, after selection the content editor the will get update with existing code of that position, if exists.
Put /append the code and click on save button to apply the code.

12. Here, we are going to make a box along with a heading Hello World and some text .
Please find the attached screen shots for the inference. The position is selected and the code is placed

 

OUTPUT ON LIVE STORE

A box is placed in the header on top of the page

 

 

 

Also Read