How can I move the 'Sale' badge to the upper right corner in Dawn theme?

Store Design
1

Hey there!

Quick question - I am trying to move “Sale” badge from bottom right corner (as it is by default) to upper right corner. I am pretty new to HTML and CSS but I am getting my head around. Can someone point me in the right direction where would I modify this?

I will assume it will be a div class code.

Any help would be appreciated!

Thanks!

2

Hello @ecom_arthur ,

You can add the below style to the bottom of the component-card.css file in your code editor to reposition the badge to the top right

/* Re-position sale badge on Dec. 01, 2021 */
.card--text-only .card__content+.card__badge {
  margin-top: 1rem;
}
.card__badge {
  bottom: unset;
  top: 0.3rem;
  left: unset;
  right: 0;
}
.card--text-only .card__badge {
  align-self: flex-start;
  justify-content: end;
  grid-row: 1;
}
/* End of Code for re-positioning the sale badge */

It will look like the below screenshot

21-12-o90ri-aitzq.png
21-12-o90ri-aitzq.png410×476 7.95 KB

3

Hello @ecom_arthur ,

  1. Go to Online Store->Theme->Edit code
  2. Asset->component-card.css-> paste bellow code in bottom of file
.card__badge {
    bottom: 100% !important;
    top: 10px !important;
    left: 80% !important;
    right: 1% !important;
}

Thanks

4

Hey Sam,

Thanks for the help! Worked like a charm! Should I comment out the old CSS settings or it does not matter at this point?

Best,

Arthur.

5

Hey again @ecom_arthur

It would be best not to delete any old CSS. as long as you add the new CSS style at the bottom of the file, it will overwrite the existing styles.

Best regards :slightly_smiling_face: