Always work in a duplicate theme
One-click rollback beats debugging a live store.
Integrations / Theme sections & design
How to Add Custom Sections to a Shopify Theme with DECO
Every store eventually wants a section its theme does not have. The question is whether you get it by editing theme code you will have to maintain forever, or by adding it as a block you can remove.
- Steps8
- Time45 min
- DifficultyNo code required
WHY THIS MATTERS
Shopify 2.0 sections made themes far more flexible, but you still run into gaps: a comparison block, a trust row with your own icons, a decorated product badge, a layout the theme author never anticipated. DECO adds those as installable sections and decorators you place through the theme editor. The strategic value is not the sections themselves — it is that they live outside your theme files, so a theme update does not silently undo them and your merchandiser can place them without a developer. Where a section becomes core to how you sell, we build it properly in the theme instead; that is what our custom development work covers.
Before you start
- A Shopify Online Store 2.0 theme
- Theme editor access
- A staging or duplicated theme to test in
Step by step
The same sequence we follow on client stores. Do them in order — several of the later steps depend on decisions made in the earlier ones.
-
Duplicate your live theme first
Always build in a duplicate, never on the published theme. This is not specific to DECO — it is the rule for every theme change — but section apps make it tempting to skip because the edits feel small.
-
Install DECO and add the app blocks
Install the app, then open the theme editor and add its blocks to the templates you want. Because they are app blocks, they sit alongside your theme sections rather than replacing them.
-
Match your existing design system
Set typography, colours, radii, and spacing to your theme's existing values rather than the app defaults. A section that looks bolted on undermines exactly the trust you added it to build.
-
Use decorators sparingly on product pages
Badges and highlights work by contrast. Three badges on a product card is emphasis; six is noise, and it slows the scan that a collection page depends on.
-
Check the mobile layout for every section
Section apps generally handle desktop well and stack unpredictably on mobile. Since most of your traffic is mobile, check each section on a real phone before publishing.
-
Watch the performance cost
Each app block adds requests. Measure Largest Contentful Paint before and after on a product and collection page — a section that adds a second to load has to be worth a second. See Core Web Vitals.
-
Verify RTL if you are bilingual
App sections often assume left-to-right. Check alignment, arrow direction, and padding in Arabic before publishing — see the Arabic RTL guide.
-
Publish the duplicate, keep the rollback
Publish the tested duplicate and keep the previous theme unpublished for a week. If something regresses, reverting is one click instead of an incident.
What we do differently
The three things that separate a working setup from a default one — drawn from the stores we ship, not from the documentation.
Match the design system
Default app styling is the fastest way to make a store look assembled rather than designed.
Measure the speed cost
App blocks are not free. Check LCP before and after.
The app in this guide
DECO
Would rather we just did it?
We set this up on every store we build, and we do it as standalone work too. Start with a free audit — we will tell you what is worth changing before you spend anything.
Frequently Asked
Questions
What clients ask us about this integration before we set it up.
Section app or custom theme code?
A section app is right for merchandising blocks you want to move around and might remove. Custom theme code is right for anything core to how your store sells, where you need full control of markup and performance. We do both — see custom development.
Will app sections survive a theme update?
App blocks are more resilient than edited theme files, but you should still re-check placement after any major theme update.
Do these hurt page speed?
Each adds some weight. A couple of well-configured sections is fine; a page assembled entirely from app blocks will be slow.
Affiliate disclosure: QodeBites may earn a commission from some links on this page — we only recommend apps we actually build with on client stores. It costs you nothing extra, and it never changes what we recommend.