{"id":53935,"date":"2016-07-08T15:09:29","date_gmt":"2016-07-08T15:09:29","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=53935"},"modified":"2016-07-08T15:29:28","modified_gmt":"2016-07-08T15:29:28","slug":"write-different-css-store-wise-magento2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/","title":{"rendered":"How to write different css store wise in Magento2"},"content":{"rendered":"

Here we will learn how to create different css file according to store<\/a>. So we can style our module according to store.<\/strong><\/p>\n

To style your Custom Module according to store you need to create css for each store.<\/p>\n

Let’s say our Custom Module is Webkul_DemoModule.<\/p>\n

Now create css files for different stores (I have created two stores en_US & fr_FR).<\/p>\n

1. app\/code\/Webkul\/DemoModule\/view\/frontend\/web\/i18n\/en_US\/css\/style.css<\/strong><\/p>\n

2. app\/code\/Webkul\/DemoModule\/view\/frontend\/web\/i18n\/fr_FR\/css\/style.css<\/strong><\/p>\n

Now run the deploy command for both the store.<\/p>\n

php bin\/magento setup:static-content:deploy en_US<\/strong>
\nphp bin\/magento setup:static-content:deploy fr_FR<\/strong><\/p>\n

Now Change the store view you will see the different style which you have applied.<\/p>\n

Here is the result.
\nStore en_US<\/strong><\/p>\n

\"write<\/p>\n

Store fr_FR<\/strong><\/p>\n

 <\/p>\n

\"write<\/p>\n

That’s it.<\/p>\n","protected":false},"excerpt":{"rendered":"

Here we will learn how to create different css file according to store. So we can style our module according to store. To style your Custom Module according to store you need to create css for each store. Let’s say our Custom Module is Webkul_DemoModule. Now create css files for different stores (I have created […]<\/a><\/p>\n","protected":false},"author":69,"featured_media":52441,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[302],"tags":[3319,3320],"class_list":["post-53935","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento2","tag-different-css-for-each-locale-magento2","tag-write-css-store-wise-in-magento2"],"yoast_head":"\nHow to write different css store wise in Magento2<\/title>\n<meta name=\"description\" content=\"Here we learn that how to to write different css store wise in Magento2 according to store. So we can style our module according to store.\" \/>\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\/write-different-css-store-wise-magento2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to write different css store wise in Magento2\" \/>\n<meta property=\"og:description\" content=\"Here we learn that how to to write different css store wise in Magento2 according to store. So we can style our module according to store.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/\" \/>\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=\"2016-07-08T15:09:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-07-08T15:29:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Magneto-Code-Snippet-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Mahesh Singh\" \/>\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=\"Mahesh Singh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/\"},\"author\":{\"name\":\"Mahesh Singh\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/53d3b977a0ab5adcf32aef9f97e595bd\"},\"headline\":\"How to write different css store wise in Magento2\",\"datePublished\":\"2016-07-08T15:09:29+00:00\",\"dateModified\":\"2016-07-08T15:29:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/\"},\"wordCount\":153,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Magneto-Code-Snippet-1.png\",\"keywords\":[\"different css for each locale magento2\",\"write css store-wise in magento2\"],\"articleSection\":[\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/\",\"url\":\"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/\",\"name\":\"How to write different css store wise in Magento2\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Magneto-Code-Snippet-1.png\",\"datePublished\":\"2016-07-08T15:09:29+00:00\",\"dateModified\":\"2016-07-08T15:29:28+00:00\",\"description\":\"Here we learn that how to to write different css store wise in Magento2 according to store. So we can style our module according to store.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Magneto-Code-Snippet-1.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Magneto-Code-Snippet-1.png\",\"width\":825,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to write different css store wise in Magento2\"}]},{\"@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\/53d3b977a0ab5adcf32aef9f97e595bd\",\"name\":\"Mahesh Singh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f4c013ebf7008223382b8a49203e6d354677e8baff0eca373e6e4266efa762da?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\/f4c013ebf7008223382b8a49203e6d354677e8baff0eca373e6e4266efa762da?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Mahesh Singh\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/mahesh721\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to write different css store wise in Magento2","description":"Here we learn that how to to write different css store wise in Magento2 according to store. So we can style our module according to store.","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\/write-different-css-store-wise-magento2\/","og_locale":"en_US","og_type":"article","og_title":"How to write different css store wise in Magento2","og_description":"Here we learn that how to to write different css store wise in Magento2 according to store. So we can style our module according to store.","og_url":"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2016-07-08T15:09:29+00:00","article_modified_time":"2016-07-08T15:29:28+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Magneto-Code-Snippet-1.png","type":"image\/png"}],"author":"Mahesh Singh","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Mahesh Singh","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/"},"author":{"name":"Mahesh Singh","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/53d3b977a0ab5adcf32aef9f97e595bd"},"headline":"How to write different css store wise in Magento2","datePublished":"2016-07-08T15:09:29+00:00","dateModified":"2016-07-08T15:29:28+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/"},"wordCount":153,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Magneto-Code-Snippet-1.png","keywords":["different css for each locale magento2","write css store-wise in magento2"],"articleSection":["Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/","url":"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/","name":"How to write different css store wise in Magento2","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Magneto-Code-Snippet-1.png","datePublished":"2016-07-08T15:09:29+00:00","dateModified":"2016-07-08T15:29:28+00:00","description":"Here we learn that how to to write different css store wise in Magento2 according to store. So we can style our module according to store.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Magneto-Code-Snippet-1.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Magneto-Code-Snippet-1.png","width":825,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/write-different-css-store-wise-magento2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to write different css store wise in Magento2"}]},{"@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\/53d3b977a0ab5adcf32aef9f97e595bd","name":"Mahesh Singh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f4c013ebf7008223382b8a49203e6d354677e8baff0eca373e6e4266efa762da?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\/f4c013ebf7008223382b8a49203e6d354677e8baff0eca373e6e4266efa762da?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Mahesh Singh"},"url":"https:\/\/webkul.com\/blog\/author\/mahesh721\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/53935","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\/69"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=53935"}],"version-history":[{"count":4,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/53935\/revisions"}],"predecessor-version":[{"id":53970,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/53935\/revisions\/53970"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/52441"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=53935"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=53935"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=53935"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}