how to add lines between the accordion/tabs and make them smaller on product pages (yuva theme)

[ali219]

i want my accordion/tabs to look like the first picture where they have a faint line between them. currently it looks like the second picture.

[Moeed]

Hey @ali219

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Made4uo-Ribe]

Hi @ali219

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

[Vinsinfo]

@ali219 Please follow below steps to add lines between the accordion/tabs and make them smaller on product pages in Yuva theme. Please let us know wheher it is helpful for you.

1. From admin go to “Online Store” → “Themes”.
2. Click “Customize” button from the current theme.
3. Go to product page and click the added collapsible content section.
4. Then locate the “Custom CSS” field and paste the below code as like the attached screenshot and then save changes.
   Note: You can set the max-width size as per your need to set the size of the section.

.yv-faq-detail {
  max-width: 767px;
}
.yv-faq-detail .yv-accordion-card {
  border: none;
  border-radius: 0px;
  box-shadow: none;
  border-bottom: 1px solid #cdcdcd;
}
.yv-accordion-card div:first-child {
  background: none !important;
}

Result will be like,

If above solution doesn’t works, please share your store URL to check this further.

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

[ali219]

this is my store url

Aging Whiskers

password: Qwerty123

[Made4uo-Ribe]

Hi @ali219

Thanks for the info, check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.yv-product-accordion {
    padding: 15px 5px;
    border-top: 1px solid black;
    margin-top: 0;
}

summary.yv-accordion-header {
    padding-bottom: 0; 
}

.yv-accordion-card {
    margin-bottom: 0;
}

.yv-product-description.rich-editor-text-content {
    padding-top: 30px;
    border-top: 1px solid black;
}

And Save.

Result:

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

[ali219]

how do i make the lines more faint, also is coding it in the only way to do this? you would think shopify would make it a bit easier to do something so obvious

[Moeed]

Hey @ali219

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[ali219]

also the lines dont appear on mobile and i dont want there to be a line above the first tab, just lines below description, product details and shipping. same as the style of lines ive sent above. that is from the site called meowingtons.

[ali219]

very close to being perfect, is it just possible to have more spacing between the tabs and get rid of the first line right at the top of the description

[ali219]

this is what it looks like on mobile. need to improve the spacing for this

[Moeed]

Hey @ali219

Add this code above in the end of theme.liquid file.

@media screen and (max-width: 767px) {
details.yv-accordion-card {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[ali219]

very close, just want to remove the line at the top of the description tab and there seems to be a line under the socials icon when opening it on mobile

[ali219]

do you know how to get rid of these two lines on mobile