Welcome to CodeCrew Infotech

shape shape
Shape Shape Shape Shape
Blog

How To Change Sale Badge Position In Shopify Dawn Theme

If you want to set the bages position then follow this code with all different position

First, open the component-card.css under the assets folder in the Dawn theme, then paste the code according to your requirments.

generally, Shopify set the default position as BOTTOM--LEFT

Here we show you 4 types of position 

Positions: 4

BOTTOM -- LEFT

BOTTOM -- RIGHT

TOP -- LEFT

TOP -- RIGHT

 

DEFAULT: BOTTOM -- LEFT

.card__badge {

    align-self: flex-start;

    grid-row-start: 3;

    justify-self: flex-start;

}

 

If you want to set the sale badge on the bottom right side then follow the below code:- 

/* BOTTOM -- RIGHT */

.card__badge {

    align-self: flex-end !important;

    grid-row-start: 3 !important;

    justify-self: flex-end !important;

}

 

If you want to set the sale badge in Top left side then follow the below code:- 

/* TOP -- LEFT */

.card__badge {

    justify-self: flex-start!important;

    align-self: auto !important;

    grid-row-start: auto !important;

}

 

If you want to set the sale badge in Top right side then follow the below code:- 

/* TOP -- RIGHT */

.card__badge {

    justify-self: flex-end!important;

    margin-bottom: 90px!important;

    grid-row-start: 1 !important;

    align-self: auto !important;

}