マガジンのカバー画像

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

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

#shopify開発

[Shopify]コピペで簡単設置♪ブログに目次ブロックを追加（Dawn）50/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 ようやくDawnの100本ノックシリーズが５０記事になりました♪ 今回はブログ記事の中に目次をつけたいと思って、目次セクションを作ってみました。H2とH3が反映される目次にしています。 コードの解説記事ではないのでご了承ください。 ✔️今回のゴールデモページ（PW：stahsk40jw1Mf） ✔️CMSの特徴✔️設置方法Step1  Sectionファイル内のmain-articl

¥800
まりん | Shopi…

[Shopify]メタフィールド使ってブログ記事に関連商品を紐づける（Dawn）47/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 特集記事で該当商品を表示できない？と、何件かクライアントさんからご要望いただくことが多い。 いくつか方法はあるのですが、今日は記事コンテンツの下に表示させる方法についてご紹介します♪記事の本文中に表示させる方法についてはまた今度いつかご紹介しますね＾＾ 今回もメタフィールドが大活躍！ デモページ PW:stahsk40jw1Mf （ヘッダーから見れます） ✔️今回のゴール ブログ記

¥800
まりん | Shopi…

[Shopify]コピペで簡単設置！ランディングページ◆テンプレート2

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 LPテンプレート第２弾♪ メルマガやLINE登録を促すLPなど活用方法は様々。 ✔️今回のテンプレート ◆レイアウト　PC版 ◆レイアウト　モバイル版 ＞＞デモ ✔️CMSの特徴上記のブロックに沿って、画像とかテキストを入れていくデザインにしましたが、お好みで順番入れ替えとかもできます。 ◆共通 ◆テキストは下記のタグを組み合わせれば表現色々アレンジできます。 ◆ファースト

¥5,000
まりん | Shopi…

[Shopify]商品ページに発送予定日を自動計算して表示するブロックを追加（Dawn）39/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 発送予定日を自動計算して表示できるブロックを追加してみました。 営業日と年間の祝日はCMSから設定できるようにしてみました♪ ✔️今回のゴール ✔️CMSの特徴 ✔️設置方法Step１　既存のプロダクト詳細セクションを開く Step２　schemaに下記をコピペ schemaタグのblock内に下記をコピペ。どこでもOK。 { "type": "deliver

¥800
まりん | Shopi…

[Shopify]Slick.jsを使って商品画像を自動スライドにしてみる！商品ページ編（Dawn）33/100

こんにちは。Shopify専門フロントエンジニアのまりん(@crowd37cord)です。 今日は商品ページの商品画像を自動スライドにしてみました♪ 以前、Debutテーマでご紹介したSlick.jsを今回も使用しようと思います。 ✔️今回のゴール ✔️手順Step１　Slickファイルダウンロード ▼Slick.jsを使います https://kenwheeler.github.io/slick/ get it nowをクリック Downloadボタンをクリ

¥800
まりん | Shopi…

[Shopify]セール商品に割引率or金額を表示する！商品ページ編（Dawn）32/100

こんにちは。Shopify専門フロントエンジニアのまりん(@crowd37cord)です。 以前、コレクションページのセール商品割引率・金額を表示する方法をご紹介しました。商品ページでの表示方法についても！！とコメントでご要望いただきましたのでご紹介します！ 前回のコレクションページ編はこちら CSSや挿入位置はお好みで調整してください♪ ✅今回のゴール ✅CMS特徴 ✅設置方法❶Schemaに追記 Sectionファイル内の下記の既存ファイルを使用します。

¥500
まりん | Shopi…

[Shopify]コピペで簡単！カートページにあと●●円で送料無料と訴求モーダルを表示(Dawn)31/100

こんにちは。まりん(@crowd37cord)です。 今日はカートページで、あと数千円で送料が無料になる場合の訴求モーダルを作ってみました♪小計が設定送料以下だとモーダル表示、送料無料の金額以上だとモーダルは表示されない仕組み。 あと少しで送料無料なら何か買おうかなぁって感じで購入率が少し上がれば嬉しいですよね。 ✅今日のゴール例えば、10000円以上で送料無料の場合は、 CMSで10000円と設定すれば、送料-小計で残りの金額が計算されてモーダルのテキスト部分と、ボタ

¥500
まりん | Shopi…

[Shopify]コピペで簡単！Googleフォームと連携してアンケートセクションを設置(Dawn) 30/100

こんにちは。まりん(@crowd37cord)です。 Googleフォームと連携できるセクションを作ってみました！スプレッドシートに回答が反映されるので後で分析がラクです♪ 今回はデザインにはこだわってないので、CSSでお好みで調整してください。 ✅今回のゴール >>デモページ パスワード:stahsk40jw1Mf ✅CMSの特徴 ※必須にしている場合は空欄で送信不可になります。 ※ラジオボタンはプレイスホルダー設定項目はありません。 プルダウンとチェックボ

¥1,200
まりん | Shopi…

[Shopify]コピペで簡単！読み込み中ローディング設置。さらにON・OFF切替られる(Dawn)29/100

こんにちは。まりん(@crowd37cord)です。 ページへアクセスした時に読み込み中ローディング機能を設置しました。ロゴ設定でロゴが表示され、ロゴ設定なしの時はテキストが表示されます。 ※コードの解説記事ではありませんのでご了承ください。 ✅今回のゴール ✅CMSの特徴今回はセクション追加で追加するのではなく、「固定」で設置します。これで全ページ表示されるようになります！ ロゴ画像が設定されていない場合は、テキストが表示されます。テキストを記入していてもロゴ画像

¥800
まりん | Shopi…

[Shopify]スライダーのドットをオシャレに横棒にしてみた（Dawn）17/100

こんにちは。Shopify専門フロントエンジニアのまりん(@crowd37cord)です。 Shopifyのメインビジュアルを自動スライド。 Dawnテーマでは既存でスライダーというセクションがあるので、これ使える！！と思ったのですが、ドットのところをもう少しオシャレにしてみました♪ 画像が表示されている秒数に合わせて、横棒がじんわり同じ秒数で伸びます。 ✔️今回のゴール 画像と同じ秒数でカラーのところがじんわり伸びていくので、あとどれくらい表示されるのかが可視化され

¥500
まりん | Shopi…

[Shopify]名入り商品用に商品ページにテキスト記入設置して注文管理/カート/メールに反映させる（Dawn）15/100

こんにちは。Shopify専門フロントエンジニアのまりん(@crowd37cord)です。 名入りグラスなど、ギフト用に名前やメッセージを入れられる商品用に、Propertyで商品ページにテキスト挿入エリアを設置して、カート画面や注文管理画面、メールへ反映できるようにしました。 Shopifyブログの三種の神器の説明にも紹介されているPropertyを使うのですが、Dawnではそのままでは使えません＞＜ なので、Dawn用に少しコードを変えました★ 簡単なのでぜひ試して

¥500
まりん | Shopi…

[Shopify]バナーを英語と日本語でそれぞれ切り替えられるようにする（Dawn）11/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 バナーの文言が日本語で、日本語→英語で言語切り替えした時に、バナーの文字が日本語なので、英語の時は英語バナーを表示できるようにしてみました♪ ✔️今日のゴール言語切り替えで、 日本語画面の時→日本語バナーを表示。 英語画面の時→英語バナーを表示。 ✔︎今回のテンプレートの使い方 セクションを追加 バナー（言語切替）を選択 バナー（言語切替）を追加を選択 ＼　日本語バナー設定　／

¥500
まりん | Shopi…

[Shopify]アプリを使わずに言語切替をヘッダーに設置（Dawn）1/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日からDawnテーマベースでオリジナルレイアウトパーツを100個作ります！！ 何かを突き抜けてやり遂げてみたいと思ったのがきっかけで、続けても心が折れないものといえばShopifyのコーディングしかないなぁ。。。ということで頑張ってみます♪ 初回は言語切替ボタンの設置。デフォルトではフッターに言語切替セレクタ設定機能が備わっていますが、ヘッダーにも欲しい＞＜ Dawnでは初めから言語

¥500
まりん | Shopi…

[Shopify]チェックアウトボタンに同意するチェックボックスを設置（Dawn）7/100

こんにちは。Shopify専門フロントエンジニアのまりんです。 新しい無料テーマのDawnテーマを使ってみました！！デフォルト時点でかなり使いやすいセクションが盛りだくさんで感激してます★ Shopify無料テーマでは今のところまだデフォルトで「同意する」チェックボックス機能がなく、カスタマイズしなければいけなく、Dawnでもやはり個別で設置する必要があります＞＜ ↓こんなのです↓ チェックボックスに□の場合は「購入」ボタンが押せません。 ✅するとボタンがアクティブに

¥1,000
まりん | Shopi…