マガジンのカバー画像

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

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

[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）12/100

こんにちは。まりん(@crowd37cord)です。 以前、ポップアップ表示の記事をご紹介しました。 今日はパート２で、複数カードを追加して各カードをクリックするとモーダルが表示されるテンプレートを作成しました♪ サンプルページはこちら (パスワード:stahsk40jw1Mf) ◆前回ご紹介した記事 ✔️今日のゴール ◆本セクションテンプレートの機能 ✔️設置手順１）管理画面＞コード編集＞Section＞新しいSection追加 ２）新規Sectionファイル内

¥1,200
まりん | Shopi…

[Shopify]コレクションでランキングページを作る！商品購入に迷ってる方へのアプローチ（Dawn）19/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 コレクションページを活用してランキングページを作成しました♪ 私もいつもネットショッピング利用する時、どの商品を購入しようか迷った場合はランキングを参考にします。 ✔️今回のゴールランキングはStep3のコレクションで設定した商品順に表示され、ランキング番号は自動的に付与されます。 ◆ランキングバッジタイプ ✔️手順Step1　Section新規追加 管理画面＞テーマ＞コードを編集

¥800
まりん | Shopi…

[Shopify]セール商品に割引率or金額を表示する！コレクション編（Dawn）20/100

こんにちは。Shopify専門フロントエンジニアのまりん(@crowd37cord)です。 セール商品は自動的にセールのバッジや取り消し線が表示されますが、〇〇円OFFとか●％OFFなど、どれくらいディスカウントされたのか、パッと見わかりにくいので、自動的に計算してコレクションのセール商品に表示できるようにしてみました♪ いくら安くなったのか、お得感がすぐにわかります！ ◆商品ページ編はこちら ✔️今日のゴール ✔️手順❶Schemaに追記 main-collec

¥500
まりん | Shopi…

[Shopify]リピーター率UPを狙う小ワザ！ホーム画面追加のOGP画像を表示（Dawn）16/100

こんにちは。Shopify専門フロントエンジニアのまりん(@crowd37cord)です。 以前、Shopへのアクセスをショートカットできるように、DebutテーマでiPhoneホーム画面追加をした時に、ファビコン画像を反映させる方法をご紹介しました。 Dawnでも問題なく設置できました♪ Debutと変わらないんですが、一応Dawn用にもご紹介しておきます。 アプリみたいで良い感じ♪ ユーザーにブックマークしてもらえればリピーター率がUPするかも。 ✔️手順❶管理

まりん | Shopi…