商品ページにある「おすすめ商品」の真横に「最近閲覧した商品」のアプリブロックを入れる方法

Topic summary

商品ページで「おすすめ商品」と「最近閲覧した商品」を横並びのタブ形式で表示したいという相談。

現状の課題:

  • Oc Recently Viewed Productsアプリを導入したが、2つのブロックが縦に並んでしまい、ごちゃごちゃした印象になる
  • 他サイトを参考に、タブ形式で切り替えられるUIを実現したい

回答内容:

  • タブ機能を実現する専用アプリは見つからない可能性が高い
  • 実装するには、両方のブロックを有効にした状態でJavaScriptとCSSによるコードカスタマイズが必要
  • 技術的な知識が求められるため、開発パートナーへの相談を推奨

結論:
質問者は自力での実装を希望していたが、難易度が高いため開発パートナーに相談する方向で検討中。

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.

お世話になります。

自社の商品ページには「おすすめ商品」のブロックを入れていますが、「最近閲覧した商品」のブロックにもそのページに追加したく、Oc Recently Viewed Productsアプリを入れました。

しかし、そのままブロックを追加すると、「おすすめ商品」と「最近閲覧した商品」は2列となり、ごっちゃ感がすごくありますので、控えたいです。

そのため、別のサイトに参考して「おすすめ商品」の横に「最近閲覧した商品」というタブを追加したいです。
現状:

目指したい:

これをうまくできる方法や、実施できるアプリがあればご教授を願います。

よろし

@Yabu-t

アプリを探してみましたが、簡単には見つからなさそうでした。

(もしくは、ない、かもしれません。)

もし、実装するのであれば、

「おすすめ商品」のブロックと「Oc Recently Viewed Products」のアプリブロックを、

両方有効にした状態で、

コードカスタマイズを行い、JavaScriptやCSSでタブを実現することになるかと思います。

実装知識が求められますので、

開発パートナー様がいらっしゃれば、そちらにご相談するのが良いかと思います。

ご参考まで。

(キュー田辺)

1 Like

ご丁寧にありがとうございます。

探していただきありがとうございました。?

こちらなりにも探してみましたが、本当に存在していませんね。

なるべく自分たちで行いたいのですが、難しそうですね。

開発パートナー様に相談してみます。