Hiluna: Shopify technical training

This page is the comprehensive instructor guide for Day 1 (Fundamentals) of the training prepared for the Hiluna team. Content is enriched with setup, coding, debugging, and best practices.

---

### LESSON 0: EDITOR AND ENVIRONMENT OPTIMIZATION (09:15 - 09:30)

**Goal:** Get VS Code ready for Shopify development.

1. **Extensions:** Have them install "Shopify Liquid" (Official extension), "Prettier" (Code formatter), and "GitLens" (To see who changed what).

2. **Settings:** Create `.vscode/settings.json` and enable HTML formatting for Liquid files.

[Instructor Note]: Inform that "Bracket Pair Colorizer is now built into VS Code, no extension needed".

---

### LESSON 1: SETUP AND ENVIRONMENT PREPARATION (09:30 - 10:30)

**Technical Details:**

- **Node.js:** Shopify CLI v3 requires Node.js 18+. Check with `node -v`.

- **CLI Permissions:** The account logged in must have "Themes" and "App development" permissions in the store.

**Steps:**

1. `npm install -g @shopify/cli @shopify/theme`

2. `shopify login --store=hiluna.myshopify.com`

**Q&A:**

- **Q:** "Why install globally?" -> **A:** To access from anywhere in the terminal.

---

### LESSON 2: THEME ARCHITECTURE AND FILE STRUCTURE (10:45 - 11:30)

**Critical Files:**

- `layout/theme.liquid`: Master template. Header/Footer are here.

- `templates/*.json`: Page structures. Which section stands where?

- `sections/`: Independent blocks. (e.g., Hero Slider)

- `config/settings_data.json`: Theme's database. Colors, fonts, and section contents.

**Q&A:**

- **Q:** "Where should we write CSS?" -> **A:** `assets/base.css` or inside the section with `<style>` tag (Scoped CSS logic).

---

### LESSON 3: LOCALHOST AND HMR (11:30 - 12:30)

**Steps:**

1. `shopify theme list` -> Copy ID.

2. `shopify theme pull -i <ID>` -> Download theme.

3. `shopify theme dev` -> Start server.

**Debug Tip:**

- If CSS is not loading or you get 404, close terminal and run `shopify theme dev` again. Sometimes port gets stuck.

---

### LESSON 4: LIQUID CODING AND DEBUGGING (13:30 - 15:00)

**Liquid Fundamentals:**

- `{{ product.title }}` -> Output

- `{% if product.available %}` -> Logic

- `{{ product.price | money }}` -> Filter

**Debugging Techniques (IMPORTANT):**

1. **JSON Filter:** Use `{{ product | json }}` to see what is inside an object. Prints all data to screen.

2. **Comment:** Instead of deleting code, hide it with `{% comment %}...{% endcomment %}`.

3. **Theme Inspector:** Analyze which section slows down the site with Chrome extension "Shopify Theme Inspector".

**Practice:**

- Create `snippets/debug-bar.liquid`. Write `Current Template: {{ template }}` inside and add to bottom of `theme.liquid`.

---

### LESSON 5: GIT, GITHUB AND CONFLICT RESOLUTION (15:15 - 17:00)

**Workflow:**

1. `git checkout -b feature/new-header`

2. Code -> Commit -> Push

3. Open PR on GitHub -> Merge.

**Conflict Scenario:**

- If two people change "Button color" from Panel at the same time, conflict occurs in `settings_data.json`.

- **Solution:** Decide whether to take Incoming or Current using "Merge Editor" in VS Code. Usually "Incoming" (from Panel) is more up-to-date.

---

### BONUS: LIQUID CHEAT SHEET

- **Call Asset:** `{{ "style.css" | asset_url | stylesheet_tag }}`

- **Call Image:** `{{ product.featured_image | image_url: width: 500 | image_tag }}`

- **Translation (Locales):** `{{ "general.cart.title" | t }}`

- **Loop:** `{% for item in cart.items %} ... {% endfor %}`

- **Math:** `{{ product.price | divided_by: 100.0 }}`

Access training documents.

For more references check my Shopify directory profile.