How to remove the top divider line in the accordion tab for Vessel theme

Store Design
,

Topic summary

A user sought help removing the top border divider from the first accordion tab on their product page (store: aluovi.com, using Vessel theme).

Initial Solutions Attempted:

  • Multiple CSS snippets were suggested targeting various possible class names (.product-accordion, .accordion__item, pseudo-elements, etc.)
  • These initial attempts did not resolve the issue

Working Solution:
The problem was resolved using theme-specific CSS for Horizon-family themes:

accordion-custom:first-of-type > details {
  border-top: none !important;
}

Implementation:

  • Add code to the “Product info” section’s “Custom CSS” setting, OR
  • Insert into styles.css file via theme code editor (Assets folder)

Key Takeaway:
The Vessel theme uses accordion-custom elements with nested details tags. The solution also works for removing the bottom border on the last accordion using :last-of-type.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Please, can anyone show me how to remove the top border divider for the first accordion tab in my store product page. My store is aluovi.com

Screenshot (279)
Screenshot (279)1366Ă—473 234 KB

1 Like
2

@SageUmeh You can remove the top border divider from the first accordion tab by adding a small CSS tweak. Try this in your theme’s custom CSS or theme editor > Customize > Custom CSS section:

.product-accordion:first-child {
  border-top: none;
}

If your theme uses a different class name, inspect the accordion element (right-click → “Inspect”) and replace .product-accordion with the exact class used there. That should remove just the first divider without affecting the rest.

3

custom css setting, not alot of themes have a section/block dedicated for CSS
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

4

The code didn’t work

5

This is alot but no worries. If the first snippet didn’t work it usually means the accordion uses a different class or the border is applied to a child element. Try these quick options (paste into theme CSS / Customize → Additional CSS):

  1. Target the very first accordion element (works for many themes):
/* first accordion block itself */
.accordion, .product-accordion, .accordion-list {
  /* keep this as a fallback; don't delete */
}
.accordion:first-of-type,
.product-accordion:first-of-type,
.accordion-list:first-of-type {
  border-top: none !important;
}
  1. Target the header/line inside the first item (common when border is on header):
/* header inside first accordion item */
.accordion__item:first-of-type .accordion__header,
.product-accordion__item:first-of-type .accordion-header,
.accordion-list > li:first-of-type .accordion-header {
  border-top: none !important;
}
  1. If the border is a pseudo-element (very common):
/* remove pseudo-element border */
.accordion__item:first-of-type::before,
.product-accordion__item:first-of-type::before {
  display: none !important;
}
  1. If your accordion is built with hr or a .divider element:
/* remove the top divider element inside the first accordion */
.accordion > .divider:first-child,
.product-accordion .divider:first-child,
.product-accordion > hr:first-child {
  display: none !important;
}

Quick checklist if it still shows:

  • Clear theme cache / hard refresh (Ctrl/Cmd + Shift + R).

  • Make sure you added the CSS to the active theme (not an unpublished duplicate).

  • Use Inspect (right-click → Inspect) to find the class name applied to that border — look for border-top, border, ::before, hr, or .divider.

6

Can’t you identify the class from the website

7

Hi @SageUmeh if you need this actually taken care of properly you can reach out to me for quick services.
(click my profile pic on forums for :e_mail: options, please always provide context in new communications)

8

The CSS code can be like this:

/* remove top border on the first accordion */
accordion-custom:first-of-type > details {
  border-top: none !important;
}

/* also? -- remove bottom border on the last accordion */
accordion-custom:last-of-type > details {
  border-bottom: none !important;
}

You can add this code to the “Product info” section “Custom CSS” setting.
(In this case you may also remove the !important from the rules.)

The code should be applicable to any Horizon-family theme.

1 Like
9

Hi @SageUmeh

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > styles.css and paste this at the bottow of the file:
.accordion > accordion-custom:first-of-type .details {
  border-top: none !important;
}

image
image1335Ă—538 142 KB

10

Thanks, this code works

1 Like