# Shopify

## 概要

ECに特化したサイト制作プラットフォーム（競合：WIXやWordPress？）
shopifyを用いてハイクオリティなサイトを制作するベンダーをshopify expertと言うらしい

## 基本情報

サイト制作自体はブラウザから画面ポチポチで実装可能（WordPress感覚で行けそう）
プラグイン等による拡張機能あり

## カスタマイズについて

完全に一からテーマを作る場合
Liquidと呼ばれるshopify独自のテンプレートエンジンがあり、それを用いて開発する模様

## Headless CMSについて

ShopifyのAPIを利用する仕組み
フロントエンドは好きなフレームワークを選べる

通常のShopify: モノリシック
Headless Shopify: フロントエンドは分離している

以下設定を.envに追記し、shopifyのAPIを呼び出すイメージ

SHOPIFY_STOREFRONT_ACCESS_TOKEN='your-token'
SHOPIFY_STORE_DOMAIN='your-store.myshopify.com'

## 作成手順（簡易版）

Shopifyにアカウント作成
管理画面から商品を登録
サイトデザインを変更
ページの編集
プランの選択

## 参考

### 基本情報

提供API（公式）：https://shopify.dev/docs/api
外部ブログ1：https://chatboost-ec.dmm.com/blogs/column/shopify-how-to-use-api-utm_source-seo-utm_medium-shopify-utm_campaign
外部ブログ2：https://corekara.co.jp/contents/sales-up/shopify-construction/

### Headless Shopifyについて

Headless Shopifyの仕組み：https://buttercms.com/blog/headless-shopify/
Headless Shopifyのhandson：https://www.youtube.com/watch?v=us68alfQpEA&ab_channel=CodingPhase
Next.jsを用いたShopifyの導入方法（vercelのサイト）：https://vercel.com/guides/building-ecommerce-sites-with-next-js-and-shopify