マガジンのカバー画像

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

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

#オンラインショップ

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

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

¥1,500

[Shopify]まとめ買い商品「一括カート追加」♪ディスカウント商品をメタオブジェクトでデータベース化してバンドル的なセクション(メタオブジェクト対応) #110

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 メタオブジェクトにデータ化した商品一覧を選択して表示させて、複数選択して一括でカートに追加できるセクションを作成。ディスカウントでXとYをまとめて購入すれば20%OFFみたいなキャンペーンなどでお役立ち。 商品ページやTOP、ブログなどいろんなところに挿入できるので購入チャンスは増えるかも。 ✔️今回のゴール複数選択してカートに追加できる! 🔸CMSの特徴

¥1,500

[Shopify]商品ページの画像のサムネイルを縦並びにしてみる・PCのみ(Dawn)100/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今回は商品ページの画像のサムネをメイン画像の左横に縦並びで表示できるようにしてみました。PCのみ縦で表示され、SPはデフォルトのままです。 ✔️今回のゴール🔸CMSの特徴 今回は既存のファイルをそのまま使用して、メディアの選択のところをサムネ関連を削除して「縦並び」という選択肢に変更しました。 ✔️設置方法Step1  新規セクション作成 1️⃣管理画面>テーマ>コードを編集>セクシ

¥1,000

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

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 LINE登録へ促す用のシンプルなLPです。ブロックは3つだけなので上手く組み合わせればユーザーフレンドリーな導線になるのではないかなと思います^^ ✔️今回のテンプレート==== パソコン ==== ==== スマホ ==== ◆CMSの特徴 ブロックは4種類 💡共通設定 💡ファーストビュー ・画像の設定のみ  →正方

¥1,980

[Shopify]オリジナルセクション5 #A-3

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 オリジナルセクションシリーズ🎵 斜めの背景とスクロールすると画像が横スライドで表示されてオシャレ😎 ✔️レイアウトの特徴 ========= パソコン ========= ========= SP ========= 🔶CMSの特徴 ========= 各ブロックごと =========

¥1,200

[Shopify]アプリを使わず商品メタフィールドで期間限定商品の商品ページに発売開始&終了日時を指定して発売期間中のみに購入ボタンを表示し、それ以外は非表示にしてみる(Dawn)99/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 アプリを使わずに商品のメタフィールドの日時を使って、期間限定商品の商品ページで販売期間中だけ購入ボタンを表示させて、発売前と発売後には購入ボタンは非表示にして、テキストのみを表示させるようにしてみました。 例えば、2023年8月10日〜8月29日までの間だけ対象商品を購入できるようにしておきたい場合に自動的に発売開始日から終了までの期間に購入ボタンが表示されて、開始前と終了後にはそれぞれボ

¥1,000

[Shopify]メタオブジェクトとメタフィールドを使って各商品にアレルギー項目のテーブルを作ってみる(Dawn)98/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日はアレルギー項目の表を作成してみます。メタオブジェクトにマスターの項目(卵、牛乳などなど)を登録しておいて、商品のメタフィールドでメタオブジェクトを呼び出して、各商品で対象の項目を選択するとその商品のページのアレルギー表示の対象項目の背景が赤色に選択されているというブロックを作ってみました^^ サイズ表などにも応用できるのでぜひ試してみてください🎵 ✔️今回のゴール商品ページにアレル

¥1,200

[Shopify]商品ページに前後の商品へ遷移するボタンを設置できるセクション(Dawn)95/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 商品詳細ページに「次の商品・前の商品」ボタンを追加し、矢印ボタンをホバーすると前後の商品の画像・タイトル・価格がひょろっと出てくるようにしてみました♪ コレクションAllの商品が表示されます。 ✔️今回のゴール==== パソコン ==== ==== スマホ ==== 🔸CMSの特徴 「商品前後ページ遷移」をクリック ✔️設置手順Step1  新規セクション作成 1)管理画面>テ

¥1,200

【GAS】各顧客のメモ情報をスプレッドシートから更新#20 (Shopify API + GoogleAppsScript)

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 Shopify APIとGoogleAppsScript (GAS)を使って、スプレッドシートから顧客管理画面のメモ欄をスプレッドシートから更新してみます^^ ✔️今日のゴール対象顧客のB 列にメモを記載して、更新に☑️を入れると、 顧客管理のメモが更新され、スプレッドシートのチェックは初期値に戻ります。 ✔︎作成手順◆事前準備 🔸ShopifyAPIキー取得 下記のStep3まで

¥1,200

[Shopify]サイト全体の背景に画像を固定で設定してみる(Dawn)94/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日はShopifyの設定にJSONを追加して、サイトのBodyの背景に画像を設定できるようにしてみました^^ ✔️今回のゴール 🔸CMSの特徴 「設定」に背景画像が出現 画像設定 対象箇所下記で設定すれば透過になります。 background: transparent; ✔️設置手順Step1  設定フォルダ内のSchemaを追加 1)管理画面>テーマ>コード編集>設定>s

¥800

[Shopify]オリジナルセクション2

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 おしゃれなセクションテンプレート♪ ✔️レイアウトの特徴========= パソコン ========= ========= スマホ ========= 🔶CMSの特徴 ✔️設置手順Step1  新規セクション追加 管理画面>テーマ>コード編集>セクション>新規作成

¥1,200

[Shopify]広告バーのテキストをフェイドインしてループさせる・リンク無し(Dawn)93/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 広告バーをテキストフェイドインにしてみました^^ フェイドインバージョンはリンク付きではないのでクリックはできません。 数秒おきにテキストが流れるのでちょっとしたオススメを流しておきたいときに使えます🎵 ✔️今回のゴール 🔸CMSの特徴

¥800

[Shopify]ホットスポット&ツールチップを設定できるセクション(Dawn)84/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日は画像の上にホットスポットを置いてPCはホバー、SPはクリックするとツールチップが出てくるセクションを作りました♪ ✔︎今日のゴールDemoはこちら PW:stahsk40jw1Mf PCの場合はホバー、SPはクリックするとツールチップが表示されます。 商品を選択すると ・商品画像 ・商品タイトル ・ベンダー ・価格 が自動的に表示されます。 ◆CMSの特徴 ===== 共通設定

¥1,200

【GAS】取得した注文情報でZチャートを作る#13 (Shopify API + GoogleAppsScript)

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 前回の続きで、取得した注文情報をどうやって活用しようかなぁと思い、Zチャートを作ってみました^^ 今回の記事はAPIで注文情報取得してスプレッドシートに反映するコードは記載しません。前回のをそのまま使用するので、ただのスプレッドシートの関数のみになります。 ✔︎今回のゴール ✔︎作成手順◆前回の続きなので下記の記事のコードを入れておく必要があります ひとまず、注文情報を取得している状

¥800