メタフィールドで追加したNewラベルの位置を変更したい

日本語 ディスカッション 技術的なQ＆A
1

お世話になります。

現在、メタフィールドで登録したNEWラベルを商品一覧画面に表示しています。

こちらは画像左下に表示されるのですが、右上に表示させることは可能でしょうか。

現在のコードは下記の通りです。ご意見いただけますと幸いです。

  <div class="card__badge {{ settings.badge_position }}">
        {%- if card_product.available == false -%}
        <span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">
            {{'products.product.sold_out' | t }}
        </span>
        {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}

        <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">
            {{'products.product.on_sale' | t }}
        </span>
        {%- endif -%}

        {%- if card_product.metafields.newarrival_product.tag != blank -%}
        <span class="badge badge--top-right color-{{ settings.sale_badge_color_scheme }}">
            {{card_product.metafields.newarrival_product.tag }}
        </span>
        {%- endif -%}
    </div>
2

はじめまして、Takaseと申します。

ラベルを右上に表示させたいとのことですが、こちら可能かと思います。

ちょっと情報量が少ないので、確実にこうすれば実装できるという回答が難しいのですが、

・右上に配置したいラベルの要素を囲っているいずれかの要素のスタイルにposition: relative; を付与する

・右上に配置したいラベルにつけているクラス（badge–top-rightなど）に対して下記のようなスタイルを記述する

.badge--top-right{
  position: absolutel;
  right: -10px;
  top: -10px;
}

上記のような実装を取り入れることで、実現することができるかと思います。

※実装全体を見ているわけではないので、要素の位置を調整したりすることが必要な可能性は高いです。