How to add boarder to an element

Store Design
, , , , , , , , , , ,

Topic summary

A user wants to add a border around their return policy element and remove an existing underline on their Shopify store.

Solution Provided:

  • Navigate to: Online Store → Theme Customize → Theme Settings → Custom CSS
  • Add CSS targeting .product__info-container .product-popup-modal__button.link
  • The code adds a 1px black border with 10px padding and removes text decoration
  • Includes a hover effect that inverts colors (black background, white text)

Visual Result:
Screenshots demonstrate the bordered return policy button in both normal and hover states, achieving the desired boxed appearance without the underline.

Status: Solution appears complete with working CSS code provided.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

I’m looking to add a border (box) around the return policy and remove the outline below

url knmb1c-pf.myshopify.com

password samurai

IMG_7961.jpeg
IMG_7961.jpeg587×494 18.2 KB

2

@undercoverfresh

You can add below CSS under the THeme settings → Custom CSS and try that.

Go to the online store → Theme Customize → Theme settings → Custom CSS

Screenshot: https://prnt.sc/F0tSqBmCUaKe

.product__info-container .product-popup-modal__button.link {
	text-decoration: none;
	border: 1px solid #000;
	padding: 10px;
	transition: 0.3s all;
}
.product__info-container .product-popup-modal__button.link:hover {
	background: #000;
	color: #fff;
}

This is how it will look like after adding the CSS https://prnt.sc/xWe48mHdmQGt

https://prnt.sc/OSD38UKy6_cQ this is on hover.

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

1 Like