Re: how to change column card background

how to change column card background

deluc004
Excursionist
40 1 8

How do i change this set of column cards in my multi column only in this section to  F5F9FC

 

www.flowpure.co.uk

Screenshot 2024-06-30 at 15.21.55.png

Replies 12 (12)

WizzCommerce_Co
Trailblazer
149 24 34

Hi @deluc004, thank you for posting here!

You can follow my instruction below:

1. Go to Online Store -> Theme -> Edit code.
2. Open your Assets -> base.css, paste the code below on the bottom of the CSS file:

 

.custom-section .column-card {
    background-color: #F5F9FC;
}

If my answer is working for your store, please let me know by accepting Solution and giving Like !!!

 

Skyrocket BFCM with Wizz's apps: BOGO+ Buy X Get Y Free Gift
| Wizz Flash Sale & Price Edit | Snap Product Page Coupon | Snap Presale & Backorder | SnapNoti FOMO Visitor Counter | SnapBundle Volume Discounts
Find more support, feel free to contact: support@wizzcommerce.io
If our suggestion is useful for your problem, please let us know by giving Like and Accept Solution !!!
deluc004
Excursionist
40 1 8

Hi, it does not work

WizzCommerce_Co
Trailblazer
149 24 34

Hi @deluc004 , thank you for reply!

If it does not work, you can follow another my instruction below: 

1. Go to Online Store -> Theme -> Edit code.
2. Open your Assets -> base.css, paste the code below on the bottom of the CSS file:

 

.multicolumn-list__item.grid__item.slider__slide.center.scroll-trigger.animate--slide-in {
    background-color: #F5F9FC !important;
}

 

If my answer is working for your store, please let me know by accepting Solution and giving Like !!!

Skyrocket BFCM with Wizz's apps: BOGO+ Buy X Get Y Free Gift
| Wizz Flash Sale & Price Edit | Snap Product Page Coupon | Snap Presale & Backorder | SnapNoti FOMO Visitor Counter | SnapBundle Volume Discounts
Find more support, feel free to contact: support@wizzcommerce.io
If our suggestion is useful for your problem, please let us know by giving Like and Accept Solution !!!
deluc004
Excursionist
40 1 8

still do not work

Made4uo-Ribe
Shopify Partner
8903 2129 2612

Hi @deluc004 

Check this one. 

  1. From you Admin page, go to Online Store > Themes.
  2. Click the Customize.theme this one located on the home page > find this multicolumn section and click.
  3. After you clik the multicolumn section there will be right tab visible. Scroll down until you see the Custom CSS. 
  4. Paste the code below. 
  5. Must be look like this. 
  6. Made4uoRibe_0-1719762630015.png

 

.section-template--19696351379723__multicolumn_8y7Abh-padding .multicolumn-list__item {
    background: #F5F9FC;
    padding: 20px 0;
}

 

  • And Save. 
  • Result:
  • Made4uoRibe_1-1719762678341.png

    Note: This background will be shown on this multicolumn only. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
deluc004
Excursionist
40 1 8

Screenshot 2024-06-30 at 16.55.27.pngthis as the error, but does nto work

deluc004
Excursionist
40 1 8

It's because you are on the home page and i want to change it on this page instead - https://flowpure.co.uk/products/faucet-tap-water-purifier-physical-filtering-for-home-kictchen-2-fil...

Made4uo-Ribe
Shopify Partner
8903 2129 2612

Oh, Sorry Ive got confuse. Replace on this code then. 

.section-template--19696351543563__multicolumn_aBhqy3-padding .multicolumn-list__item {
    background: #F5F9FC;
    padding: 20px 0;
}

And Save. 

Result:

Made4uoRibe_0-1719764418290.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
deluc004
Excursionist
40 1 8

Screenshot 2024-06-30 at 17.25.36.png

No result 😞

Made4uo-Ribe
Shopify Partner
8903 2129 2612

Did you paste on the custom.css on the edit theme? did you save after pasting?

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

PageFly-Noah
Shopify Partner
1317 233 276

This is Noah from PageFly - Shopify Page Builder App

 

Hi @deluc004  Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

 

<style>

#shopify-section-template--19696351379723__multicolumn_8y7Abh .multicolumn{
  background: #F5F9FC !important;

}
</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

deluc004
Excursionist
40 1 8

Unfortunately this did not work either