{"id":8668,"date":"2023-06-25T17:00:45","date_gmt":"2023-06-25T11:00:45","guid":{"rendered":"https:\/\/betterdocs.co\/?post_type=docs&#038;p=8668"},"modified":"2024-07-25T16:09:57","modified_gmt":"2024-07-25T10:09:57","password":"","slug":"how-to-add-custom-css-in-shopify","status":"publish","type":"docs","link":"https:\/\/betterdocs.co\/it\/docs\/how-to-add-custom-css-in-shopify\/","title":{"rendered":"How To Add Custom CSS In BetterDocs For Shopify"},"content":{"rendered":"<p>Con <strong><a href=\"https:\/\/apps.shopify.com\/betterdocs-knowledgebase\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/apps.shopify.com\/betterdocs-knowledgebase\" rel=\"noreferrer noopener\">BetterDocs For Shopify<\/a><\/strong>, you can easily add custom CSS and easily style your documentation, single docs, archive, and FAQ pages. Follow this step-by-step guide to learn how to do it.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How To Add Custom CSS In BetterDocs For Shopify<\/strong><\/h2>\n\n\n\n<p>BetterDocs For Shopify can help you to style your documentation with custom CSS without any hassle. You can also read this <a href=\"https:\/\/betterdocs.co\/it\/docs\/how-to-design-a-knowledge-base\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>documentation to design your knowledge base<\/strong><\/a> without any coding.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: Navigate To The Settings Tab<\/strong><\/h3>\n\n\n\n<p>First open the BetterDocs app from your Shopify dashboard, Now, click on the \u2018<strong>Customize your layout<\/strong>\u2019 button. Now, navigate to the page where you want to add Custom CSS.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1600\" height=\"902\" src=\"https:\/\/betterdocs.co\/wp-content\/uploads\/2024\/06\/image-6.gif\" alt=\"How To Add Custom CSS\" class=\"wp-image-12094\" title=\"\"><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Add Custom CSS<\/strong><\/h3>\n\n\n\n<p>Now, click on the <strong>code icon<\/strong> ( &lt;\/&gt; ) to open the \u2018<strong>Custom CSS<\/strong>\u2019 option. Add your code and hit the \u2018<strong>Save<\/strong>\u2018 button.\u00a0<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"902\" src=\"https:\/\/betterdocs.co\/wp-content\/uploads\/2024\/06\/image-7.gif\" alt=\"How To Add Custom CSS\" class=\"wp-image-12096\" title=\"\"><\/figure>\n<\/div>\n\n\n<p>This is how you can add custom CSS in BetterDocs For Shopify.&nbsp;<\/p>\n\n\n\n<p>If you face any difficulties, feel free to <a href=\"https:\/\/storeware.io\/support\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/storeware.io\/support\/\" rel=\"noreferrer noopener\"><strong>contact our support team<\/strong><\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>From this documentation, you can learn how to add custom css in BetterDocs for Shopify and design your knowledgeable with added customization. <\/p>","protected":false},"author":24,"featured_media":12096,"template":"","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","_analytify_skip_tracking":false,"footnotes":""},"doc_category":[309],"doc_tag":[715,716],"knowledge_base":[283],"class_list":["post-8668","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-configurations","doc_tag-custom-css","doc_tag-custom-css-in-betterdocs-for-shopify","knowledge_base-shopify"],"year_month":"2026-05","word_count":158,"total_views":"4441","reactions":{"happy":"8","normal":"1","sad":"1"},"author_info":{"name":"Ahmed Kawser","author_nicename":"ahmed","author_url":"https:\/\/betterdocs.co\/it\/author\/ahmed\/"},"doc_category_info":[{"term_name":"Configurations","term_url":"https:\/\/betterdocs.co\/it\/docs\/shopify\/configurations\/"}],"doc_tag_info":[{"term_name":"Custom CSS","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/custom-css\/"},{"term_name":"Custom CSS In BetterDocs for Shopify","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/custom-css-in-betterdocs-for-shopify\/"}],"knowledge_base_info":[{"term_name":"Shopify","term_url":"https:\/\/betterdocs.co\/it\/docs\/shopify\/","term_slug":"shopify"}],"knowledge_base_slug":["shopify"],"_links":{"self":[{"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/docs\/8668","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/users\/24"}],"version-history":[{"count":7,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/docs\/8668\/revisions"}],"predecessor-version":[{"id":12756,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/docs\/8668\/revisions\/12756"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/media\/12096"}],"wp:attachment":[{"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/media?parent=8668"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/doc_category?post=8668"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/doc_tag?post=8668"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/knowledge_base?post=8668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}