We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Move the '+' symbol in the Collapsible tabs

Solved

Move the '+' symbol in the Collapsible tabs

Mdb_Gioto
Excursionist
49 0 17

I would like to move the pre-set symbol of the Collapsible tabs, as shown in this photo. Can you help me? Here is the link: https://vomeroitaly.com/products/little-benjamin?variant=45881848791307

 

 

 

 

 

Screenshot 2024-12-20 at 15.15.01.png

Screenshot 2024-12-20 at 15.14.29.png

Accepted Solution (1)

Moeed
Shopify Partner
7764 2082 2568

This is an accepted solution.

Hey @Mdb_Gioto 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
summary.cc-accordion-item__title {
    padding-left: 20px !important;
}
.cc-accordion-item__title::before, .cc-accordion-item__title::after {
    right: unset !important;
    left: 1px !important;
}
</style>

RESULT:

Moeed_0-1734704739407.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 3 (3)

Moeed
Shopify Partner
7764 2082 2568

This is an accepted solution.

Hey @Mdb_Gioto 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
summary.cc-accordion-item__title {
    padding-left: 20px !important;
}
.cc-accordion-item__title::before, .cc-accordion-item__title::after {
    right: unset !important;
    left: 1px !important;
}
</style>

RESULT:

Moeed_0-1734704739407.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


Guleria
Shopify Partner
4299 825 1189

Hello @Mdb_Gioto ,

 

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your styles.css file and paste the following code at the bottom:

.product-form .product-detail-accordion .cc-accordion-item__title { 
    padding-left: 24px;
}
.product-form .product-detail-accordion .cc-accordion-item__title::before, .product-form .cc-accordion-item__title::after { 
    left: 0 !important; 
}

 

Regards
Guleria

- Elevate Your Store with Expert Shopify Services. Email: guleriathakur43@gmail.com - Need a quick fix or a tailored customization? I’ve got you covered.
- Looking to enhance your pages? Try GEMPAGES- a powerful drag & drop page builder.
- Let’s make your store stand out. Get in touch today!
- My Apps: Productify Groups – Smart product grouping made easy.

websensepro
Shopify Partner
2144 268 320

Hi @Mdb_Gioto 


1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

 

.product-detail-accordion .cc-accordion-item__title {
    padding-left: 20px !important;
}
.cc-accordion-item__title::before, .cc-accordion-item__title::after {
    left: 1px !important;
}

 

Result:

websensepro_0-1734705216260.png

 

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

 

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP