マガジンのカバー画像

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

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

【GAS】商品のメタフィールドをスプレッドシートに反映してみる＃07 (ShopifyAPI + GoogleAppsScript)

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 Shopifyの商品情報をCSVでエクスポートできるのですが、メタフィールドは反映されないのでスプレッドシートで取得してみました♪ ✔️今回のゴール✔️作成手順まずは事前準備。Shopify APIを取得していない場合は先に発行しておいてくださいね。手順は下記に書いています。 ◆アクセススコープ 今回は商品のメタフィールドの値を取得しようと思いますので商品管理のリードにチェックを入れて

¥1,200
まりん | Shopi…

[Shopify]手順が一目でわかるステップセクションを設置（Dawn）71/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日はステップで手順を見せたい時に使えるセクションを作ってみます。 手順がわかりやすければ問い合わせも減りオペレーション工数が減らせる♪ ✔️今回のゴール◆PC ◆SP 縦線は一番最後のステップ見出しまで表示。 ◆CMSの特徴 ✔️設置手順Step1 セクションを新規作成 管理画面＞テーマ＞コード編集＞セクション＞新規セクション追加

¥1,000
まりん | Shopi…

[Shopify]商品一覧のバナーを画面いっぱいで表示する（Dawn）70/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日は商品一覧のバナーをアレンジしてみます♪ デフォルトだと文字&画像が2からむで表示されているのですが、画像を画面いっぱいにして画面の半分あたりの高さのセクションを作ろうかと思います。 ✔️今回のゴールデモ ①デモページアクセス（PW：stahsk40jw1Mf） ②このコレクションのみに設定してます ✔️設定手順Step1 　セクションを新規作成 管理画面＞テーマ＞コード編集＞セ

¥800
まりん | Shopi…

[Shopify]商品一覧の商品表示部分を可愛くアレンジ（Dawn）69/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 通常の商品一覧とは別に３〜５商品を特集商品として紹介するのを想定したコレクション用のセクションを作ってみました♪ Dawnでもバージョンによってレイアウト崩れるかも！ その際は調整してご使用ください。 ✔️今日のゴールデモ ①デモページアクセス（PW：stahsk40jw1Mf） ②このコレクションのみに設定してます ◆CMSの特徴 ３カラムのセクションは前回作成したのを使用していま

¥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…