I want to turn-collapsible-content-from-rows-into-columns

Store Design
1

I

tttttt
tttttt862×449 84 KB

I want to turn the collapsible-content-from-rows-into-columns , in sense theme with a red stroke when hover over like the attached picture.
my store link : www.soothetech.shop

3

Hi @rubi06

Like the previous answer, you are going to need some custom CSS. Go to Online Store > Themes > Edit code, open Assets / base.css, and paste the following code at the very bottom.

/* --- Turn Collapsible Rows into Columns (Tabs Style) --- */

/* 1. Make the container a horizontal row */
.collapsible-content__grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid #e5e5e5; /* Optional bottom line */
}

/* 2. Make each item take up 50% width (2 columns) */
.collapsible-content__grid .grid__item {
  width: 50%; 
  max-width: 50%;
}

/* 3. Center the text like a Tab */
.collapsible-content summary {
  padding: 15px 0;
  text-align: center;
  border: none !important;
  position: relative;
}

/* 4. The "Red Stroke" Hover Effect */
.collapsible-content summary:hover::after,
.collapsible-content details[open] summary::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: red; /* Change to your hex color */
  position: absolute;
  bottom: 0;
  left: 0;
}

/* 5. Mobile Adjustment (Keep vertical on phone) */
@media screen and (max-width: 749px) {
  .collapsible-content__grid {
    display: block !important;
    border-bottom: none;
  }
  .collapsible-content__grid .grid__item {
    width: 100%;
    max-width: 100%;
  }
}

This should be able to do the trick!

4

the collapsible contents are still distributed vertically not horizontally like the picture i provide