{"id":379722,"date":"2023-05-23T07:41:08","date_gmt":"2023-05-23T07:41:08","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=379722"},"modified":"2023-07-04T03:48:39","modified_gmt":"2023-07-04T03:48:39","slug":"how-does-layout-works-in-cs-cart","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/","title":{"rendered":"How does Layout works in CS-Cart"},"content":{"rendered":"\n<p>In this article, we&#8217;ll explore how does layout works in CS-Cart and how to use its various tools to create a stunning eCommerce website.<\/p>\n\n\n\n<p>When it comes to building an online store, layout is a crucial aspect of creating a visually appealing and user-friendly website. CS-Cart is a popular eCommerce platform that offers a range of tools and features to help merchants create custom layouts that suit their needs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Themes and Templates<\/strong><\/h2>\n\n\n\n<p>The first step in creating a layout in CS-Cart is to select a theme or template. CS-Cart offers a wide range of pre-built themes and templates that merchants can choose from. Alternatively, you can create a <a href=\"https:\/\/webkul.com\/blog\/how-to-create-cs-cart-custom-theme\/\" target=\"_blank\" rel=\"noreferrer noopener\">custom theme<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"590\" data-id=\"379741\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-04-113628-1200x590.png\" alt=\"Screenshot-2023-05-04-113628\" class=\"wp-image-379741\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-04-113628-1200x590.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-04-113628-300x147.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-04-113628-250x123.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-04-113628-768x377.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-04-113628.png 1294w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\"><mark style=\"background-color:#000000\" class=\"has-inline-color has-white-color\">Pick a theme<\/mark><\/figcaption><\/figure>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Layout Editor<\/strong><\/h2>\n\n\n\n<p>Once you&#8217;ve chosen a theme or template, you can use the layout editor to customize the layout of your website. The editor is a visual tool that enables you to drag and drop elements like product lists, banners, and blocks of text onto a page and arrange them in a specific order. You can also change the size and position of elements, adjust the spacing between them, and add custom CSS styles.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"591\" data-id=\"379753\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-04-114836-1200x591.png\" alt=\"Screenshot-2023-05-04-114836\" class=\"wp-image-379753\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-04-114836-1200x591.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-04-114836-300x148.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-04-114836-250x123.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-04-114836-768x378.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-04-114836.png 1292w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\"><mark style=\"background-color:#000000\" class=\"has-inline-color has-white-color\">Edit Layout<\/mark><\/figcaption><\/figure>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Blocks and Grids For Layout in CS-Cart<\/h2>\n\n\n\n<p>CS-Cart utilizes a system of blocks and grids to create complex layouts. Users can add pre-built sections of content, such as product lists or newsletter subscription forms, to pages or templates. This system empowers users to actively design and customize their layouts with ease.<\/p>\n\n\n\n<p>Grids organize the layout into a set of rows and columns, which can then be populated with blocks. This active approach facilitates the creation of responsive layouts that dynamically adjust to various screen sizes and devices. To create custom blocks for CS-Cart Layouts, follow the active steps outlined below:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">File Structure to create a Block for Layout in CS-Cart <\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\">  app \n    |_addons\n        |_addon_name\n            |_addon.xml\n            |_func.php\n            |_init.php      \n            |_schemas\n                 |_block_manager\n                     |_blocks.post.php\n            \n            \ndesign\n    |_themes\n        |_responsive\n            |_templates\n                |_addons\n                    |_addon_name\n                         |_follow the path described in blocks.post.php <\/pre>\n\n\n\n<p>Before all of this, first we must know how to create a&nbsp;<a href=\"https:\/\/docs.cs-cart.com\/4.0.x\/addons\/tutorials\/hello_world.html#:~:text=Go%20to%20the%20app%2Faddons,be%20operational%20is%20the%20addon.\" target=\"_blank\" rel=\"noreferrer noopener\">New addon<\/a>&nbsp;in CS-Cart.<\/p>\n\n\n\n<p>Then create a new file <strong>block.post.php<\/strong> in schemas\/block_manager\/{&#8216;filename&#8217;} where we will define the structure and content of your block. For example : &#8211;<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">use Tygh\\Registry;\n\nrequire_once Registry::get(&#039;config.dir.addons&#039;) . &#039;addon_name\/schemas\/block_manager\/blocks.functions.php&#039;;\n\n\/**\n * @var array&lt;string, array&gt; $schema\n *\/\n\n$schema&#091;&#039;name&#039;] = &#091;\n    &#039;content&#039; =&gt; &#091;\n        &#039;phone_number&#039; =&gt; &#091;\n            &#039;type&#039; =&gt; &#039;function&#039;,\n            &#039;function&#039; =&gt; &#091;&#039;fn_my_custom_block&#039;],\n        ]\n    ],\n    &#039;templates&#039; =&gt; &#039;{addons}\/{addon_name}\/templates\/blocks\/my_custom_block.tpl&#039;,\n    &#039;wrappers&#039; =&gt; &#039;blocks\/wrappers&#039;,\n    &#039;cache&#039; =&gt; &#091;\n        &#039;request_handlers&#039; =&gt; &#091;&#039;%COMPANY_ID%&#039;]\n    ],\n];\n\nreturn $schema;<\/pre>\n\n\n\n<p>Now, we will create a function in <strong>func.php<\/strong> to generate content data for block. <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\"> &lt;?php\n    function fn_my_custom_block($params, $content) {\n        return &#039;&lt;div class=&quot;my-custom-block&quot;&gt;&#039; . $content . &#039;&lt;\/div&gt;&#039;;\n    }<\/pre>\n\n\n\n<p>All that is left to do is create a tpl file in the same directory as mentioned in block.post.php. If more customization of the block is needed, it can be done in the tpl file. <\/p>\n\n\n\n<p>That is all there to how does layout works in CS-Cart. If you need custom&nbsp;<a href=\"https:\/\/webkul.com\/cs-cart-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">CS-Cart Development services<\/a>&nbsp;then feel free to&nbsp;<a href=\"https:\/\/webkul.com\/contacts\" target=\"_blank\" rel=\"noreferrer noopener\">reach us<\/a>&nbsp;and also explore our exclusive range of&nbsp;<a href=\"https:\/\/store.webkul.com\/CS-Cart.html\" target=\"_blank\" rel=\"noreferrer noopener\">CS-Cart Addons<\/a>.<\/p>\n\n\n\n<p>!!Have a Great Day Ahead!!<\/p>\n\n\n\n<p> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, we&#8217;ll explore how does layout works in CS-Cart and how to use its various tools to create a stunning eCommerce website. When it comes to building an online store, layout is a crucial aspect of creating a visually appealing and user-friendly website. CS-Cart is a popular eCommerce platform that offers a range <a href=\"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":480,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1496,5981],"tags":[6783,14033,7062,14287,256],"class_list":["post-379722","post","type-post","status-publish","format-standard","hentry","category-cs-cart","category-themes-cs-cart","tag-block","tag-cs-cart-layout","tag-cs-cart-responsive-theme-timer","tag-cscart","tag-layout"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How does Layout works in CS-Cart - Webkul Blog<\/title>\n<meta name=\"description\" content=\"Discover how layout works in CS-Cart, that allows merchants to use various tools like themes, templates, layout editor, blocks, and grids can help merchants create visually appealing and functional layouts optimized for different devices and screen sizes.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How does Layout works in CS-Cart - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Discover how layout works in CS-Cart, that allows merchants to use various tools like themes, templates, layout editor, blocks, and grids can help merchants create visually appealing and functional layouts optimized for different devices and screen sizes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-23T07:41:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-04T03:48:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-04-113628-1200x590.png\" \/>\n<meta name=\"author\" content=\"Prashant Bisht\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Prashant Bisht\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/\"},\"author\":{\"name\":\"Prashant Bisht\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/97d715f8b3484277df4f66e20d11a5ed\"},\"headline\":\"How does Layout works in CS-Cart\",\"datePublished\":\"2023-05-23T07:41:08+00:00\",\"dateModified\":\"2023-07-04T03:48:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/\"},\"wordCount\":445,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-04-113628-1200x590.png\",\"keywords\":[\"block\",\"CS-Cart layout\",\"CS-Cart Responsive Theme- Timer\",\"cscart\",\"layout\"],\"articleSection\":[\"Cs Cart\",\"Themes\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/\",\"name\":\"How does Layout works in CS-Cart - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-04-113628-1200x590.png\",\"datePublished\":\"2023-05-23T07:41:08+00:00\",\"dateModified\":\"2023-07-04T03:48:39+00:00\",\"description\":\"Discover how layout works in CS-Cart, that allows merchants to use various tools like themes, templates, layout editor, blocks, and grids can help merchants create visually appealing and functional layouts optimized for different devices and screen sizes.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-04-113628.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-04-113628.png\",\"width\":1294,\"height\":636,\"caption\":\"Screenshot-2023-05-04-113628\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How does Layout works in CS-Cart\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/97d715f8b3484277df4f66e20d11a5ed\",\"name\":\"Prashant Bisht\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/461cd2edae22243f943bf09cb376ba109a0cdaf72da0374135fa6cf2566976ed?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/461cd2edae22243f943bf09cb376ba109a0cdaf72da0374135fa6cf2566976ed?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Prashant Bisht\"},\"description\":\"CS-Cart developer with expertise in SAAS and jQuery. He specializes in CS-Cart Payment and Shipping Integration Services, App Development, and React development. Prashant delivers innovative and efficient solutions that enhance e-commerce functionality and drive business growth.\",\"url\":\"https:\/\/webkul.com\/blog\/author\/prashantbisht-cscart490\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How does Layout works in CS-Cart - Webkul Blog","description":"Discover how layout works in CS-Cart, that allows merchants to use various tools like themes, templates, layout editor, blocks, and grids can help merchants create visually appealing and functional layouts optimized for different devices and screen sizes.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/","og_locale":"en_US","og_type":"article","og_title":"How does Layout works in CS-Cart - Webkul Blog","og_description":"Discover how layout works in CS-Cart, that allows merchants to use various tools like themes, templates, layout editor, blocks, and grids can help merchants create visually appealing and functional layouts optimized for different devices and screen sizes.","og_url":"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-05-23T07:41:08+00:00","article_modified_time":"2023-07-04T03:48:39+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-04-113628-1200x590.png","type":"","width":"","height":""}],"author":"Prashant Bisht","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Prashant Bisht","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/"},"author":{"name":"Prashant Bisht","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/97d715f8b3484277df4f66e20d11a5ed"},"headline":"How does Layout works in CS-Cart","datePublished":"2023-05-23T07:41:08+00:00","dateModified":"2023-07-04T03:48:39+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/"},"wordCount":445,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-04-113628-1200x590.png","keywords":["block","CS-Cart layout","CS-Cart Responsive Theme- Timer","cscart","layout"],"articleSection":["Cs Cart","Themes"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/","url":"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/","name":"How does Layout works in CS-Cart - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-04-113628-1200x590.png","datePublished":"2023-05-23T07:41:08+00:00","dateModified":"2023-07-04T03:48:39+00:00","description":"Discover how layout works in CS-Cart, that allows merchants to use various tools like themes, templates, layout editor, blocks, and grids can help merchants create visually appealing and functional layouts optimized for different devices and screen sizes.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-04-113628.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-04-113628.png","width":1294,"height":636,"caption":"Screenshot-2023-05-04-113628"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-does-layout-works-in-cs-cart\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How does Layout works in CS-Cart"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/97d715f8b3484277df4f66e20d11a5ed","name":"Prashant Bisht","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/461cd2edae22243f943bf09cb376ba109a0cdaf72da0374135fa6cf2566976ed?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/461cd2edae22243f943bf09cb376ba109a0cdaf72da0374135fa6cf2566976ed?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Prashant Bisht"},"description":"CS-Cart developer with expertise in SAAS and jQuery. He specializes in CS-Cart Payment and Shipping Integration Services, App Development, and React development. Prashant delivers innovative and efficient solutions that enhance e-commerce functionality and drive business growth.","url":"https:\/\/webkul.com\/blog\/author\/prashantbisht-cscart490\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/379722","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/480"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=379722"}],"version-history":[{"count":25,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/379722\/revisions"}],"predecessor-version":[{"id":387142,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/379722\/revisions\/387142"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=379722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=379722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=379722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}