Need help fixing a button

Store Design
, ,
1

Hi I need help fixing the “view full details button”. Please see the attached photo, it is too close to the add to cart button and the little arrow on the button is out of alignment. Thank you.

Website: Tansokr

password: TKRVIP

Screenshot 2026-05-25 224538
Screenshot 2026-05-25 224538514×299 4.83 KB

2

Hey @gavboy555
I can see the issue from your screenshot.

Add this CSS to your theme. Go to Online Store → Themes → three dots → Edit code → Assets → base.css (or your main CSS file) and add at the bottom:

.product_view-details.animate-arrow {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

The margin-top adds spacing between the Add to Cart button and the link. The display: inline-flex with align-items: center fixes the arrow alignment so it sits vertically centered with the text.

image
image496×291 7.65 KB

If you want to adjust the spacing, just increase or decrease the margin-top value. Save and preview.

Hope this points you in the right direction! If it solves the issue, feel free to Like the reply or mark it as the Solution so others can find it more easily too :folded_hands: .

3

Hello there @gavboy555,

To make the alignement vertically center and make it left spacing from the top, then you need to follow these steps that shared below.

Go to Shopify Admin → Online Store → Edit Code → base.css

In the end of base.css file you need to paste the code that shared below.

4

This is the code that you need to paste,

a.link.product__view-details.animate-arrow {
    display: flex;
    padding-top: 15px;
}

Once you paste the code, then you’ll get the output something like shared below.

image
image1290×809 10.8 KB

If this was helpful, don’t forget to like it and mark as Solution.

5

In your base.css paste this code at the end of file and don’t forget to save the file

a.link.product__view-details.animate-arrow {
    display: inline-flex;
    padding-top: 10px;
}

If you need more help with feel free to ask.