How can I add a thin grey line under text on my webpage using code?

Store Design

Topic summary

Main issue: add a thin, full-width grey line beneath the “BUY NOW PAY LATER” strip after removing a newsletter block in a Shopify Turbo theme, with balanced white space above/below the text.

  • Participants requested the site URL; it was provided.
  • Approach agreed: use CSS (Cascading Style Sheets) rather than editing the Liquid section code.

Actions and code:

  • Hide the newsletter section on internal pages by adding to styles.css:
    .newsletter_section {display: none; visibility: hidden;}
    (Removes the “Join the club” block above the footer.)
  • Add the thin grey line under the bottom strip by adding to styles.css:
    .black_strip_icon .icon_flex {border-bottom: 1px solid rgb(0 0 0 / 12%);}
    (Creates a subtle, full-width bottom border beneath the text.)

Notes:

  • CSS controls presentation; styles.css is the theme’s stylesheet where these rules are placed.
  • An image mockup was shared to confirm the desired appearance.

Outcome: Both solutions worked as intended for the requester. The thread is resolved with no outstanding questions.

Summarized with AI on February 6. AI used: gpt-5.
1

Can someone advise how I can get a thin grey line to run across the page under the strip of words BUY NOW PAY LATER etc for www.mrpoppinsandco.com

I am using Turbo theme - by out of the the sand box. I have a strip at the bottom of my home page that did have a newsletter block below it but since I have removed that, the strip needs a wide grey line to match the wide thin line above it. I have temporarily put a divider line below it but I’d like the line to match the top line to make a full width band.

the code for the functionality is below. I’m not a coder but can’t imagine it’d be hard for someone who knows what they are doing.

CODE:

{% for block in section.blocks %}
{{ block.settings.topbar-text }}
{% if forloop.last != true %}
{% endif %} {% endfor %}
{% schema %} { "name": "BRAND", "settings": [

],
“blocks”: [
{
“type”: “text”,
“name”: “Block”,
“settings”: [

{
“type”: “text”,
“id”: “topbar-text”,
“label”: “Title”
}

]
}
],
“presets”: [
{
“name”: “Top Bar”,
“category”: “Image”
}
]
}
{% endschema %}

1 Like
2

Hi @MrP

Can you share with me the page url

3

@MrP

oh sorry for that issue can you please share store url so i will check and let you know

4

@PageFly-Richard www.mrpoppinsandco.com

5

@KetanKumar www.mrpoppinsandco.com

6

@MrP - your changes need css settings than code editing, can you please share your page link?

7

@suyash1 my url?

8

@MrP - you want like this?

suyash1_0-1665726682418.png
suyash1_0-1665726682418.png1366×768 100 KB

1 Like
9

@suyash1 yes that’s right. but I want the white space above and below the text to match. can you drop me some code and tell me where to put it?

while I have your attention, can you tell me how to remove the grey newsletter block across the bottom of all my internal web pages? I can hide it on the home page but it’s fixed on my internal pages. what am I missing here?

10

@MrP - which page exactly? can you please share page link?

1 Like
11

@suyash1 it’s the grey newsletter section on the bottom of every page: https://www.mrpoppinsandco.com/collections/leisure-bags

Title: join the club. just above the footer

12

@MrP - please add this css to the end of your styles.css file and check

.newsletter_section {display: none; visibility:hidden;}
13

@suyash1 awesome yes that works. now I just need to get the line underneath the “buy now pay later” strip on the bottom of the pages: https://www.mrpoppinsandco.com/collections/beach-towels
as per my original request (sorry for the tangent). Any suggestions?

14

@MrP - add this css

.black_strip_icon .icon_flex {border-bottom: 1px solid rgb(0 0 0 / 12%);}
1 Like
15

@suyash1 thank you for your responses. Both solutions are exactly what I needed.