【Yahooショッピング】ショップ作成テクニックまとめ

Yahooショッピングのショップ作成テクニックまとめ Yahooショッピング
  • Yahooショッピングでのショップの売上を増やしたい
  • ショップを自由にデザインしたい

という方へ向けて、Yahooショッピングで使えるショップページ作成のテクニックをまとめました。

 

現役担当者の僕が実際に行なっているYahooショッピングのショップ作成テクニックです。

項目ごとにまとめていますのでどうぞご覧下さい。

スポンサーリンク

Yahooショッピングのページを画面幅いっぱいにする方法

ヘッダーを画面幅いっぱいにする方法

外部CSSを使うことで固定されているヘッダーの幅を画面幅いっぱいに変更することができます。

Yahooストアクリエイターにてヘッダーを画面幅いっぱいにする方法

Yahooストアクリエイターにてヘッダーを画面幅いっぱいにする方法

カスタムページを幅いっぱいにする方法

カスタムページ(テンプレート3)もヘッダーと同様に外部CSSを使って画面幅いっぱいにすることができます。

Yahooショッピングのカスタムページを画面幅いっぱいの100%表示にする方法

Yahooショッピングのカスタムページを画面幅いっぱいの100%表示にする方法

【Yahooショッピング】検索窓のカスタマイズ方法

「Yahooショッピングが用意しているショップ内検索窓はショップのデザインにそぐわない。自前でショップに合う検索窓を用意したい。」というお悩みを解決します。

記事ではJavaScriptを使い、テキストボックスの検索ワードを一括削除するボタンを実装しました。

【コピペでできる】Yahooショッピングの検索窓

【コピペでできる】Yahooショッピングの検索窓

スマホページに横スクロールを設置する

横スクロールとはスマホでよく使用されているデザインレイアウトです。

横に要素を敷き詰め、画面外にある要素は横にスクロールすることで画面外の要素も見ることができます。

よく使われるのはランキングやおすすめ商品です。

記事ではブラウザのスマホページだけでなく、アプリの商品ページでも使用できる横スクロールを作成しました。

Yahooショッピングのスマホページに横スクロールを設置する

Yahooショッピングのスマホページに横スクロールを設置する

スポンサーリンク

【Yahooショッピング】商品画像のサイズをURLで指定する

Yahooショッピング商品画像では、URLに含まれるアルファベットを変更すると商品画像のサイズも変更することができます。

アルファベットは特定のサイズと紐付けられており、例えば「k」なら400×400の画像サイズです。

控えていないと忘れるので備忘録としてまとめました。

アルファベットと画像サイズの組み合わせを忘れた時、活用してください。

Yahooショッピングの商品画像サイズまとめ

Yahooショッピングの商品画像サイズまとめ

Yahooトリプルにアップロードできないファイル名とは?

Yahooトリプルにアップロードするファイル名には含めてはいけない「記号」があります。

記事では対応策も紹介しています。

ヤフートリプルにアップロードできないファイル名の原因と対応策

ヤフートリプルにアップロードできないファイル名の原因と対応策

パソコンでYahooショッピングのスマホページを確認する方法

パソコン利用時にYahooショッピングのスマホページを確認することができます。

スマホで確認する手間が省けるため、ページ作成者には必須の小技です。

また、サーバーにアップロードする前に確認できることも利点です。

楽天、ヤフーショッピングのスマホページをPCで表示する方法

楽天、ヤフーショッピングのスマホページをPCで表示する方法

 

以上、Yahooショッピングのショップ作成テクニックまとめでした。

コメント

タイトルとURLをコピーしました