Section Installer
Shopify 2.0 · Step-by-step guideGet Your Section
Live in Minutes
Follow the steps below to install your purchased Shopify section. No coding experience required.
Unzip Your Package
Extract the downloaded ZIP to access all section files
After purchase, you will receive a .zip file. Extract it on your computer.
Inside you will find the following folder structure:
📦 your-section-name/ ├── sections/ │ └── your-section-name.liquid ← Section file ├── assets/ │ ├── your-section-name.css ← Required CSS │ └── your-section-name.js ← JS (if included) └── snippets/ ← Only if included └── snippet-name.liquid
File names are referenced internally. Renaming will break CSS and JS loading.
Upload Files to Your Theme
Place each file in the correct Shopify theme folder
Go to Shopify Admin → Online Store → Themes → ··· → Edit code. Then upload or paste each file into the matching folder:
| File | Upload to | Required? |
|---|---|---|
| your-section-name.liquid | sections/ | Required |
| your-section-name.css | assets/ | Required |
| your-section-name.js | assets/ | If included |
| snippet-name.liquid | snippets/ | If included |
📄 Uploading the Section File
- In the code editor, click on the sections/ folder
- Click Add a new section
- Name it
your-section-name(no .liquid extension needed) - Paste the full content from
your-section-name.liquid - Click Save
🎨 Uploading the CSS File
- Click on the assets/ folder
- Click Add a new asset → Create a blank file
- Name it exactly:
your-section-name.css - Paste the CSS content and click Save
⚡ Uploading the JS File (if included)
- Same steps as above inside
assets/ - Name it:
your-section-name.js - Paste JS content and save
Each section ships a CSS file named after that section. This prevents overwriting other sections' styles. Never combine CSS files.
Add Snippets (If Included)
Some sections use reusable snippet files
If your package includes a snippets/ folder, follow these steps for each snippet file:
- Click on the snippets/ folder in the code editor
- Click Add a new snippet
- Name it exactly as provided (e.g.
card-item) - Paste the snippet content and click Save
Snippets are standalone and section-agnostic. They will not conflict with other sections as long as file names are unique.
Add Section to a Page
Use the Shopify Theme Editor to place the section
- Go to Admin → Online Store → Themes → Customize
- Use the page selector at the top to navigate to the target page
- In the left sidebar, click Add section
- Search for the section name and click to add it
- Drag to reorder its position on the page if needed
- Use the settings panel to configure heading, colors, images, and spacing
Admin → Online Store → Themes → Customize → Select page → Add section → Search: your-section-name → Click to add → Configure → Save
Verify & Go Live
Check everything looks correct before publishing
| Check | What to look for |
|---|---|
| Section visible | Section appears in Theme Editor preview |
| Styles loaded | Layout and colors render correctly — not plain HTML |
| Responsive | Use mobile / tablet preview icons in Theme Editor |
| Settings work | Changing heading / colors updates the preview live |
| No console errors | Open browser DevTools → Console — no red errors |
Double-check the CSS file name in assets/ matches exactly what is referenced inside the .liquid file on line 1. File names are case-sensitive.