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

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

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

¥1,200 / 月初月無料

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

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

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

¥500

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

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

¥500

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

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

¥1,200

[Shopify]ヘッダー固定！ある程度スクロールするとヘッダー背景カラーが変わる（Dawn）25/100

Dawnのデフォルト機能で、「常時表示のヘッダーを有効にする」を有効にするとヘッダーを固定できるのですが、スティッキー機能なので、スクロール中は非表示になっています。今回はスクロール中もヘッダー固定で表示したくて、さらに、ある程度スクロールするとヘッダーの背景カラーを変更したかったのでヘッダーセクションに追加してみました♪ ✔️今回のゴール ◆ヘッダー背景透明　ON /OFF切替できる ◆スクロールするとヘッダー背景変わる　ON /OFF切替できる ✔️CMSの特

¥800

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

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