Dawn - Hide The Arrow SVG for Product Accordion Row

Store Design

Topic summary

A user seeks to hide the SVG arrow icon specifically in the last accordion row of a product page on a Dawn theme Shopify store, while keeping arrows visible in other rows.

Multiple solutions provided:

  • Target the specific accordion row using its ID (details#Details-collapsible_tab_FfF9da-template--176647...) and set display: none on the SVG element
  • Use CSS selector .details:last-child .icon.icon-caret svg to hide arrows in the last row
  • Add custom CSS to theme.liquid (before </body>) or base.css/component-accordion.css files

Follow-up request:

The original poster then asks how to add border-radius to the bottom-left and bottom-right corners of the last accordion row.

Additional solution:

Target .product__accordion.accordion:last-of-type and apply border-bottom-left-radius and border-bottom-right-radius properties (suggested value: 15px).

All solutions include code snippets and reference images showing the expected results. The discussion remains technical, focusing on CSS customization for the Dawn theme’s product accordion component.

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

Is it possible to hide the SVG arrow icon in a specific accordion row? I would like to set display: none for the SVG arrow icon in the last accordion row, ensuring that the arrow-icon does not appear for the last row only.

Reference Image:

https://imgur.com/a/WOHiI38

–

Store Link: https://6c34c9-d3.myshopify.com/products/t-shirt-test

Password: yewsto

2

Hello @IllIlIl1

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

details#Details-collapsible_tab_FfF9da-template--17664770146483__main svg { display: none !important; }

Tech_Coding_0-1725874086907.png
Tech_Coding_0-1725874086907.png496×276 1.46 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

1 Like
3

Hi @IllIlIl1

To hide the arrow

Go to component-accordion.css

Add below code

details:last-child svg.icon.icon-caret {
    display: none !important;
}

Thank you

D.P.

4

@IllIlIl1 ,

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code before 


Result:

![BSSCommerceB2B_1-1725874316739.png|1168x832](upload://1K1rdUtY5f1eRD54Iqlsjxasplr.png)

Hope it helps :heart_eyes:
1 Like
5

Hello @IllIlIl1
Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

details#Details-collapsible_tab_FfF9da-template--17664770146483__main svg {
display: none !important;
}

result

8.png
8.png422×424 6.26 KB

If this was helpful, hit the like button and accept the solution.
Thanks

6

Thanks! Is also possible to add a border radius to the bottom left and bottom right corners of the last accordion row? I’d like to have a border radius applied specifically to the bottom corners of that row.

7

Thanks! Is also possible to add a border radius to the bottom left and bottom right corners of the last accordion row? I’d like to have a border radius applied specifically to the bottom corners of that row.

8

@IllIlIl1 , yes this is your code

Result:

BSSCommerceB2B_0-1725879578049.png
BSSCommerceB2B_0-1725879578049.png1027×738 15.8 KB

9

@IllIlIl1
Add this

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

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

Tech_Coding_0-1725888415556.png
Tech_Coding_0-1725888415556.png451×243 1.6 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.