ななこま｜独学ShopifyでECサイト構築

エンジニア経験なく独学でShopifyを使ってECサイトを複数構築しています ▼最近制…

ななこま｜独学ShopifyでECサイト構築

エンジニア経験なく独学でShopifyを使ってECサイトを複数構築しています ▼最近制作したECサイト SIDEE（https://sidee.jp）

Shopify｜商品ページにギフト包装の選択肢を追加し、カートと明細書に反映する（Dawn）

こんにちは、ななこまです！ 今回は、商品ページに熨斗やラッピング等を選択する項目を追加し、カートページと明細書に反映する作業を行っていきます。 main-product.liquidにコードを追加する下記コードを追加します。 {%- when 'noshi' -%} <p style="font-size: 13px; margin: 2.5rem 0 -1rem; font-weight: 600;"><span style="color: #9e2b2b;">▼</s

ななこま｜独学Shop…

    • Shopify｜コラージュの画像にリンクを貼る（Dawn）

      こんにちは、ななこまです。新年明けましておめでとうございます。 今年は、関わらせていただいているECサイトの売上を上げることに全力を注ぎます！noteもメモ程度に更新しますので、見ていただいている方のお役に立てれば嬉しい限りです。 今回は、Dawnテーマのコラージュセクション>画像ブロックにリンクを貼る作業を行っていきます。 1. collage.liquidを編集コード編集>collage.liquidを選択します。 {%- when 'image' -%} 　<di

      ななこま｜独学Shop…

      • Shopify｜会員登録画面に誕生日欄を作成し、顧客メタフィールドに反映する（Dawn）

        こんにちは、ななこまです。 ECサイトの誕生日特典メール開封率は、通常のメール開封率より約10%高くなるという話を耳にしたので、今回は、誕生日を顧客メタフィールドに反映するまでを実装していきたいと思います。 コードを追加するコードを編集 > 「main-register.liquid」に下記のコードを追加します。 <p style="font-size: 1.1rem; margin-bottom: -1.8rem; text-align: left;">誕生日</p>

        ななこま｜独学Shop…

        • Shopify｜NEW（新着）バッジを表示する（Dawn）

          こんにちは、ななこまです。 今回は、「新着」コレクション内の商品に「NEW」バッジを表示させてみました。（特定商品でなく、特定コレクションなので注意） Shopify初心者さんもオールコピペで出来ますが、バックアップをとってお試しください！ 《 今回やったこと 》①card-product.liquidに追加する ②featured-collection.liquidに追加する ③cssでアレンジ ①card-product.liquidに追加する コード編集＞セク

          ななこま｜独学Shop…

        Shopify｜商品ページにギフト包装の選択肢を追加し、カートと明細書に反映する（Dawn）

        ななこま｜独学ShopifyでECサイト構築

          Shopify｜@cosme shoppingみたいなランキングアイコンを付けてみた（Dawn）

          こんにちは、ななこまです。 今回は、Shopify「Dawn」テーマの特集コレクションに@cosme shoppingのようなランキングアイコンを付けてみました。 コード初心者の方にも分かりやすいかと思いますので、ぜひ試してみてください◎ 《 今回やること 》①「featured-collection.liquid」を編集する ②「ranking.css」を追加する 目標がこちら↓ 1. 「featured-collection.liquid」を編集する コード編集＞

          ななこま｜独学Shop…

          Shopify｜@cosme shoppingみたいなランキングアイコンを付けてみた（Dawn）

          ななこま｜独学ShopifyでECサイト構築

          Shopify｜お知らせ（新着）セクションを追加する（Dawn）

          こんにちは、ななこまです。 今回は、サイトでよく見かける「お知らせ」のセクションを作成します。 オールコピペでOKなので、Shopify初心者さんでも大丈夫です！ 《 今回やったこと 》①お知らせ.liquidを作成する ②お知らせ.cssを追加してデザインを整える ③カスタムcssでアレンジ ④おまけ ①お知らせ.liquidを作成する コード編集＞セクション＞新しいセクションを追加する　を選択し、 「new-news.liquid」を作成。下記コードをコピペしま

          ななこま｜独学Shop…

          Shopify｜お知らせ（新着）セクションを追加する（Dawn）

          ななこま｜独学ShopifyでECサイト構築

          Shopify｜北欧暮らしの道具店のカテゴリ一覧を真似してみた（Dawn）

          こんにちは、ななこまです！ 今回は、休憩中に見ていた「北欧暮らしの道具店」さんのカテゴリ一覧が可愛かったので真似してみました。もはや趣味。 が、正直に言うとコード編集はほとんど無く、画像を作成すれば90%完成しました、、 Shopify初心者さんでも出来ます！ 《 今回やったこと 》①画像を作成する ②セクションにコレクションリストを追加 ③各コレクションに作成した画像をアップロードする ④テキストを消す←時間がなかったので、テキストを不透明にして消しただけ ①画像を

          ななこま｜独学Shop…

          Shopify｜北欧暮らしの道具店のカテゴリ一覧を真似してみた（Dawn）

          ななこま｜独学ShopifyでECサイト構築

          Shopify｜ZOZOTOWNのリストメニューを無料テーマで真似してみた（Dawn）

          こんにちは、ななこまです。 今回は、前回同様にリストメニューをいじってみました。 わたしはエンジニアでもプログラマーでもなく、難しいことは正直わからないので、Shopify初心者さんにも分かりやすいように解説していきます！ 今回真似したいのは、矢印のあたり↓ ちなみにスタートは以下から始めます↓ それでは、スタート！ 1. 下線と右矢印アイコンを追加する 前の記事にも方法を記載していますが、改めて。 「component-menu-drawer」内で [ .js

          ななこま｜独学Shop…

          Shopify｜ZOZOTOWNのリストメニューを無料テーマで真似してみた（Dawn）

          ななこま｜独学ShopifyでECサイト構築

          Shopify｜リストメニューのデザインを変更する（Dawn）

          こんにちは、ななこまです。 今回は、Shopify「Dawn」テーマのリストメニュー（モバイル）を変更してみました。 コード初心者の方にも分かりやすいかと思いますので、ぜひ試してみてください☆ 1. メニューに下線を追加する コード編集で「component-menu-drawer」を選択。 [ .js .menu-drawer__menu li ]を検索し、[ border-bottom」を追加します。 今回はカラーを#e0e0e0にしましたが、変更可能です◎ .j

          ななこま｜独学Shop…

          Shopify｜リストメニューのデザインを変更する（Dawn）

          ななこま｜独学ShopifyでECサイト構築

          Shopify｜特集コレクションに商品タグを表示する（Dawn）

          こんにちは、ななこまです。 今回は、Dawnテーマのトップページに特集コレクションを追加し、コード編集でその商品カード内に商品タグを表示させました。では早速☺ 1. 商品ページにタグを追加する商品管理＞商品を選択し、右側 商品整理の1番下にある「タグ」という項目に追加したいタグ名を入れます。 これで下準備はOK 次にコードを編集していきます。 2. featured-collection.liquidの編集コード編集＞featured-collection.liqui

          ななこま｜独学Shop…

          Shopify｜特集コレクションに商品タグを表示する（Dawn）

          ななこま｜独学ShopifyでECサイト構築

          Shopify｜モバイルでのスワイプ表示のデザインを小さくする（Dawn)

          こんにちは、ななこまです。 今回はShopifyのセクション＞特集コレクションでモバイルのスワイプ表示を有効にした際、もう少し全体のサイズを小さくしたいなと思ったので、やってみました。 ①セクションを設定する オンラインショップのカスタマイズ画面＞特集コレクション＞モバイルでスワイプを有効にするに✔を付け、モバイルでの列数を2列にします。 そうすると、上記画像の左側のようにスワイプできるようになりました。 ②コードを編集する コードを編集する＞base.cssを選択

          ななこま｜独学Shop…

          Shopify｜モバイルでのスワイプ表示のデザインを小さくする（Dawn)

          ななこま｜独学ShopifyでECサイト構築

          Shopify｜スライドショーに影を付けて立体感を出す（Dawn）

          こんにちは、ななこまです。 今回は平面のスライドショーに影を付けて、立体的にしてみました。 テンプレートの編集画面にカスタムcssが付いたおかげで、 コード編集をせずに簡単にデザインを変更できます。 1. テンプレートでスライドショーを追加する 2. スライドショーをクリック→カスタムcssに下記を追加 .slideshow { box-shadow: 10px 10px 15px -15px;} ↑上記だと薄めの影になりますので、pxを変えてお好みの濃さに調整し

          ななこま｜独学Shop…

          Shopify｜スライドショーに影を付けて立体感を出す（Dawn）

          ななこま｜独学ShopifyでECサイト構築

          Shopify｜1時間でBOTANISTのモバイルトップを作ってみた

          こんにちは、ななこまです。 仕事の休憩時間に、BOTANISTさんのWebサイトトップをShopifyで真似して作ってみました。（下書き作成） 時間の関係で、ヘッダーはロゴのみ変更、画像はコピペです。 トピックス横のスクロールバーは時間があるときに挑戦してみようと思います。 ShopifyのDawnは、テンプレートでスライドショーが使えます。 今回は以下のように修正してみました。 スライドショーの設定1. テンプレートのスライドショーを設定 以下の画像のように設定しま

          ななこま｜独学Shop…

          Shopify｜1時間でBOTANISTのモバイルトップを作ってみた

          ななこま｜独学ShopifyでECサイト構築