マガジンのカバー画像

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

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

2022年3月の記事一覧

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

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

¥800

[Shopify]ブログ記事にライター表示!マスター化してタグで出しわけ(Dawn)36/100

こんにちは。Shopify専門フロントエンジニアのまりん(@crowd37cord)です。 ブログ記事に記事ごとにライターの情報を表示できるセクションを作ってみました♪アカウント名を執筆者として表示することはできるのですが、1アカウントで複数で運用していると、全ての記事の作者が同じアカウント名になってしまうので、タグと紐づけて出しわけできるようにしてみました! タグで出しわけすれば、テンプレートも一つでOKですしラクチン^^ ライターだけではなく、お店情報や商品情報にして

¥800

[Shopify]検索結果を商品のみ表示できるようにする(Dawn)35/100

この記事はメンバーシップに加入すると読めます

[Shopify]PC版は右側にカート追加ボタンを固定して商品詳細本文を画像の下のエリアに表示!SPでは画面下で固定!(Dawn)34/100

こんにちは。Shopify専門フロントエンジニアのまりん(@crowd37cord)です。 今回は、PCでは商品画像の下に商品説明の本文を表示させて、カートボタンなどのその他の機能は固定し、スクロールすると追従するようにしてみました。SPではカート追加ボタンだけ画面下で固定。 ✔️今回のゴール先日投稿したSlick.jsで自動スライドにしています。 ✔️CMSの特徴既存のブロックに、「キャッチ」と「商品内容」というブロックを追加しました♪ メタフィールドから設定できます

¥1,000

[Shopify]Slick.jsを使って商品画像を自動スライドにしてみる!商品ページ編(Dawn)33/100

こんにちは。Shopify専門フロントエンジニアのまりん(@crowd37cord)です。 今日は商品ページの商品画像を自動スライドにしてみました♪ 以前、Debutテーマでご紹介したSlick.jsを今回も使用しようと思います。 ✔️今回のゴール ✔️手順Step1 Slickファイルダウンロード ▼Slick.jsを使います https://kenwheeler.github.io/slick/ get it nowをクリック Downloadボタンをクリ

¥800