Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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
162 26 38

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 Price Design Badge & Icon | Snap B2B Wholesale | 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
162 26 38

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 Price Design Badge & Icon | Snap B2B Wholesale | 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
9094 2174 2684

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
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
9094 2174 2684

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
deluc004
Excursionist
40 1 8

Screenshot 2024-06-30 at 17.25.36.png

No result 😞

Made4uo-Ribe
Shopify Partner
9094 2174 2684

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

PageFly-Noah
Shopify Partner
1317 233 277

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