Product Collection Gallery
The North Commerce Component's styling are defined by a CSS & there is a few CSS variables you can adjust that will update all of the styling for the product collection gallery all at once.
The product collection gallery is the shortcode that renders a collection of products.
Preview of the Product Collection Gallery
You can add the block of CSS code to any page the shortcode was added to or to your theme or builders global CSS settings area.
All you need to do is update the #HEX code for each of these CSS variables to update the colors everywhere.
.nc-product-gallery-area {
--primary-font: "Poppins", "sans-serif";
--primary-theme-color: #FF5500;
--primary-font-color: #000000;
--subtext-font-color: #747E94;
--secondary-font-color: #ffffff;
--primary-border-color: #FF5500;
--primary-inactve-border-color: #EEF1FB;
--primary-error-color: #ff0051;
--error-font-size: 14px;
--swatch-border-color: #f0f0f0;
--disabled-qty: #F5F5F5;
--disabled-add-to-cart: #d3d4d5;
--primary-input-border-color: #E5EBF1;
--swatch-background-color: #ADD8E6;
}
Last modified 5mo ago