マガジンのカバー画像

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

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

[Shopify]コピペで簡単！タグ検索セクションを追加（Dawn）4/100

こんにちは。まりん(@crowd37cord)です。 あれば便利、タグをポコポコ簡単に挿入できるセクションを作成しました♪ デザインは全部で6種類。 タグをクリックするとタグ名でサイト内検索します。動作確認はこちら ✔︎今回のゴール✔︎タグセクションの特徴&使い方❶セクションを追加をクリック ❷タグ検索を選択 　「タグ検索」は今回のテンプレートを設置すると表示されます。 ＼タグリストのセクション内を設定していきます／ ❸タグの形を選択 ❹楕円　　｜両端が丸ま

¥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…

[Shopify]コピペで簡単！クリックするとポップアップ表示（Dawn）６/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日は画像クリックするとモーダルが表示されるセクションを作成しました。モーダル内は、大きめ画像とサムネイル、見出し、サブテキスト、商品詳細、ボタンの機能を設置。真ん中にドーンと画像1枚挿入したい時に使えます。セクションの背景も画像入れられます。 動作確認はこちら（パスワード:stahsk40jw1Mf） ✔️今回のゴール＼画像をクリックするとモーダル表示　PC／ ＼画像をクリックすると

¥1,200
まりん | Shopi…

[Shopify]背景にYouTubeを埋め込んで自動再生 jQuery版（Dawn）2/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 Dawnのテーマで「動画」セクションがあり、YouTubeを表示できるようにはできますが、再生ボタンが表示されていて再生ボタンを押さないと動きません。 そこで、背景にYouTubeを埋め込んでページを開いたときに自動再生されるセクションを作成♪ 今回はjQueryのプラグイン「jquery.mb.YTPlayer」を使用してます。 ✔️今日のゴール背景にYouTubeを埋め込んでいます

¥500
まりん | Shopi…

[Shopify]スクロールするとカート追加ボタンが右下に固定してついてくる(Dawn)5/100

こんにちは。まりん(@crowd37cord)です。 商品ページで商品説明が多いとスクロールしていくうちに「カートボタン」が見えなくなって、最後まで説明を読むと、上までスクロールする必要があり、めんどくさい。ユーザーフレンドリーではありませんよね。 そこで今回はDawnテーマでカートがついてくるようにしてみました。 ※コードの解説はしてません。 ✔︎今回のゴール＼PCだと右横にふわっと出現／ ＼スマホは一番下に固定／ 上下スクロールしてトップの「カート追加」ボタン

¥1,200
まりん | Shopi…