Adding border to text

[vvyan]

Hi all,

Is there a way to easily add a thin black border only to the body and logo text on my password page to help with text visibility?

url: a2d014-b6.myshopify.com

password not needed, its only the password page that needs the change

[mageplaza-cs]

Hi @vvyan ,
Yes — you can add a thin black border (stroke) to the text on your password page using a small piece of custom CSS.

Here’s how you can do it:

1. From your Shopify admin, go to Online Store > Themes.
2. Click Customize on your active theme.
3. In the top dropdown, choose the Password page.
4. Click Theme settings > Custom CSS (or open the CSS file in Edit code if your theme doesn’t have this option).
5. Add this code:

/* Adds black border (outline) to text */
##MainContent {
  color: white; /* adjust if needed */
  text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
}

Tip:
If your logo is an image instead of text, this method won’t apply — you’d need to edit the image itself or upload a version with an outline.

This will make your body and logo text more visible against the background without affecting the rest of your site.

Result:

If this solution helps, don’t forget to mark it as an Accepted Solution so others can find it easily!

[devcoders]

Hi @vvyan

You want like this ?

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottow of the file:

.jumbo-text__container {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #000;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  color: #000 !important;
  position: relative;
  z-index: 2;
}

.section-content-wrapper {
  border: 1px solid #000;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  padding: 32px 24px;
  box-sizing: border-box;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .section-content-wrapper {
    max-width: 90%;
    padding: 20px;
  }
  .jumbo-text__container {
    padding: 6px 12px;
    font-size: clamp(24px, 8vw, 60px);
  }
}

[Parampreet]

Hi @vvyan
Please add below CSS in base.css:
.background-image-container {
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: var(–image-opacity);
border: 1px solid #000;
}
.jumbo-text__container {
width: 100%;
border: 1px solid #000;
padding: 20px;
}
It will be look like below screenshot:

[namphan]

Hi @vvyan,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.section.section--password * {
    text-shadow: 1px 0 #000000, -1px 0 #000000, 0 1px #000000, 0 -1px #000000, 0.5px 0.5px #000000, -0.5px -0.5px #000000, 0.5px -0.5px #000000, -0.5px 0.5px #000000;
}