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

Solved
ecomnoobie
New Member
3 0 0

Hello all, 

I'm having a bit of trouble inserting a horizontal line to separate sections in my product description. I enter the following <hr> 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 . 

0 Likes

@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

 



Please let me know whether it works.

Kind regards,
Diego

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
ecomnoobie
New Member
3 0 0

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 <hr> 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

0 Likes

This is an accepted solution.

@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

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
ecomnoobie
New Member
3 0 0

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

0 Likes

@ecomnoobie 

You're welcome. Wishing you all the best.

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes