collection list -align arrows to the right

Store Design
, ,
1

hey,

i need your help aligning the arrows of the collection list to the right as show in the image.

thanks in advance.

batyaJandMore_0-1736067387778.png
batyaJandMore_0-1736067387778.png1152×430 444 KB

https://z8p66wloo6n24dcm-65779892391.shopifypreview.com

1 Like
2

Hi @batyaJandMore

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
.collection-list-wrapper h3.card__heading > a {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
}​

Here is the result:

image_720.png
image_720.png720×319 161 KB

I hope this helps

Best,

Daisy

3

Hey Daisy,

want can i do to flip the arrows side?

batyaJandMore_0-1736070248155.png
batyaJandMore_0-1736070248155.png1260×391 396 KB

i want the arrow head to the left

4

You can refer to this css:

.collection-list-wrapper .card__heading a {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.collection-list-wrapper .card__heading .icon-wrap svg {
  transform: rotate(-180deg);
}
5

HI @batyaJandMore

Please add this code more

.collection-list-wrapper h3.card__heading > a span.icon-wrap > svg {
    transform: rotate(180deg);
}

image_720.png
image_720.png720×390 72.2 KB

I hope this helps

Best,

Daisy