Yahoo!ショッピングでのショップの売上を増やしたい。
ショップを自由にデザインしたい。
という方へ向けて、Yahooショッピングで使えるショップページ作成のテクニックをまとめました。
現役担当者の僕が実際に行なっているYahooショッピングのショップ作成テクニックです。
項目ごとにまとめていますのでどうぞご覧下さい。
Yahooショッピングのページを画面幅いっぱいにする方法
ヘッダーを画面幅いっぱいにする方法
外部CSSを使うことで固定されているヘッダーの幅を画面幅いっぱいに変更することができます。
≫Yahooストアクリエイターにてヘッダーを画面幅いっぱいにする方法
カスタムページを幅いっぱいにする方法
カスタムページ（テンプレート3）もヘッダーと同様、外部CSSを使って画面幅いっぱいにすることができます。
≫Yahooショッピングのカスタムページを画面幅いっぱいの100%表示にする方法
パソコンでYahooショッピングのスマホページを確認する方法
パソコン利用時にYahooショッピングのスマホページを確認することができる方法があります。
スマホで確認する手間が省けるため、ページ作成者には必須の小技です。
また、サーバーにアップロードする前に確認できることも利点です。
Yahoo!ショッピングのストアURL一覧
ストアトップ、カテゴリ、カスタムページなどYahooショッピングのページを作成する上で必要な各ページのURLをまとめました。
PayPayモールのURLと同時掲載していますので、YahooショッピングからPayPayモールへ移行するときの参考にもなると思います。
ブックマークなどでページを保存するのがおすすめです。
ストアクリエイターでJavaScriptを使う裏技
ストアクリエイターでは本来使用できないJavaScriptを使う裏技があります。
商品ページやカテゴリページでJavaScriptを使いたい場合に必須の方法です。
Yahooショッピングのカートを外部化する方法
Yahooショッピングのトリプルページや外部サイトにYahooショッピングのカートを設置したいと思ったことはありませんか？
Android版PayPayモール風デザインで外部カートを作る手順を解説します。
記事後半にはサンプルも掲載していますので参考にどうぞ。
【Yahooショッピング】検索窓のカスタマイズ方法
「Yahooショッピングが用意しているショップ内検索窓はショップのデザインにそぐわない。自前でショップに合う検索窓を用意したい。」というお悩みを解決します。
JavaScriptを使い、テキストボックスの検索ワードを一括削除するボタンも実装できます。
スマホページに横スクロールを設置する
横スクロールとはスマホでよく使用されているデザインレイアウトです。
要素を横に敷き詰め、横にスクロールすることで画面外の要素も見ることができます。
よく使われるのはランキングやおすすめ商品です。
ブラウザのスマホページだけでなく、アプリの商品ページでも使用できるのが特徴です。
≫Yahooショッピングのスマホページに横スクロールを設置する
モーダルウィンドウ
JavaScript、<inputタグ>不使用のモーダルウィンドウです。
Yahoo!ショッピングの商品ページ（パソコン版）に設置できます。
【Yahooショッピング】商品画像のサイズをURLで指定する
Yahooショッピング商品画像では、URLに含まれるアルファベットを変更すると商品画像のサイズも変更することができます。
アルファベットは特定のサイズと紐付けられており、例えば「k」なら400×400の画像サイズです。
控えていないと忘れるので備忘録としてまとめました。
アルファベットと画像サイズの組み合わせを忘れた時、活用してください。
Yahooトリプルにアップロードできないファイル名とは？
Yahooトリプルにアップロードするファイル名には含めてはいけない「記号」があります。
対応策は下の記事で紹介しています。
≫ヤフートリプルにアップロードできないファイル名の原因と対応策
テキストリンク色に好きな色を指定する
自店舗にあるテキストリンクの色を自分の好きな色に変更することができる方法を解説します。
CSSをコピペするだけで実装できます。
ショップのカラーや扱う商品に合う色に変更してショップに統一感を出しましょう。
以上、Yahooショッピングのショップ作成テクニックまとめでした。
コメント