Raster around text field

Store Design

Topic summary

A user wants to add a small colored border (raster) around a white text field below the add-to-cart button on their Shopify store, matching their package color.

Solutions Proposed:

  • Tal19 suggested editing the theme’s CSS file (product.css) and adding padding code to .m-product-description.rte
  • Made4uo-Ribe provided detailed steps: navigate to Online Store > Themes > Assets folder, open the main CSS file, and add custom CSS at the bottom with margin adjustments
  • Tal19 followed up with a box-shadow CSS solution using RGBA color values to create the border effect around the text field

The discussion remains open as the original poster hasn’t confirmed which solution worked. All responses involve custom CSS modifications to the theme files.

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

Hi everyone,

Below the atc button we use a white field but we want it to have a very small raster in the color of the package around the white field. How can we do this?

URL is www.lunalucente.com

Kind regards!

Image 08-07-2024 at 20.53.jpeg
Image 08-07-2024 at 20.53.jpeg2370×1204 215 KB

1 Like
2

Online store → edit code of your theme

Search product.css

and then add this code:

.m-product-description.rte {
    padding-top: 5px !important;
}
3

Hi @lunalucenteskin

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
.main-product__block.main-product__block-description {
    margin-top: 12px;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

4

Hi,

What i meant more was making a raster around the white text field in a customizable color.

5

try the following code:

.m-product-description.rte {
    box-shadow: 0 1px 2px 0 rgba(58, 72, 80, .07), 0 6px 13px 0 rgba(176, 189, 197, .14);
}