Remove lines of collapsible row

golazocases · ‎08-12-2024

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

BSSCommerce-HDL · ‎08-12-2024

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 😍

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

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
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

BSS-TekLabs · ‎08-12-2024

.accordion {
    border: none !important;
}

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

- 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)

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

golazocases · ‎08-12-2024

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

BSS-TekLabs · ‎08-12-2024

summary[aria-expanded=true] {
 background: gainsboro !important;
}

Can you add more code @golazocases

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)

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

BSSCommerce-HDL · ‎08-12-2024

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:

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 😍

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

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
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 · ‎08-12-2024

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.

BSSCommerce-HDL · ‎08-12-2024

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:

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 😍

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

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
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 · ‎08-12-2024

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 · ‎08-12-2024

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

BSSCommerce-HDL · ‎08-12-2024

This code for remove sperator line:

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

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

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
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 · ‎08-12-2024

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 😍

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

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
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 · ‎08-12-2024

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

BSSCommerce-HDL · ‎08-12-2024

Hi @golazocases, You can try this code:

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

Hope this can help you 😍

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

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
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 · ‎08-12-2024

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

there is now a random thick grey line

golazocases · ‎08-12-2024

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 · ‎08-12-2024

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

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

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
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 · ‎08-12-2024

I do have theme.liquid

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

BSSCommerce-HDL · ‎08-12-2024

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 😍

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

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
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

Remove lines of collapsible row

Remove lines of collapsible row

Community Blog Articles