Picture of CSS Override Overview | Time-Saving Toolbox

CSS Override Overview | Time-Saving Toolbox

This tutorial explains how Infigo’s CSS Override feature lets you upload or edit a single CSS file in the admin area and have those styles cascade across your entire storefront. By targeting specific selectors or broad site elements like the header, you can fine-tune branding and layout without pasting styles on every page. The guide walks through before-and-after examples, shows where to upload or download the override file, and flags that any custom code is outside standard support—so use it carefully.

Tutorial Video Transcript

A transcript of our tutorial video, ensuring you can find exactly what you need, when you need it.

You can search this page to find the relevant time-stamp in the video. Also, this text can be used as part of the tutorial search feature.

0:01 Now, following on from that, that I want to talk a little bit about CSS override for global styling. So some people use the CSS override quite a lot, some might not.
0:17 It's a way in which you can apply CSS in one location on your storefront, and then it will apply sitewide.
0:25 And you can make it so that stuff in there to focus target one particular location, one particular box on one particular page, for example, or you can make it so that it propagates information to the entire site, for example.
0:39 So if you want to customize your header a little bit more, you could do it in CSS override. And then it will show on the header, everywhere the header is shown, for example.
0:50 So, I've got some examples of it here in these little screenshots. This actually refers to that HTML content block I was just talking about a moment ago.
1:02 So the actual styling that we saw on there actually comes directly from the CSS override and it actually means that I put it once in the CSS override and then it will automatically we show absolutely everywhere, the named elements of the code are required.
1:23 So rather than having to put the style sheet on every individual page, for example, you could just have it in the one location, the CSS override, and it will be used everywhere if necessary to use.
1:36 So the example I've got here. If I look at what that was like before putting CSS in the CSS override, it was just plain text, it was a plain paragraph, there was no styling or anything like that.
1:52 If we then go ahead and apply our CSS to the CSS override, which I'll show in a moment, that automatically means that with a simple refresh, I get that styling to everywhere that particular element is shown on my site.
2:08 And that's just a simple example of course. So if I go to my admin area and go to CSS override, this is the area you would apply this.
2:27 It's simply okay, you won't be able to see this this one here. I think this is an admin only, but you should be able to see this upload a new CSS file.
2:38 If you've not got anything in there at all, just add your CSS to using visual studio code or something like that.
2:48 Again, this is another place where AI is great. AI is fantastic at creating code. So if you're just making some basic changes and basic amendments, you can get your AI tools to generate CSS for you if you're not familiar with the language.
3:02 We can say just upload that file, or if you've already got some CSS in there, you can download the existing file and then amend it and upload it again.
3:15 And that's basically it's on that one. Now what I do need to make clear. If you do start playing around with custom coding, wherever it's used in the system, but CSS override is a primary one.
3:30 Any that you do you are responsible for because it's custom code it can't be supported by infigo support because it could go in so many millions of directions it's not covered by our support charter.
3:44 So do use caution when you're making custom CSS changes. 

Incomplete
Step by Step Guide

Guide to Using CSS Override for Global Styling

 

1. Introduction to CSS Override 0:01

generated-image-at-00:00:01

  • CSS override allows you to apply CSS styles sitewide from a single location.

  • You can target specific elements or apply styles globally.

 

2. Benefits of CSS Override 0:25

generated-image-at-00:00:25

  • Customize elements like headers across the entire site.

  • Avoid repetitive styling by applying it once in the CSS override.

 

3. Example of CSS Override in Action 1:02

generated-image-at-00:01:02

  • Styling applied through CSS override reflects on all instances of the targeted element.

  • Demonstration of before and after applying CSS: plain text vs. styled text.

 

4. Accessing CSS Override in Admin Area 2:08

generated-image-at-00:02:08

  • Navigate to the admin area to find the CSS override section.

  • Option to upload a new CSS file or edit an existing one.

 

5. Using AI Tools for CSS Generation 2:48

generated-image-at-00:02:48

  • AI can assist in generating CSS code for basic changes if you're unfamiliar with coding.

 

6. Caution with Custom CSS Changes 3:30

generated-image-at-00:03:30

  • Custom code, including CSS overrides, is not supported by Infigo support.

  • Users are responsible for any issues arising from custom code.

Link to Loom

https://loom.com/share/bf29517da02549a78551981a63c4e2b5

Alternate Search Terms

global CSS override, site-wide stylesheet upload, custom storefront styling, change header CSS everywhere, edit theme CSS file, apply branding styles globally, update layout with CSS override, modify Infigo site styles, one-location CSS for all pages, upload custom CSS in admin