Dawn - Product Page Accordion Border Styling

Store Design

Topic summary

A user seeks to customize accordion styling on a Shopify Dawn theme product page for mobile devices (≤750px). They want to:

Requirements:

  • Remove the bottom border from the last accordion row
  • Add border-radius to corners (top corners of first row, bottom corners of last row)

Solutions Provided:

Two community members offered CSS code snippets to add to the theme’s stylesheet (base.css, main.css, or similar):

  • Border removal: Target the accordion element with CSS to set border-top: none !important on adjacent accordions
  • Border radius: Apply border-top-left-radius and border-top-right-radius to the first accordion, and border-bottom-left-radius and border-bottom-right-radius to the last accordion using :last-of-type selectors

One responder included a reference image showing the expected result and requested the main-product.liquid file code for further guidance. The discussion appears to provide working solutions, though the original poster has not yet confirmed resolution.

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

  • How can I hide the bottom border of the last accordion row for mobile view (750px and below)?

  • How can I apply a border-radius to the top-left and top-right corners of the first accordion row, and the bottom-left and bottom-right corners of the last accordion row?

Reference Image for second point: https://imgur.com/a/jRKXSF5

Link: https://a93e87-e7.myshopify.com/products/test-product

Keycode: teoree

1 Like
2

Hi @IllIlIl1 ,

  • Remove border: Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:
.product__info-container .accordion+.accordion {
    border-top: none !important;
}
  • Add border radius: please send me the code of main-product.liquid file, I will check and guide it
3

Hi @IllIlIl1

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.

#shopify-section-template--23282462523702__main .accordion:not(:last-of-type) {
    border-bottom: 0;
}

#ProductInfo-template--23282462523702__main > div:nth-child(9) {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.product__accordion.accordion:last-of-type {
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

.product__accordion.accordion summary {
    padding-left: 1rem;
    padding-right: 1rem;
}

And Save.

Result:

Made4uoRibe_1-1727278878019.png
Made4uoRibe_1-1727278878019.png444×275 2.15 KB

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