{"id":5208,"date":"2019-12-08T06:44:03","date_gmt":"2019-12-08T06:44:03","guid":{"rendered":"https:\/\/hasthemes.com\/?p=5208"},"modified":"2024-08-26T14:56:15","modified_gmt":"2024-08-26T08:56:15","slug":"how-to-add-shopify-section-content","status":"publish","type":"post","link":"https:\/\/hasthemes.com\/how-to-add-shopify-section-content\/","title":{"rendered":"How to Add Shopify Section Content"},"content":{"rendered":"\n<p>Adding sections to your Shopify store allows you to customize the layout and design of your pages, enhancing the overall shopping experience for your customers. Here\u2019s a step-by-step guide on how to add and customize section content in Shopify:<\/p>\n\n\n\n<p class=\"has-ast-global-color-4-background-color has-background\" style=\"padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\"><strong>Go to Online Store and Themes<\/strong>: In the admin dashboard, go to <strong>Online Store<\/strong> > <strong>Themes<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"760\" height=\"339\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/06\/click-on-the-online-store.png\" alt=\"Click on the Online Store\" class=\"wp-image-27494\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/06\/click-on-the-online-store.png 760w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/06\/click-on-the-online-store-300x134.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/06\/click-on-the-online-store-360x161.png 360w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><figcaption class=\"wp-element-caption\">Click on the Online Store<\/figcaption><\/figure>\n\n\n\n<p class=\"has-ast-global-color-4-background-color has-background\" style=\"padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\">Locate your current theme and click <strong>Customize<\/strong> to open the theme editor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"760\" height=\"299\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/06\/click-on-the-customization1.png\" alt=\"Click on the Customize button\" class=\"wp-image-27500\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/06\/click-on-the-customization1.png 760w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/06\/click-on-the-customization1-300x118.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/06\/click-on-the-customization1-360x142.png 360w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><figcaption class=\"wp-element-caption\">Click on the Customize button<\/figcaption><\/figure>\n\n\n\n<p class=\"has-ast-global-color-4-background-color has-background\" style=\"padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\"><strong>Access the Theme Editor<\/strong>: In the theme editor, you will see a live preview of your store along with a sidebar menu containing different sections and settings.  The theme editor allows you to add, remove, and rearrange sections on your store\u2019s pages.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"760\" height=\"455\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2019\/12\/access-theme-editor.png\" alt=\"Access Theme Editor\" class=\"wp-image-28448\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2019\/12\/access-theme-editor.png 760w, https:\/\/hasthemes.com\/wp-content\/uploads\/2019\/12\/access-theme-editor-300x180.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2019\/12\/access-theme-editor-360x216.png 360w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/figure>\n\n\n\n<p class=\"has-ast-global-color-4-background-color has-background\" style=\"padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\"><strong>Add a New Section<\/strong>: To add a new section, click the <strong>Add section<\/strong> button in the sidebar menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"424\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2019\/12\/add-new-section.png\" alt=\"Add a new section\" class=\"wp-image-28444\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2019\/12\/add-new-section.png 760w, https:\/\/hasthemes.com\/wp-content\/uploads\/2019\/12\/add-new-section-300x167.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2019\/12\/add-new-section-360x201.png 360w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/figure>\n\n\n\n<p class=\"has-ast-global-color-4-background-color has-background\" style=\"padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\">A list of available section types will appear. These can include options like featured products, image with text, testimonials, and more. Select the type of section you want to add, and it will be added to your page preview.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"453\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2019\/12\/section-lists.png\" alt=\"Select the type of section\" class=\"wp-image-28445\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2019\/12\/section-lists.png 760w, https:\/\/hasthemes.com\/wp-content\/uploads\/2019\/12\/section-lists-300x179.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2019\/12\/section-lists-360x215.png 360w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/figure>\n\n\n\n<p class=\"has-ast-global-color-4-background-color has-background\" style=\"padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\"><strong>Customize Section Content<\/strong>: Once the section is added, you can customize its content and settings. Click on the section in the sidebar menu to open its settings panel. Here, you can edit text, upload images, add buttons, and configure other content-specific options.<\/p>\n\n\n\n<p class=\"has-ast-global-color-4-background-color has-background\" style=\"padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\">For example, in a &#8220;Testimonial&#8221; section, you can adjust the layout, and customize information.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"376\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2019\/12\/customize-section-content.png\" alt=\"Customize the Section Content\" class=\"wp-image-28446\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2019\/12\/customize-section-content.png 760w, https:\/\/hasthemes.com\/wp-content\/uploads\/2019\/12\/customize-section-content-300x148.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2019\/12\/customize-section-content-360x178.png 360w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/figure>\n\n\n\n<p class=\"has-ast-global-color-4-background-color has-background\" style=\"padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\"><strong>Explore Additional Apps<\/strong>: If you need more advanced section options, consider exploring the Shopify App Store for apps that provide additional section templates and customization features.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"462\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2019\/12\/advanced-section-of-app.png\" alt=\"App's section\" class=\"wp-image-28447\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2019\/12\/advanced-section-of-app.png 760w, https:\/\/hasthemes.com\/wp-content\/uploads\/2019\/12\/advanced-section-of-app-300x182.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2019\/12\/advanced-section-of-app-360x219.png 360w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/figure>\n\n\n\n<p class=\"has-ast-global-color-4-background-color has-background\" style=\"padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\"><strong>Rearrange Sections<\/strong>: You can rearrange the order of sections by dragging and dropping them in the sidebar menu. This allows you to prioritize content and create a logical flow on your pages.<\/p>\n\n\n\n<p class=\"has-ast-global-color-4-background-color has-background\" style=\"padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\"><strong>Preview and Adjust<\/strong>: As you make changes, you can see a live preview of how the section will look on your page. Make any necessary adjustments to ensure the section content aligns with your overall design vision.<\/p>\n\n\n\n<p class=\"has-ast-global-color-4-background-color has-background\" style=\"padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\"><strong>Save Your Changes<\/strong>: Once you\u2019re satisfied with the customization, click <strong>Save<\/strong> to apply your changes. The new sections and content will be published on your live store.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"326\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2019\/12\/preview-and-save1.png\" alt=\"Preview and Save\" class=\"wp-image-28440\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2019\/12\/preview-and-save1.png 760w, https:\/\/hasthemes.com\/wp-content\/uploads\/2019\/12\/preview-and-save1-300x129.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2019\/12\/preview-and-save1-360x154.png 360w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/figure>\n\n\n\n<p>By following these steps, you can effectively add and customize section content on your Shopify store, creating a more engaging and visually appealing shopping experience for your customers.<\/p>\n\n\n\n<div class=\"wp-block-uagb-marketing-button uagb-marketing-btn__align-center uagb-marketing-btn__align-text-center uagb-marketing-btn__icon-after uagb-block-8d4e84ba wp-block-button\"><a href=\"https:\/\/link.hasthemes.com\/mavon\" class=\"uagb-marketing-btn__link wp-block-button__link\" target=\"_blank\" rel=\"noopener noreferrer\"><h5 class=\"uagb-marketing-btn__title\">\ud83d\ude80Boost Your Online Store Sales with Mavon: A High Converting Shopify Theme!<\/h5><svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><path d=\"M384 320c-17.67 0-32 14.33-32 32v96H64V160h96c17.67 0 32-14.32 32-32s-14.33-32-32-32L64 96c-35.35 0-64 28.65-64 64V448c0 35.34 28.65 64 64 64h288c35.35 0 64-28.66 64-64v-96C416 334.3 401.7 320 384 320zM488 0H352c-12.94 0-24.62 7.797-29.56 19.75c-4.969 11.97-2.219 25.72 6.938 34.88L370.8 96L169.4 297.4c-12.5 12.5-12.5 32.75 0 45.25C175.6 348.9 183.8 352 192 352s16.38-3.125 22.62-9.375L416 141.3l41.38 41.38c9.156 9.141 22.88 11.84 34.88 6.938C504.2 184.6 512 172.9 512 160V24C512 10.74 501.3 0 488 0z\"><\/path><\/svg><p class=\"uagb-marketing-btn__prefix\">Try Mavon for Free Today!<\/p><\/a><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Adding sections to your Shopify store allows you to customize the layout and design of your pages, enhancing the overall shopping experience for your customers. Here\u2019s a step-by-step guide on how to add and customize section content in Shopify: Go to Online Store and Themes: In the admin dashboard, go to Online Store > Themes. [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","_mi_skip_tracking":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[163],"tags":[],"class_list":["post-5208","post","type-post","status-publish","format-standard","hentry","category-shopify-tutorials"],"acf":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"htmega_size_585x295":false,"htmega_size_1170x536":false,"htmega_size_396x360":false,"betterdocs-category-thumb":false},"uagb_author_info":{"display_name":"Julia Evans","author_link":"https:\/\/hasthemes.com\/author\/juliaevans\/"},"uagb_comment_info":0,"uagb_excerpt":"Adding sections to your Shopify store allows you to customize the layout and design of your pages, enhancing the overall shopping experience for your customers. Here\u2019s a step-by-step guide on how to add and customize section content in Shopify: Go to Online Store and Themes: In the admin dashboard, go to Online Store > Themes.&hellip;","_links":{"self":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/posts\/5208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/comments?post=5208"}],"version-history":[{"count":5,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/posts\/5208\/revisions"}],"predecessor-version":[{"id":28450,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/posts\/5208\/revisions\/28450"}],"wp:attachment":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/media?parent=5208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/categories?post=5208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/tags?post=5208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}