Knowledgebase

How to Configure Add your own CSS HTML Code App with your KartRocket Store

This is an app which provides the store admin/user a user-interface through which the user can customize his/her online store’s front-end in respect of design and layout. Term customize refers to making changes with current theme’s color scheme and layout. Using this a user can design his store according to his/her need. To make use of this app a user must have sound knowledge of HTML, JavaScript/ JQuery. By making use of these language user can make changes with the
template of his online store.
The only thing is needed to make sure that we can’t put any server side scripting in this app, this app supports only the client side scripting like JavaScript or JQuery

How it works?

This app provides a user-interface which have sections to put and save the code,
the code might be any HTML, JavaScript or the JQuery code. This code get Renders on the template layout (page) at the position(s) you select from it’s
user-interface.
By making use of this app a new design implementation can be done or existing Styling can be overridden.

STEPS TO INTEGRATE WITH YOUR 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. Find an app with the name “Add Your Own CSS HTML Code” or you can search the app from search

 

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

 

11. Click on the plus button to make a new module where we could put the code

12. You will see the below page

 

13. Here we can add modules to put the code. Each of the modules have multiple fields like:
a) Module Name: Name of the the module, this is only for the reference purpose and contain the information details like, why this module is Created /Date/Author/etc
Note: A module is a piece of code which is written to perform a specific task.
b) Layout: Layout is known as the page of the template selected for you store. We can select any of the layouts available where we want to put the module on
c) Position: Position is known as the placement of the module on the selected layout
d) Status: To make the module as disabled of enabled
e) Sort Order: Specifies the sorting order of multiple modules of same or different type on the same layout at same position. Here we have to put the sort order as number
f) Show border: To set the border for the module
g) Module Title: An input field just above the show border field, used to put the title for the module which use to be displayed on store front
h) Image Upload: Upload image/icon for the module. This also use to get Displayed in store front
i) Custom Code: Here we put our any of the HTML/JavaScript or jQuery’s code

 

OUTPUT ON LIVE STORE

 

 

 

 

 

Also Read