マガジンのカバー画像

Shopifyコーディング100本ノック（Dawn）続編

人気のShopifyコーディング100本ノックシリーズの続編。現在の100本ノックマガジンで100本記事投稿した後はこちらで更新していきます。「Shopifyコーディング100本…
【月２回程度更新】1記事ずつよりも定期購読の方がお得。「Shopifyコーディング100本ノック（…
¥1,200 / 月 初月無料
運営しているクリエイター
まりん | Shopifyフロントエンジニア+SNSマーケティング

#フリーランス

[ShopifyFlow]フロー使って注文があったら自動で「発送済」にステータスを変更してみる　#002

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日は注文作成されたら配送のステータスを自動的に「発送完了」にするフローを作成してみます。 Shopifyのデフォルトの設定では注文が入ったら自動的にフルフィルメントを完了に変更できる設定はなかったので作成してみました＾＾私はShopifyでデジタルコンテンツを販売しているので、商品を送ることがないため発送ステータスは自動的に完了にするのに使ってます。 フローのおかげで、毎回、管理画面で

¥800
まりん | Shopi…

[Shopify]商品一覧に新着バッジ機能を追加🎶商品作成日から〇〇日表示と表示期間設定できる（既存テンプレート使用） #124

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日は既存の商品一覧ページに、新着バッジを付与する機能を追加してみました。カスタマイズ画面で商品作成日から何日まで表示するのかを指定できるので便利。 テキストまたは画像でバッジを設定できる。画像が優先されるのでテキストバッジを使用したい場合は画像の設定はなしにして使用してね。 {{ product.created_at}}を使用して商品作成してから２０日間表示させるとか、日付をカスタマイ

¥800
まりん | Shopi…

[Shopify]対象商品購入者のみ記事の続きが読めるブログテンプレート・メタフィールドで設定した商品と紐付け🎶 #123

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 前回、商品を購入した人向けの特典ダウンロードセクションの作り方をご紹介しました。今回はその応用で、ブログ記事に前回使ったロジックを使ってNoteみたいな有料記事のテンプレートを作成してみました＾＾ ▼過去の記事の続き 今回は下記の流れになります。 ❶記事のメタフィールドで商品を選択できるようにする。（事前に対象ブログを購入する商品ページを作成する必要あり） ❷ブログの本文内のどこかに「こ

¥1,500
まりん | Shopi…

[Shopify]対象商品購入者のみダウンロードできる特典配布セクション・メタオブジェクト＆メタフィールド連携 #122

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 前回はログインユーザー全員に向けた特典ダウンロードセクションをご紹介しました。今回はその続編の対象の商品を購入したお客さんだけに特典をお渡しするセクションを作成しました。 ▼前回の記事はこちら 商品Aに特典１と２を設定しておいて、商品Aを購入した人のみがダウンロードできるというセクションです。前回はユーザー登録さえすれば誰でもダウンロードできるよ〜という登録促しようのセクションでしたが、

¥1,500
まりん | Shopi…

[Shopify]ブログ「一覧」のテンプレート#2　メタフィールドで設定（Dawn）

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日はブログ一覧のテンプレートのご紹介です。 カテゴリ内での新着記事６個とView Moreをクリックするとページ内のアーカイブエリアにスクロールされます。アーカイブエリアの記事はカテゴリの記事全て表示されます。 いつもはテーマのレイアウトの固定部分はセクションを使いますが、今回はブログのメタフィールドのJSONを使って作成してます！ ✔️今回のテンプレート＝＝＝＝＝＝＝＝ パソコン

¥4,900
まりん | Shopi…

【GAS】顧客ID取得→メタフィールドの値取得→スプレッドシートの値をメタフィールドに反映＃21 (Shopify API + GoogleAppsScript)

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 Shopify APIとGoogleAppsScript (GAS)を使って、顧客毎のメタフィールドの値をスプレッドシートから更新♪ ✔️今日のゴール❶メタフィールドの定義 ❷スプレッドシートに対象のネームスペースとキーを入れる。 ❸ボタン押して顧客IDを取得 ❹既にメタフィールドに設定されている値を取得 ❺内容編集 ❻チェックを入れると更新される ❼更新完了するとチェッククリ

¥1,200
まりん | Shopi…

【GAS】各顧客のメモ情報をスプレッドシートから更新＃20 (Shopify API + GoogleAppsScript)

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 Shopify APIとGoogleAppsScript (GAS)を使って、スプレッドシートから顧客管理画面のメモ欄をスプレッドシートから更新してみます＾＾ ✔️今日のゴール対象顧客のB 列にメモを記載して、更新に☑️を入れると、 顧客管理のメモが更新され、スプレッドシートのチェックは初期値に戻ります。 ✔︎作成手順◆事前準備 🔸ShopifyAPIキー取得 下記のStep3まで

¥1,200
まりん | Shopi…

[Shopify]マルチカラムの画像を丸画像にしたセクション（Dawn）68/100

こんにちは。まりんです。 今日はマルチカラムの画像が丸になっているバージョンのセクションを作ります。デフォルトだと画像が四角なので丸画像のが欲しいな〜と思い作りました。 ついでに見出しも可愛くしたり、リンクボタンおしゃれにしてみました♪ ✔️今回のゴール①デモページアクセス（PW：stahsk40jw1Mf） ②この商品のみメタフィールド設定してます ◆CMSの特徴 ✔️設置方法Step1 　セクションを追加 管理画面＞テーマ＞コード編集＞セクション＞新規追加

¥1,200
まりん | Shopi…

[Shopify]メタフィールドJSONで商品詳細に使用イメージのスライド&モーダルのセクション設置（Dawn）67/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日は商品ページに使用イメージが分かるスライドをメタフィールドのJSONを使って作ろうと思います♪ ✔️今回のゴール①デモページアクセス（PW：stahsk40jw1Mf） ②この商品のみメタフィールド設定してます ◆CMSの特徴 ✔️設置手順◆事前準備 ①Slick.jsを使用します。入れ方は下記の記事に記載しています。 ②また、もしかしたらjQueryもいるかもしれません。まだ

¥1,200
まりん | Shopi…

【Webhook】ShopifyのWebhookで注文入ったらスプレッドシートに注文情報を自動で取得できるようにする

こんにちは。まりんです。 今日はWebhookを使って、商品の注文が入ったらスプレッドシートに購入情報が入力されるようにしてみようと思います。 設定方法はまとめておきますが動画と同じなので動画見てもらったら作成できると思います。 ✔️設定方法

¥800
まりん | Shopi…

[Shopify]ブログ一覧にピックアップ記事カルーセルを追加できるセクション（Dawn）66/100

こんにちは。まりんです。 今日はブログ一覧でピックアップ記事を挿入できるセクションを作成してみます。 選択できる記事は5記事です。 お好きな位置に挿入してみてくださいね♪ ✔️今日のゴール①デモページアクセス（PW：stahsk40jw1Mf） ②ブログ一覧へ ◆CMS特徴 ブログ一覧カルーセルというセクションを追加 記事５つ追加すると綺麗に収まります。 5個以下だとレイアウトおかしいので5個入れた方が良いと思います。 ✔️設定手順Step1 　セクションファイ

¥800
まりん | Shopi…

【GAS】注文情報をスプレッドシートに反映してみる＃05 (ShopifyAPI + GoogleAppsScript)

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日はショッピファイの注文情報をスプレッドシートに反映してみます♪ ✔️今日のゴール ✔️作成手順まずは事前準備♪ Shopify APIを取得していない場合は先に発行しておいてくださいね。手順は下記に書いてます。 ◆アクセススコープ Step1 　スプレッドシートに項目を追加 今日はShopify注文管理画面から を取得したいと思います。 上記の項目をスプレッドシートに入力。

¥1,200
まりん | Shopi…

[Shopify]メタフィールドのJSON使って商品ページにグラフを表示できるブロック（Dawn）65/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 コーヒー豆販売しているお店とかって、苦味や甘味とかスッキリ度とかがグラフや星マークの数とかで分かりやすく表示されていますよね。 商品詳細にその商品のステータスが一目でわかるようなブロックを追加してみました。 メタフィールドのJSONを使用します。 ※コーディングの解説記事ではありません。 ✔️今回のゴール ◆CMSの特徴 ✔️設置手順Step1　メタフィールドの商品で定義追加

¥800
まりん | Shopi…

[Shopify]「○個以上●％OFF」対象商品の詳細ページにタグをつけて複数購入を促すブロックを追加してみる（Dawn）64/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 複数購入でお客さんの一人当たりの購入単価を上げられるようなブロックを作成してみました。 対象商品限定で●個買うと●％OFFというディスカウントを作成して、その対象商品にタグをつけて、商品ページにタグのリンクを設置。 そのリンクをクリックすると、そのタグを付与された商品のみが一覧に表示されるので、どの商品を●個買いできるのか一目でわかるのでユーザー側も購入しやすいのではと思い作成してみました

¥800
まりん | Shopi…