How can I change the Posistion of the discount price?

[Ryusei_1]

How can I change the Posistion of the discount price?

https://ryusei.co.id/collections/august-vibes

become

[ProtoMan44]

@Ryusei_1 please put this css in code :

.product-card compare-at-price {
    display: none;
}
.product-card sale-price {
    color: inherit;
}
@media screen and (min-width: 700px) {
    .product-card__figure>.badge-list {
        inset-block-start: .5rem;
        inset-inline-start: calc(100% - 55px);
    }
}

[Dawood_Mirza_1]

Hi @Ryusei_1

1. Log in to Your Shopify Admin:

-Go to your Shopify store and log in using your credentials.

2. Navigate to the Online Store Section:

-In the left-hand menu, click on Online Store.

3. Access the Themes Section:

-Under the Online Store section, click on Themes.

4. Edit Code:

-In the Themes section, find the theme you are currently using and click on the Actions dropdown menu.
-Select Edit code from the dropdown.
-Locate the theme.css File:

5. Add the CSS Code:

Click on the theme.css file to open it.

Scroll down to the bottom of the file.

Copy and paste the following CSS code at the end of the file:

.badge-list.badge-list.badge-list--vertical {
width: 100% !important;
flex-direction: row-reverse !important;
}

Save Your Changes

Go back to your Shopify store and refresh the page to see the changes in effect. The discount price or any elements affected by this CSS should now be repositioned according to the new style rules.

Changed Preview

Hope to have helped you,
Dawood Mirza

[Vinsinfo]

@Ryusei_1 Please follow below steps to change the Position of the discount price.

1. From admin, go to “Online Store” → “Themes”.
2. Click action button from the current theme and select “Edit code”.
3. Go to “theme.css” file and locate .product-card__figure>.badge-list, it will be located in two places.
4. Under the element, remove the CSS code “.inset-inline-start: .5rem;” and paste the below code in both the occurrences.

.inset-inline-end: .5rem;

If you find hard to locate the element, just paste below code at the bottom of the theme.css file.

.product-card__figure>.badge-list {
    inset-inline-end: 0.5rem;
    inset-inline-start: auto;
}

Result will be like,

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.