"Shop now" button in the Announcement Bar styling

Store Design
, , , ,
1

Hi guys,

Would like to style “Shop now” button in the Announcement Bar to look like a button. And reduce arrows size.

Screenshot 2023-01-13 134703.jpg
Screenshot 2023-01-13 134703.jpg1920×1040 162 KB

Thank you,

allianceautoproducts.com

2

hello @Alliance

Step 01:

  1. Go to your Store > Theme > click to edit code.
  2. find this file " theme.liquid" and open.
  3. Paste the code at the end of the file.

this idea helps you

3

Hello @Alliance

I would like to give you a solution to support you:

  1. Go to Online Store-> Theme-> Edit code
  2. Open your theme.liquid theme file
  3. Paste the below code before :
<style>
.giraffly_announce_two {
line-height: 25px;
padding-left: 15px !important;
padding-right: 15px !important;
border-radius: 6px !important;
}
.swiper-button-prev:after, {
font-size: 24px !important;

}
.swiper-button-next:after {
font-size: 24px !important;
}
</style>

Was my reply helpful? Please Like and Accept Solution. This mean alot to me.

1 Like
4

The button still not styled, arrows are not in the middle of the bar.

5

@Alliance

try this code

.swiper-button-prev:after, .swiper-button-next:after,{ font-size: 16px; padding: 5px; display: block; } .giraffly_announce_two { padding: 3px 20px 6px; }
6

@Alliance

The button still not styled,

What style you want for button.

1 Like
7

Only one thing, the left hand side arrow is bigger than the one on the right hand.

8

try this update code

.swiper-button-prev:after, .swiper-button-next:after,{ font-size: 16px; padding: 5px; display: block; }
1 Like
9

@Alliance

  1. Go to Online Store-> Theme-> Edit code
  2. Open your theme.liquid theme file
  3. Paste the below code before :
<style>
.swiper-button-prev:after {
font-size: 24px !important;
}
</style>
1 Like
10

@Alliance
Please Like our Solution. This means alot to me.

1 Like