「Shopifyの検索バーをもっと丸みのある形にする方法は？」

palash palash

Aug 07, 2024

Rate this article

Share this article

デフォルトのShopify検索バーは長方形です。これをもっと丸みを帯びた形にするには、Shopify検索バーのborder-radius属性を変更する必要があります。これにより、Shopify検索バーがより丸みを帯びた形になります。アプリのフィルターと検索とともに、これによりストアの視覚的な美しさが向上します。ExpertRecのShopify検索バーアプリは、非常に優れたアプリの一つです。それはスマート検索アプリで、ストアでインスタント検索を提供します。ライブ検索Shopifyアプリは、すべてのShopify製品検索を追加するのに5分もかかりません。

Shopifyの検索アプリは非常に重要です。スマート検索アプリは今や必需品です。Shopifyアプリの音声検索機能により、ユーザーは簡単に希望の商品を見つけることができます。

Shopify検索バーをより丸みのある形にするための手順

Shopify管理パネルにログインします。
オンラインストア→設定→テーマ→アクション→コードを編集に移動します。
assets→theme.scss.liquidファイルを開くに移動します。
theme.scss.liquidのコードファイルで、「search-bar__input」を約4557行目で検索します。

以下のコードでborder-radius: 0px;をborder-radius: 50px;に変更します。より丸みを帯びた形にしたい場合は、

.search-bar__input {
  background-color: transparent;
  border-radius: 50px;
  color: $color-text;
  border-color: transparent;
  padding-right: calc(35em / 16);
  width: 100%;
  min-height: 44px;