マガジンのカバー画像

Shopifyコーディング100本ノック(Dawn)続編

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

記事一覧

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

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

有料
1,500

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

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

有料
1,500

[Shopify]ログインユーザーのみダウンロードできるセクション・メタオブジェクト連携 #121

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 ログイン中ユーザー向けの資料ダウンロードセクション^^資料ダウンロードでなくてもYoutubeのリンクにしたり、使い道は色々🎶 画像・タイトル・ボタンのシンプルなデザインにしてみました〜。メタオブジェクトと連携しているので、データはメタオブジェクトで設定した値が表示されます。 マイページやや商品、ブログなどいろんなところに挿入してみてね。 ✔️今回のゴール 🔸CMSの特徴 🔸メタオ

有料
1,500

[Shopify]複数の画像組み合わせ!アニメーションカラムセクション #120 #temp-t

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 セクションテンプレート「Tシリーズ」第二弾。 「Tシリーズ」第一弾と組み合わせると良い感じのLPが作れちゃいます^^ アニメーションカラム。スクロールすると画像が動くのでいつものDAWNがちょっとリッチに🎶 ✔️今回のゴールデモページ 🔸CMSの特徴 「セクション T-2」を選択 ▪️ブロックでカラム追加 ===== ブロック内の設定 ===== ===== 共通の設定 ===

有料
1,500

【GAS】Shopifyメタフィールドのデータをスプレッドシートにバックアップ(顧客編)・テンプレートあり#27 (Shopify API + GoogleAppsScript)

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 メタフィールドのデータのバックアップをスプレッドシートに落としてみました。前回商品&記事をご紹介したので今日は顧客編です🎵 ✔️今回のゴール ✔️設置手順◆事前準備 🔸ShopifyAPIキー取得 下記のStep3までは作成しておく必要あり。 🔸アクセススコープ 🔸スプレッドシート用意 *共有リンクページ最後に貼っておき ます。コピーして使ってください。 ❶シート名指定

有料
1,200

[Shopify]複数の画像組み合わせてアニメーションを作れる&追従ナビゲーションON/OFFセクション #119 #temp-t

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 セクションテンプレート「Tシリーズ」第一弾。 LPのKV用のセクションを作成してみました🎵画像を複数追加すると時間差で表示されるアニメーションセクション。 ↓第二弾との組み合わせバッチし↓ ✔️今回のゴールデモページ 🔸CMSの特徴 「セクション T-1」を選択 ========= アニメーション画像 ========= すべての画像の横幅と高さを合わせて透過した画像を使うと上手

有料
1,500

[Shopify]バナー・テキスト・ボタンの3種類選べるCTAのセクション(メタフィールド対応) #118 #temp-u

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 シンプルなCTAエリアのセクション。バナー、テキスト、テキスト+ボタンの3種類選べる。 ✔️今回のゴールデモページ 🔸CMSの特徴 「セクション U-4」を選択 ====== 共通設定 ====== ====== 各種ブロック ====== ✔️設定手順Step1 新規セクション追加 1️⃣管理画面>コード編集>セクション>新規追加

有料
1,000

[Shopify]ページ内リンクのメニューが簡単に作れるセクション #117 #temp-u

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日はシンプルなページ内リンクのメニューのセクション🎵LP作成時にトップに設置してページ内スクロールさせたりするのに使える。 ✔️今回のゴールデモページ 🔸CMSの特徴 「セクション U-3」を選択 共通設定は下記 ✔️設定手順Step1 新規セクション追加 1️⃣管理画面>コード編集>セクション>新規追加

有料
1,500

[Shopify]画像2枚重ねて動きをつけられるカラムセクション・ボタンはリンクかモーダルを選択できる(メタフィールド対応) #116 #temp-u

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 「透過」画像を2枚重ねてアニメーションで表示できるカラム🎵もちろん画像1枚でもふんわり表示されますよ。 ボタンはホバーすると背景がスライドするスタイリッシュなデザイン。リンクで別ページに遷移するかモーダルを表示させるのかをブロック毎で選択ができる^^ ✔️今回のゴールデモページ 🔸CMSの特徴 「セクション U-2」を選択 ====== 共通設定 ====== ====== ブロ

有料
1,500

[Shopify]クリックするとモーダルOPEN・モーダル内の矢印で次の要素をスライドできる(メタフィールド対応) #115 #temp-u

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 クリックするとモーダルが開くセクション。さらに、モーダル内で前後の要素を切り替えられるようにしてみました! ✔️今回のゴールデモページ 🔸CMSの特徴 「セクション U-1」を選択 ====== 共通設定 ====== ====== ブロック毎の設定 ====== ✔️設定手順Step1 新規セクション追加 1️⃣管理画面>コード編集>セクション>新規追加

有料
1,500

[Shopify]画像を重ねてスクロールすると動画風にアニメーション表示できるセクション・メインビジュアルに使える(メタフィールド対応) #114 #temp-u

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 メインビジュアルなんかに使えるセクション🎵アニメーションとヘッダーエリアの2カラム。片方のカラムは画像を重ねてスクロールするとしたからふんわり順番に表示されるアニメーション。もう片方はテキストか画像で見出しなどを表示するエリアでアニメーションなし。 アニメーションエリアの画像は3枚まで挿入できます。背景「透過」にした画像を挿入するとGIF風になる! LPに動きがあると印象が変わるね^^

有料
1,500

[Shopify]セミナー開催やイベント告知ページで使えるイベントタブとその詳細の出しワケ&日時選択ができるセクション #113

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 カテゴリー別にメニューを出しワケできるセクション。メニューの詳細をクリックすると、対象の詳細エリアが表示されます。また、日時を追加して予約フォームに繋げられるようにしてみました。 フォームは前回ご紹介した項目追加できる問合せフォームと連携させて使用するセクションになります。(本記事では問合せフォームのコードは記載していません) ✔️今回のゴールデモページはこちら 🔸CMSの特徴 ✔️

有料
3,900

[Shopify]問い合わせフォームに色々な項目を追加できるセクション・必須項目があれば送信ボタンが無効になる機能付 #112

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 既存のお問い合わせフォームに色々項目を増やせるセクションを作ってみました。会社名やフリガナ、プルダウンで選択できたりラジオボタンを追加したりできます^^ 必須かどうかも設定できるようにしていて、必須項目を全て入力しないと送信ボタンが有効にならないようにしています。 ✔️今回のゴール 🔸CMSの特徴 設定手順はこちら。

有料
1,500

【Shopify】ブログ記事に「役立った/役立ってない」ボタンを設置してスプレッドシートにデータを記録できるセクション #111 (GASも使う)

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 各ブログ記事にお役に立った? 立ってない?ボタンを設置してフィードバックをもらえるセクションを作ってみました^^ GASでボタンがクリックされるとスプレッドシートにタイムスタンプ、記事ID、タイトル、GOOD/BADの評価が記録されていきます。 ピポットテーブルやクエリなどで集計したりして活用してみてね。 ✔️今回のゴール あとはお好みでピポットテーブルやクエリなどで集計シートを作っ

有料
1,200