Horizontal Line Not Appearing On Live Store But Shows In Product Description?

Technical Q&A
1

Hello all,

I’m having a bit of trouble inserting a horizontal line to separate sections in my product description. I enter the following

before and after the section I want to separate within my product description & it shows on the product description within the admin dashboard. However, when I go to the live store it doesn’t show the lines I’ve inserted? I’m currently using the Debutify theme. (thefurryfeeder.com)

Could anyone help me fix this issue?

Thank you very much .

2

@ecomnoobie , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
#productDescription:before,
#productDescription:after{
    content:'';
    display: block;
    width: 100%;
    max-width: 100%;
    height: 1px;
    background: #e6e6e6;
}

#productDescription:before{
    margin-top: 25px;
    margin-bottom: 20px;
}

#productDescription:after{
    margin-top: 26px;
    margin-bottom: 19px;

}

You can modify the values as you wish:

#e6e6e6 = HEX color for the lines.

25px = top spacing of the first line (the one above the description)
20px = bottom spacing of the first line

26px = top spacing of the second line (the one below the description)
21px = bottom spacing of the second line

diego_ezfy_0-1626760580199.png
diego_ezfy_0-1626760580199.png1322×647 122 KB

Please let me know whether it works.

Kind regards,
Diego

3

Thanks for the reply @diego_ezfy ,

Sorry I should’ve provided an image to show where I want the lines to be . I’ve attached an image circling the areas where I want the lines to be. Is there anyway to do this? I’ve tried putting

before and after but it only shows on the product description within the admin dashboard when editing but not on the live store for some reason?

store community.png
store community.png1366×768 156 KB

4

@ecomnoobie

No problems. In this case you can follow the previous steps and use the following code:

#productDescription hr{
    display: block;
    width: 100%;

    background: #e6e6e6 !important;
    height: 1px;

    margin-bottom: 15px;
    margin-top: 0px;
}

Kind regards,
Diego

5

Thank you so much @diego_ezfy ! It worked, I really appreciate your help!

6

@ecomnoobie

You’re welcome. Wishing you all the best.