Design Layout

The attached screenshot shows the Kartify backend for the Layout section inside Design.

There are multiple layouts in the list. But, we will only be focusing on the following layouts from the available list:

(i) Home_StoreName - This layout will be created at the time of creating a new store.
(ii) Home
(iii) Category
(iv) Category_Searchplug
(v) Search-Searchplug
(vi) category-infinitescroller (if required for automatic infinite scroll on CLP)
(vii) category-infinitescroller-button (if required for infinite scroll by clicking on the button)
(viii) category_special (if required)
(ix) checkout (done automatically on enabling quick checkout)
(x) sitemap (done automatically)
(xi) Dynamic page layout - To create the layout for a dynamic page.




These layouts have been explained below:


(1) Home_StoreName

 1) Click on “+” to add a new layout.

2) In Layout name, add the name of the layout in the format: Home_BrandName

Example: Home_aca


3) Under store dropdown, select the store (example: aca) and in the route text-field, enter common/home.

4) Under the Choose the position of the modules, we need to add layouts under the Content Top section.

The following layouts have to be added:

(a) Homepage - Slideshow
(b) Homepage - Featured
(c) Homepage - Carousel
(d) Account - Account

 Below attached is the screenshot to illustrate the same:

(2) Home

After creating the Home_BrandName layout, it needs to be removed from the Home layout.


1) In layouts, search for Home layout.

 2) Click on the remove icon to remove this layout, and then save the changes.

(3) Category

 1) In layouts, search for category and click on the edit icon.

 2) Add the layout using “+” icon and then save

(4) Category_Searchplug


 1) In layouts, search for category_searchplug and click on the edit icon

 2) Add the layout using the “+” icon, and then save

(5) Search-Searchplug

 1) In layouts, search for search-searchplug and click on the edit icon

 2) Add the layout using the “+” icon, and then save

For the below mentioned layouts:

(vi) category-infinitescroller (if required)
(vii) category-infinitescroller-button (if required)
(viii) category_special (if required)
(ix) checkout (done automatically on enabling quick checkout)
(x) sitemap (done automatically)

Similar steps have to be followed as explained for the above layouts. Search the layout name in the list by using the “Ctrl + F” shortcut. Then, add the store in that layout’s list, save and clear the cache.



(11) Creating a dynamic page

A dynamic page layout is one, which contains images, text as well as product carousels. It is different from a normal static/information page in the sense that it contains product carousels.

Step 1: Design > Layout

Go to the left hand side navigation bar and look for the Design tab. Under Design, click on Layout. Click on the “+” icon to add a new layout.

(i) Layout Name: Name the layout (trending_style in this case).
(ii) Store: Select the store for which the layout has to be added.
(iii) Route: The route has to be kept according to the route name in the code.
information/information/trendingStyle in this case.
(iv) Click on the save icon in the top right corner to save the details.

Step 2: Extensions > Extensions > Modules > Filter Product


 (i) Inside Extensions, look for Extensions and then click on the Modules tab.

 (ii) Now, search for Filter Product and click on the edit icon.

(iii) Under Filter Product, follow the steps mentioned below:

(a) Click on Add Module to add a new module.
(b) Under “Module Setting”, select the layout from the drop down. The name of the layout should be the one that we created.
(c) List max items - max columns - limit items in carousel as 5-1-15.
(d) Select position as content bottom from the drop down.
(e) Sort order should be 2.

(f) Under the Module Tab, click on Add Item to add the new item. Name the item as per requirement (TOP STYLES in this case) and select the products which need to be displayed on the page. Click on save to save the details.

Step 3: System > Tools > SEO URL

 (a) The query name should be same as the route (information/information/trendingStyle in this case)

(b) The keyword should be the url for that page. (trending_style in this case)

(c) Click on save in the top right corner to save the changes.

Step 4: Extensions > Extensions > Modules > Advanced Grid

Under Advanced Grid, update the seo url of the page that is to be created. /trending_style in this case. Save the changes using the save button.