マガジンのカバー画像

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

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

#ECサイト

[Shopify]コピペで5分・簡単設置!ヘッダーメニューを会員用とゲスト用で切り替える #137

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 ヘッダーのメニューをログイン中とログイン前で表示しているメニューリストを出し分け♪数行を差し替えるだけなので簡単。1セクションファイルと3スニペットファイルを編集します。 すべてのフルバージョンのコードは最後に載せておきます。 ✔️今回のテンプレート 🔸cmsの特徴 ✔️設定手順💡Step1 会員用メニューを作成 💡Step2 既存のヘッダーファイルに追記 ❶管理画面>テーマ>コ

¥1,200

[Shopify]コピペで5分・簡単設置!オプトイン用のセクションテンプレート・アプリを使わないでサンクスページへのリダイレクト機能付 #135

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 オプトイン用のセクションテンプレート。リスト収集にお役立ち^^無料マニュアルプレゼントなど色々な用途で使える。例えば、Shopifyフローで自動化してメルマガ登録後にダウンロードリンク付きメールを配信する運用などと組み合わせて使っても良さそうですね♪ 今回はメルマガ登録後に別ページに遷移できるリダイレクト機能もつけてみました♪リダイレクト先を設定している場合に、登録完了後に指定したページに

¥1,500

[Shopify]メルマガ登録のポップアップが簡単に挿入できるセクションテンプレート・3つのレイアウトが選べる #134

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今回はメルマガ登録のセクションをポップアップで表示させられるセクションを作成しました。セクションにしたのでお好みのページに入れればページ指定で表示されます。 TOPページに追加したらトップのみに表示されるし、ブログに追加するとブログページで表示されます。 ✔️今回のテンプレートスマホではすべてのレイアウトで画像なしになります。 🔸CMSの特徴 🐝レイアウト1 🐝レイアウト2 🐝レ

¥2,980

[Shopify]検索結果に表示する要素を「商品のみ」や「記事と商品のみ」などカスタマイズ画面から選択できるようにする(Dawn) #134

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 デフォルトでは「商品」「記事」「ページ」から検索結果が表示されます。これを「商品のみ」にしたり、「記事と商品のみ」を表示するようにしたり、検索結果で表示するコンテンツをカスタマイズ画面から調整できるようにします。 デフォルトのリキッドファイルに追加するだけなので簡単。ヘッダーのサーチとサーチページでの検索窓からの場合の両方のパターンの設置方法をご紹介しています。 ✔️今回のゴールここの検

¥800

[Shopify]特集ブログ記事一覧・PCは2カラム・セクションテンプレート(Dawn) #133

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 ブログ記事一覧のセクションです。ブログ2つ選んで2カラムで表示されます!バナーも追加できるようにしてみました。不要な場合はバナー設定なしにすればOK。 スクロールした時のタイトルのアンダーラインがアニメーションになっててかわいい。 今回より簡単に設置できるようにCSSは同一ファイル内に書いて、設定ステップ数を1つにしてみました。これで本当にコピペだけで5分以内に設定して使えるようになりま

¥1,200

[Shopify]特集コレクションを顧客タグごとで出し分けるセクションテンプレート(Dawn) #132

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日は顧客タグで特集コレクションで表示する商品を出し分けるセクションを作ってみました🎶ログインしていない顧客と特定顧客タグを持っている顧客へのアプローチを変えられるので便利。 レイアウトはDawnの既存のレイアウト使っています。なのでCSSはなし。Dawn使ってる人はそのままコピペで使えます。 ✔️今回のゴール 顧客タグAのお客さんには商品一覧Bの商品を表示、 ログインしていないお客さ

¥1,200

[Shopify]ローカルストレージを使って「最近閲覧した商品履歴」を表示する・セクションテンプレート #127

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日はローカルストレージで最近閲覧した商品を保存して表示する方法についてご紹介。今回はデザインはシンプルに、8件まで閲覧履歴を表示するという仕様で作成しています。 カスタマイズ画面でのレイアウト調整版は次回出そうかと思っています。あと、色んなデザインパターンも今度紹介予定です^^ ✔️今回のゴール 🔸CMSの特徴 ✔️ローカルストレージに格納するコード下記を設置するだけでOK. {

¥1,500

[Shopify]画像をホバーすると拡大するアコーディオン・セクションテンプレート #126

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日はアコーディオンを作ってみました。ホバーすると画像が拡大するアニメーションがいい感じ。 ✔️今回のゴールデモページ SPでは説明文は長ければ「・・・」で表示される 🔸CMSの特徴 ====== 共通設定 ======

¥1,500

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

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

¥800

[ShopifyFlow]フロー使ってスプレッドシートと連携して注文されたら日付・合計・送料・税を表示されるフローを作成してみる #001

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日はフローを使ってスプレッドシートと連携させてみます。オーダーが通ったら日付、合計、合計から送料とTax引いた金額、送料、税金が保存されるようにしてみました。 シンプルな項目で作ったので5分もかからずできます。ぜひ、応用してみてください^^ ✔️今日のゴールこんな感じで注文されたらスプレッドシートに2行目からデータが格納されていきます🎵 ✔️設置手順Step1  スプレッドシートを用

¥500

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

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

¥800

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

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

¥1,000

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

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

¥1,500

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

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

¥3,900