Adjusting the Look and Feel of a Storefront Using CSS

Overview

In Infigo, you can individually style storefronts by applying a custom CSS file at the storefront level. This enables each storefront on your platform to have a distinct look and feel. The breadth of customization possible depends on your CSS knowledge and design goals.

For general CSS guidance, see the w3schools CSS reference.

Common Scenario: Updating Storefront Images via CSS

A typical scenario is needing to change images (for example, product or brand images) referenced in the CSS. By downloading your existing CSS file, you can identify all image references, swap in new images, and reupload for an updated look.

Setup

1. Log in to the storefront you want to customize as a Storefront Administrator.
2. Navigate to Content Management > CSS Override to access the CSS Override page.
   • 

Downloading the Existing CSS File

1. On the CSS Override page, you will see any previously uploaded CSS files listed.
2. To download an existing CSS file, click the Download link (usually located alongside the file name).
3. Save the file to your local machine.

This allows you to see all the CSS rules currently applied to your storefront, including any custom styles or image references.

Making Changes

1. Open the downloaded CSS file in a text editor of your choice.
2. Locate the relevant references:
   • Typically, images might be referenced with a path like {images}/myimage.jpg.
   • If you plan to replace an existing image, you can either rename your new file to match the old name (effectively overwriting it) or reference a new filename in the CSS.
3. Adjust color codes or layout rules as needed—such as modifying button colors, font sizing, or menu styling.

Tip: Use browser developer tools to inspect elements and test new styles or updated images before finalizing.

• Chrome DevTools (also helpful for Chromium-based browsers like Microsoft Edge)
• Firefox Page Inspector

Uploading a New or Updated CSS File

1. On the CSS Override page, in the Upload a new CSS file section, select your edited .css file.
2. Click Upload.
3. Refresh the storefront to see your changes. Remember that site caching might delay immediate visibility of updates. If changes are not showing, clear your browser cache or allow time for the site’s cache to refresh.

Handling Images in Your CSS

1. On the CSS Override page, you’ll find an area to upload images used in your CSS file.
2. Upload images in the lower pane.
3. In your CSS, reference them as {images}/filename.jpg (or .png, .svg, etc.).

If you need to swap out an image—such as a banner, product image, or background—upload a new file using the same name to overwrite or rename the image file and update the CSS path accordingly. Test changes to ensure your images appear as expected.

Important Notes

1. No Bulk Resource Download: While you can download your CSS file directly, there is no way to download all associated images or resources as a single bulk download from this area.
2. Site Caching: Updates might not appear immediately due to caching. Clear your browser cache or wait a short time if you don’t see your changes.
3. CSS Expertise: Adjusting layout and styling can lead to unexpected results if not done carefully. If you’re new to CSS or making extensive changes, it’s best to test in a staging environment or consult a web designer.

Further Learning

For additional tutorials and best practices around storefront design, check out the Infigo Academy.