What's your biggest current challenge? Have your say in Community Polls along the right column.

Rounder collapsible row edges

Solved

Rounder collapsible row edges

TrendBlend
Trailblazer
246 0 29

Hello, how can I make my collapsible row edges smoother like this:
Schermafbeelding 2024-11-07 181102.png

 

Instead of my current URL: Controllable LED Curtain – TrendBlend

Schermafbeelding 2024-11-07 181129.png

Thanks in advance!!

Accepted Solution (1)
LizHoang
Shopify Partner
285 35 61

This is an accepted solution.

Hi @TrendBlend 

 

You can add this code to the Custom CSS to round gif: 

.media > *:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
    border-radius: 20px;
}

 

Here is the result : 

LizHoang_0-1731000475231.png

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Check our Joy Rewards & Loyalty Program

View solution in original post

Replies 6 (6)

LizHoang
Shopify Partner
285 35 61

Hi @TrendBlend 

 

You can follow the instruction here to round your collapsible row:

 

1. Go to Shopify > Theme > Customize > open Custom CSS

2. Copy and paste this code to the section > Save

.collapsible-row-layout .accordion {
    border-radius: 30px;
}

 here is the result : 

LizHoang_0-1731000041066.png

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Check our Joy Rewards & Loyalty Program
TrendBlend
Trailblazer
246 0 29

Hello @LizHoang, it looks good. Do you also know how I can make the GIF next to it also have round edges, like my product pictures have?

TrendBlend
Trailblazer
246 0 29

And how can I make the GIF next to it also have round edges, like my product pictures have?

LizHoang
Shopify Partner
285 35 61

This is an accepted solution.

Hi @TrendBlend 

 

You can add this code to the Custom CSS to round gif: 

.media > *:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
    border-radius: 20px;
}

 

Here is the result : 

LizHoang_0-1731000475231.png

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Check our Joy Rewards & Loyalty Program
TrendBlend
Trailblazer
246 0 29

Hello @LizHoang I appreciate your help!! I have one more question, is it possible to place the middle of the collapsible rows, next to the middle of the image on desktop so it just looks slightly better. Image for explanation (I want the green part (middle of each object) to connect).

Schermafbeelding 2024-11-07 190242.png

LizHoang
Shopify Partner
285 35 61

Hi @TrendBlend 

 

You can try to add this code to the Custom CSS section: 

 

 

.collapsible-row-layout .accordion {
    top: 16px;
}

 

 

Here is the result: 

LizHoang_0-1731063114151.png

 

 

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Check our Joy Rewards & Loyalty Program