Remove lines of collapsible row

Solved

Remove lines of collapsible row

golazocases
Pathfinder
96 0 28

Hi, I would like to remove the thin grey seperator lines on the collapsible rows on my product page (see attached) - so that it looks like the collapsible rows on my home page 

 

URL: golazocasesuk.myshopify.com

 

Screenshot 2024-08-12 at 16.18.53.png

Accepted Solution (1)
BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an accepted solution.

You can try this: 
Insert this code inside the head tag: 

 

 

{% if template.name == 'product' %}
 <style>
 @media only screen and (max-width: 749px) {
    .collapsible-content__wrapper,
    .shopify-section.section product-info
    {
       padding: 0 !important;
    }
}
 </style>
{% endif %}

 

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 18 (18)

BSS-TekLabs
Shopify Partner
2401 695 830
.accordion {
    border: none !important;
}

Can you try add this code to last line file base.css @golazocases 

BSSTekLabs_0-1723476238024.png

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
golazocases
Pathfinder
96 0 28

Thanks! Can you structure it so that when opened the heading has a grey background exactly like how the collapsible rows are on my homepage? See attached 

 

IMG_6824.PNG

BSS-TekLabs
Shopify Partner
2401 695 830
summary[aria-expanded=true] {
 background: gainsboro !important;
}

 Can you add more code @golazocases 

BSSTekLabs_0-1723476820048.png

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

BSSCommerce-HDL
Shopify Partner
2305 834 907

Hi @golazocases

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css

Step 3: Insert this code

 

 

.accordion {
    border: none !important;
}

 

 

 

Here is result:

BSSCommerceHDL_0-1723476305670.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

golazocases
Pathfinder
96 0 28

Thanks! Could you help me with my footer? I want to increase the padding between the seperator line and the social icon so it looks all even and equal (see attached) hope you understand 🙂

 

All the padding in the footer section just looks uneven, it would be great if I could get all of this neatened up for both desktop and mobile. 

 

Screenshot 2024-08-12 at 16.24.18.png

BSSCommerce-HDL
Shopify Partner
2305 834 907

Hi @golazocases

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css

Step 3: Insert this code

.footer__content-top {
    padding-top: 4rem !important;
}

 Here is result: 

BSSCommerceHDL_0-1723476936229.pngBSSCommerceHDL_1-1723476945911.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

golazocases
Pathfinder
96 0 28

Thanks, could you also decrease the padding between the footer and the bottom bit with the payment icons? There is a large gap at the moment

golazocases
Pathfinder
96 0 28

Also how can I remove the seperator line at the bottom of the payment icons? see attached pls 🙂

 

IMG_6825.jpg

BSSCommerce-HDL
Shopify Partner
2305 834 907

This code for remove sperator line: 

.footer__content-bottom {
    border: none !important;
}

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

BSSCommerce-HDL
Shopify Partner
2305 834 907

Hi @golazocases, Pls try with this code: 

@media only screen and (max-width: 749px) {
  .footer__content-top.page-width {
    padding-bottom: 0 !important;
  }

  .footer__blocks-wrapper {
    margin-bottom: 0 !important;
  }
}

Hope this can help you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

golazocases
Pathfinder
96 0 28

Amazing thank you! I have made some adjustments on the product page and swapped the collapsible rows to collapsible content. For the mobile view only could you please reduce the padding between the collapsible content and the buy buttons? and ensure the padding either side is all even and equal

 

I hope this makes sense! i just need the change made for mobile, on desktop it looks fine

 

Screenshot 2024-08-12 at 16.53.08.png

BSSCommerce-HDL
Shopify Partner
2305 834 907

Hi @golazocases, You can try this code: 

.collapsible-content__wrapper,
.shopify-section.section product-info
{
    padding: 0 !important;
}

 Hope this can help you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

golazocases
Pathfinder
96 0 28

This looks good but it seems to have effected the code here on the home page:

 

IMG_6826.PNG

 

there is now a random thick grey line

golazocases
Pathfinder
96 0 28

the coding also effected the product page a bit on both desktop and mobile. all I want is for the padding to be reduced between only the collapsible content and the buy buttons on mobile - without having it effect anything else elsewhere on the store ... if possible 🙂

 

BSSCommerce-HDL
Shopify Partner
2305 834 907

Do you have the theme.liquid file? If so can you find the </head> tag for me?

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

golazocases
Pathfinder
96 0 28

I do have theme.liquid

 

there is a <head> but no </head>

BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an accepted solution.

You can try this: 
Insert this code inside the head tag: 

 

 

{% if template.name == 'product' %}
 <style>
 @media only screen and (max-width: 749px) {
    .collapsible-content__wrapper,
    .shopify-section.section product-info
    {
       padding: 0 !important;
    }
}
 </style>
{% endif %}

 

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

mcc14
Visitor
1 0 0

This was so helpful!!! Thank you! I have been searching the internet all night for this. Do you know what code I can use if I want to just keep the top border of the accordion and not the bottom.