Shopify sections let you build reusable blocks for your store pages without rebuilding the whole theme. You can add a hero, testimonial area, FAQ, product feature, or custom landing-page section, then control it from the Shopify theme editor.
Before you start
Open your Shopify admin and go to Online Store → Themes. Find your current theme, click the three dots, and choose Duplicate. Work inside the duplicate theme so your live storefront stays safe.
Create a section file
Open theme code
Click Edit code on the duplicated theme.
Go to Sections
In the left sidebar, open the sections folder.
Add a new file
Click Add a new section and name it clearly, for example cws-hero-banner.
Paste the code
Paste your section's Liquid markup into the new section file. Add CSS to your main stylesheet, or keep it inside the section using a <style> tag if you want it scoped to that section.
If the section includes JavaScript, place it in your theme JavaScript file or add it below the section markup inside a <script> tag.
Add it in the theme editor
After saving the section file, open Customize on the duplicate theme. Go to the page where you want the section, click Add section, and search for the section name from the schema.
The name shown in the theme editor comes from the section schema, not always the file name.
Customize safely
Use the theme editor settings to update headings, copy, images, links, and blocks. Keep section names organized so your team can understand what each custom section does later.
- Use clear file names like cws-faq-accordion.liquid.
- Keep CSS class names unique to avoid theme conflicts.
- Test desktop and mobile spacing before publishing.
Test and publish
Preview the duplicate theme on mobile and desktop. Check that buttons, links, images, accordions, and animations work correctly. Once everything looks good, publish the duplicate theme or copy the completed section into the live theme.