Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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
.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)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
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
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)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
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 😍
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
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.
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 😍
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
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
Also how can I remove the seperator line at the bottom of the payment icons? see attached pls 🙂
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
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
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
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
This looks good but it seems to have effected the code here on the home page:
there is now a random thick grey line
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 🙂
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
I do have theme.liquid
there is a <head> but no </head>
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
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.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025