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

人気のShopifyコーディング100本ノックシリーズの続編。現在の100本ノックマガジンで100本記事投稿した後はこちらで更新していきます。「Shopifyコーディング100本… もっと読む

【月２回程度更新】1記事ずつよりも定期購読の方がお得。「Shopifyコーディング100本ノック（… もっと詳しく

¥1,200 / 月初月無料

運営しているクリエイター: まりん | Shopifyフロントエンジニア+SNSマーケティング

#コーディング

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

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

1,500

[Shopify]色んなボタンセクション・10通り（Dawn）83/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。ボタンだけのセクションを作ってみます♪ 全部で10通りの可愛いボタンを作れるセクションにしてみました！色や角を丸くしたりなどの組み合わせ次第で何十通りにもなります♪ ✔︎今回のゴール ◆ボタンタイプは１０種類シンプル、立体、立体影付に加え、下記のようなアニメーションボタンも♪ ◆左右に揺れる ◆上下に揺れる ◆背景スライド左からマウスをボタンの上に置くと左からスライドで

1,200

[Shopify]ギフト用ページに熨斗を選択できるセクションを追加！メタフィールドで表示・非表示切り替え（Dawn）81/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。今日はギフト用ページに熨斗の選択ができるようなセクションを作ってみました。propertyを使って熨斗の別途料金を請求しない場合に有効的なセクションになってます。熨斗の別途料金が追加される仕様ではないです。さらに商品ごとで表示、非表示を切り替えられるようにメタフィールドのTrue／Falseと連携してみました。今回はフルコードは載せてないです。 ✔︎今回のゴール＝＝＝＝＝＝＝＝

1,200

[Shopify]「新商品」バッジを表示して商品公開日から○日間を計算して自動で非表示にする（Dawn）58/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。今回は商品を公開した日にちを自動取得して、指定した日数の期間だけ「新商品」バッジを表示して、指定期間が過ぎるとバッジを自動的に非表示にするようにしてみました。例えば、公開後30日間はNew Arrivalのバッジを表示させておいて、31日目にバッジが非表示になっているという仕様になります。手動でやらなくても、各商品の公開日を自動取得して、CMSで希望の期間とバッジの画像を設定しておけば運

500

[Shopify]ランディングページ◆テンプレート7

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。今回のテンプレートはキャンペーン用というよりかは、AboutUsのページになります。 ✔️今回のテンプレートデモページ（stahsk40jw1Mf） ◆CMSの特徴ブロックは５種類 ◆共通設定強調したい文字を[<span class="color_highlight">xxx</span>]で囲む。HTMLで入力できるところで使用できます。 ◆ファーストビュー ◆ステートメ

5,800

[Shopify]各商品ページにその商品についてのお問合せフォームをモーダルで表示（Dawn）56/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。チャットbotのアプリとか入れてないので、商品について問合せを気軽にしてもらえるように各商品ページからフォームでその商品について問合せられるようにしてみました♪ フォームのこの商品についてのところに自動的に今開いている商品ページの商品名が表示され（固定）、ショップオーナーの受信メールにはお問合せ商品名が自動的に反映されています。購入に至らなくてもその後のアプローチに役立てられるかなぁと

800

[Shopify]カートで既にカート追加商品は商品一覧から非表示にできるクロスセルを作ってみる（Dawn）55/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。カートページにカートに表示したいコレクション一覧を作ってクロスセルっぽくしていましたが、さらに、追加されている商品IDと照合して、クロスセル側は既にカートに入っている商品は表示しないで他の商品のみ表示するようにしてみました。 ✔️今回のゴールデモページ（PW:stahsk40jw1Mf） https://malins-100.myshopify.com/ ✔️CMSの特徴※CMS作業中は

800

[Shopify]アプリを使わずにお気に入り機能を付ける（Dawn）51/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。アプリを使わないでお気に入り機能をつけてみようと思い作ってみました。クライアントさんでもたまにサードパーティアプリは使いたくないという所も結構ありますよね。手順が多いのでちょっとめんどくさいです。アプリを使った方が早いのでアプリ使っても問題ないという場合はアプリのほうが良いと思いますよ。 Debutなど他のテーマでもレイアウトとかは異なると思いますが使えると思うので一度試してみて下さい

1,000

[Shopify]ファーストビューに検索機能＋サジェストキーワードをポコポコ追加できるセクション(Dawn) 44/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。先日ご紹介した背景＋検索機能つきのメインビジュアルのセクションに、サジェストキーワードを追加できる機能をつけました♪ ↓前回の記事↓ キーワードはCMSから追加・編集・削除ができます♪ 検索窓だけあってもどんなキーワードで探したらいいのかわからず、結局使わないことって私はよくあるんですよね〜なので、そんな私のようなユーザー向けにサキーワードで教えてあげて、クリックすると、検索画面へ

800

[Shopify]メタフィールド使ってアップセル作成してみる♪商品カート追加時のポップアップに表示(Dawn) 41/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。メタフィールドを使ってアップセルを作成してみました。デフォルトでは商品ページで「カートへ追加」ボタンをクリックすると「カートへ追加されました」のモーダルが出てきます。そこに、この商品も一緒に買えば３０％オフとか、この商品購入している人はこちらも購入しているよ！という機能をつけてみます。まとめ買い訴求で売上アップを狙ってみる♪ ✔️今回のゴール ✔️設置方法Step1 　メタフィー

500

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

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

5,000

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

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

800

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

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。２年前からずーーーっとやってみたいと考えていた１ページのランティングページのテンプレート作り。１ページ全てをコーディングして、NoteにUPする！！と思い始めたNoteですが、飽き性な私は絶対続かないと思い、まずはパーツ作りからと思って始めた、「100本ノック」マガジン。そろそろノウハウも溜まってきたことですし、ここで掲載したコードを組み合わせて月１ペースぐらいでShopifyでペラ

3,000

[Shopify]コピペで簡単♪思わずMoreボタンを押したくなるようなワクワクするギャラリーセクション（Dawn）37/100

こんにちは。Shopify専門フロントエンジニアのまりん(@crowd37cord)です。今日は思わずボタンを押したくなるようなワクワクするギャラリーセクションを作ってみました♪Shopifyサイトが格段とオシャレに！ ✔️今回のゴール ◆PCレイアウト ◆スマホ&タブレットレイアウト ✔️CMS特徴◆大きい画像が左バージョンと右バージョンで選べます。 ◆画像大を選択 ◆コンテンツ１は上半分（画像大（右）バージョンも同様） ◆コンテンツ２は下半分（画像大（右

800