🚀 Storefront Styling Tips & Tricks 🚀

Picture of 🚀 Storefront Styling Tips & Tricks 🚀
Read our handy storefront styling tips and tricks!

Displaying Basket Count Visibility Next to the Basket Icon on Your Storefront

Configure Basket Count Visibility

Occasionally, users may notice that the basket counter does not appear on the main button when items are added, especially on the desktop view. In some cases, the counter seems to show only when the view is adjusted or zoomed in, causing confusion about the status of basket contents.

This behavior is not a bug but a configurable setting within your system. By adjusting the header settings, you can ensure that the basket count is visible across all device views.

The following guide explains the use cases, key settings, and step-by-step instructions to enable the basket count feature effectively.

Use cases

  • Ensure users see an indication of items in their basket at all times.
  • Create a consistent shopping experience across desktop and mobile views.
  • Boost customer confidence by clearly displaying the basket status.

Key settings in Infigo

  • Editable Content Header Settings: Infigo Admin > Editable Content - Edit Details > Header
  • Basket Count Option: Click the cog in the top-right corner and change 'Show Basket Count' to Both

Step-by-step guide

  1. Log in to your Infigo Admin panel.
  2. Navigate to the Editable Content section and select the Header configuration.

  1. Click the cog icon located in the top-right corner of the header settings.

  1. Find the 'Show Basket Count' setting and change the option to "Both".

  1. Save your changes to update the settings.
  2. Clear Cache from the admin area

  1. refresh your site to confirm that the basket counter is now visible on all devices and zoom levels.

Related links

For additional guidance, head over to the Infigo Academy or contact our Customer Support team.



Displaying a Specific Product Image by Default on the Product Page

By default, Infigo displays the first image (position 0) in the product image gallery when a user lands on a product detail page. This is the standard behaviour across all storefronts and cannot be changed through configuration alone.

Some users may wish to override this behaviour in specific scenarios—such as when a visitor arrives from a Google Merchant listing—and instead display a different image (e.g. image in position 1) by default. While this is not supported natively, there are workarounds available.

This article outlines what is and isn’t possible within the platform, and what options are available for customisation.

Use cases

  • Show a different product image when a user lands on the product page from a Google Shopping ad
  • Use the first image for homepage/category thumbnails but skip it on the product detail page
  • Highlight a specific product variant visually without changing the product structure

Key settings in Infigo

  • Product Image Order: Managed in the product setup area; the image in position 0 is always shown first by default
  • Hide Primary Image on Homepage/Category: Found under Admin > Catalogue > Products > [Product] > Images; allows hiding the first image on listing pages only

Step-by-step guide

  1. Navigate to Admin > Catalogue > Products and select the product you wish to edit.
  2. Go to the Images tab to view and manage the image order.
  3. Ensure the image you want to show by default is in position 0—this is the only image that will display first on the product detail page by default.
  4. If you want to hide the first image on homepage or category pages, tick the Hide on Listing Pages checkbox (if available).
  5. To override the default image shown on the product page based on referral source (e.g. Google Merchant), a custom JavaScript solution is required. This is not supported out of the box and would need to be scoped as a paid development.
  6. Contact the Infigo team via your Customer Success Manager or Support to discuss a custom implementation if needed.

Related links

For additional guidance, head over to the Infigo Academy or contact our Customer Support team.

Embedding Videos on Product Pages

Embedding Videos on Product Pages

This article explains the challenges of embedding videos on product pages using the legacy 'Video Embed Code' field and outlines alternative approaches to achieve consistent and precise placement on modern storefronts.

The legacy field was initially designed for custom themes and may not render the video as expected in modern templates. While the embed code itself is valid, it might not display on the live product page if the field is not supported by the current theme.

For better control and consistent positioning, we recommend using Content Templates or Editable Content Blocks to embed videos either globally or on a per-product basis.

Use cases

  • Embedding a video that should appear directly underneath the order countdown on a product page.
  • Displaying the same promotional video on every product page using a global content block.
  • Inserting unique videos for individual products via a product-specific content template.

Key settings in Infigo

  • Video Embed Code: Found on the Product Edit page; a legacy option that may not render on modern storefront templates.
  • Additional Description: An alternative field for embedding content, though its placement can be limited.
  • Editable Content Block: Accessible via the Layout Manager, such as the Product Landing Page Global Content block, for consistent placement across products.
  • Product-specific Content Template: Allows manual insertion of custom HTML (including iframes) for individual products.

Step-by-step guide

  1. Confirm that the legacy Video Embed Code field contains a valid YouTube iframe embed code.
  2. View the live product page to check if the video appears; if not, this field may no longer be supported by your current theme.
  3. If the video is missing, try inserting the code into the Additional Description field, keeping in mind that its placement might not be optimal.
  4. For a more controlled solution, create an Editable Content Block via the Layout Manager (e.g., the Product Landing Page Global Content block) and paste your video embed code there.
  5. Alternatively, for individual product needs, set up a Product-specific Content Template and add the iframe directly into the HTML block.
  6. Preview and adjust the display settings until the video appears in the desired location on the page.

Related links

For additional guidance, head over to the Infigo Academy or contact our Customer Support team.

Hiding the Tier Pricing Table with Custom CSS

Hiding the Tier Pricing Table with Custom CSS

This article explains how the tier pricing table functions and how it can be hidden on your storefront when needed. The tier pricing table is shown when multiple tier prices are set, the “Use Quantity Based Pricing” setting is disabled, and there are no product attributes with price adjustments.

At present, there is no built-in system setting to hide the tier pricing table. Instead, you can use a custom CSS snippet to prevent the table from displaying on product pages. Please note that applying this snippet will hide tier pricing across all products.

This guide provides an overview of the scenarios in which you might want to hide the table, describes the key settings affecting its display, and offers step-by-step instructions for implementing the custom CSS change.

Use cases

  • Allowing users to freely enter a quantity with dynamic pricing calculations.
  • Simplifying product pages by removing the tier pricing table.
  • Ensuring a consistent storefront appearance for products that use tier pricing.

Key settings in Infigo

  • Tier Pricing Display: Automatically shown when multiple tier prices are present.
  • Use Quantity Based Pricing: Located in the product pricing configuration; must be disabled for the tier table to appear.
  • Product Attributes with Price Adjustments: Any such attributes will prevent the tier pricing table from displaying.

Step-by-step guide

  1. Confirm that your product has multiple tier prices set up.
  2. Check that the Use Quantity Based Pricing setting is disabled in the product configuration.
  3. Ensure there are no product attributes with price adjustments applied.
  4. To hide the tier pricing table, navigate to the CSS section in your admin area and add the following snippet:
    .tier-prices.catfish-classes.interpolation.orderLineTotal { display: none; }
  5. Save the CSS changes and review your storefront to verify that the tier pricing table is hidden across all products.

Related links

For additional guidance, head over to the Infigo Academy or contact our Customer Support team.

How to Remove Hints from the MegaEdit Loading Screen

When launching a MegaEdit product from the storefront, users may see a temporary loading screen that displays rotating hints. These hints are designed to assist users with editing, but in cases where editing is disabled, they may be unnecessary or confusing.

This article explains how to disable the display of these hints on the MegaEdit loading screen for specific storefronts or clients.

Disabling the hints can help streamline the user experience, especially in locked-down workflows where editing is not permitted.

Use cases

  • Locked-down MegaEdit products where users cannot make changes
  • Streamlining the user journey by removing unnecessary UI elements
  • Custom branding or simplified interfaces for specific clients
  • Reducing confusion for users unfamiliar with editing tools

Key settings in Infigo

  • MegaEdit Loading Screen Logo: Go to Admin > Editable Content > MegaEdit Loading Screen Logo

Step-by-step guide

  1. Log in to the Infigo Admin area.
  2. Navigate to Editable Content from the left-hand menu.
  3. Locate and click on MegaEdit Loading Screen Logo.
  4. In the content editor, remove or comment out the HTML elements that display the rotating hints.
  5. Optionally, replace the content with a static image or message if desired.
  6. Click Save to apply your changes.
  7. Test the product on the storefront to confirm the hints no longer appear.

Related links

For additional guidance, head over to the Infigo Academy or contact our Customer Support team.

How to Update the Login Page Welcome Text in Infigo

You can customise the welcome message on your storefront's login page by editing the relevant language string in the Infigo admin area.

This is especially useful if you manage multiple storefronts and want to differentiate them for your users.

The welcome message is controlled by a specific language resource, and changes must be made individually for each storefront and language version in use (e.g. English vs English US).

Understanding how to correctly filter and locate the language string will ensure a smooth editing experience.

 

Use cases

  • Customising the login page message to reflect the storefront’s brand or purpose
  • Clarifying which portal a user is accessing when multiple storefronts exist
  • Localising the login message for different languages or regions

 

Key settings in Infigo

  • Languages: Admin > Configuration > Languages
  • Language Resources: Admin > Configuration > Languages > Edit Resources (for the selected language)
  • Resource NameAccount.Login.Welcome

 

Step-by-step guide

  1. Log in to your storefront as an admin.
  2. Navigate to Admin > Configuration > Languages.
  3. Click View String Resources next to the language you want to edit (e.g. English or English US).
  4. In the Language Resources table, locate the Resource Name column.
  5. Click the small filter icon on the far right of the Resource Name column header (not the filter next to the Source Language).
  6. Enter The resource name or part of it (for example Account.Login.Welcome) in the filter box and press Enter.
  7. Click Edit next to the result and update the text as needed (e.g. “Welcome to the Corporate Portal”).
  8. Click Update to apply your changes. 
  9. Repeat the process for any other storefronts or languages as required.

Related links

For additional guidance, search the Infigo Academy or contact our Customer Support team.

Improving Cart Preview Thumbnails for Custom Products

This article explains why some custom product thumbnails displayed in the cart appear low resolution and how to resolve the issue. Customers may notice that products created with the custom editor display a blurry or distressed preview image when viewed in the cart summary.

The problem is isolated to customizable products while standard products continue to show high-resolution images. This discrepancy can lead to unnecessary concerns about print quality among end users.

The resolution involves updating a specific setting in the custom product configuration area. Once adjusted, the higher resolution preview will match that of standard products and improve the presentation for all storefronts.

Use cases

  • When customers view their cart and click on a product thumbnail that appears blurry.
  • When end users raise concerns about the print quality of customizable products.
  • When storefront managers need to ensure all preview images are of consistent, high quality.

Key settings in Infigo

  • Cart/Wishlist Thumbnail Image Size: Located in Admin > Settings > Media. This setting normally affects standard products.
  • MegaEdit Product Settings > Default Product Configuration > Cart Image Width: The key setting for customizable products. Changing this value improves the resolution of cart preview thumbnails.

Step-by-step guide

  1. Log in to your Infigo admin dashboard and navigate to Admin > Settings > Media. Verify the current value of the Cart/Wishlist Thumbnail Image Size.
  2. Note that modifying the Cart/Wishlist setting may affect standard products but does not resolve the issue for customizable product thumbnails.
  3. Go to MegaEdit Product Settings and select Default Product Configuration.
  4. Locate the setting labeled Cart Image Width. If it is set to a low value (for example, 200), update it to a higher value (such as 1500) to increase preview resolution.
  5. Clear all caches to ensure the new setting is applied.
  6. Impersonate a user and check the cart summary to confirm that the product thumbnails now display in high resolution.

Related links

For additional guidance, head over to the Infigo Academy or contact our Customer Support team.

Modifying the Login Page Layout

This article explains how to access and change the layout of your login page through the storefront admin area. With full storefront access, you can modify the presentation by using the layout manager.

If you find that changes are not reflected on the login page, ensure that any output caching is disabled. Disabling the cache can help display the layout manager and show your modifications in real time.

Remember, accessing the admin area and manually navigating to the login page is essential. By following these steps, you can quickly make and preview adjustments to the login page layout.

Use cases

  • Customizing the visual design of your login page
  • Troubleshooting when layout changes do not appear
  • Ensuring the most up-to-date version of the page is displayed

Key settings in Infigo

  • Storefront Admin Account: Log in through the admin area to access layout settings
  • Output Cache: Disable output caching to allow the layout manager to display modifications

Step-by-step guide

  1. Log in to your storefront using your admin account credentials.
  2. Disable the output cache setting, if active, to ensure that changes are visible immediately.
  3. Manually navigate to the login page by adding '/login' to your storefront URL.
  4. Access the layout manager from the admin area to make the desired changes to the login page.
  5. Review your changes and refresh the page to confirm that the new layout is applied.

Related links

For additional guidance, head over to the Infigo Academy or contact our Customer Support team.

Modifying the Payment Window Tax Label

This article explains how to change the tax label displayed on the Stripe payment window from 'VAT' to 'Tax'. The change is managed through the localization settings in the admin interface.

By updating the language string in the Localisations area, you can ensure that the correct label appears across all supported languages, such as English-US and English-GB.

Follow the step-by-step guide below to update the language string, clear the cache, and verify the changes in your payment window.

Use cases

  • Updating tax labels to meet regional terminology requirements.
  • Ensuring consistency across different payment configurations.

Key settings in Infigo

  • Localisations - Languages: Access the Languages section in the admin interface.
  • Resource Name: Locate the language string 'Plugins.Stripe.Checkout.VAT.Title' for both English-US and English-GB.

Step-by-step guide

  1. Log in to your admin panel and navigate to the Localisations area, then click on Languages.
  2. Search for the resource name 'Plugins.Stripe.Checkout.VAT.Title'.
  3. Update the label from 'VAT' to 'Tax' for each relevant language version (e.g., English-US and English-GB).
  4. Save your changes and clear the system cache.
  5. Run a test to confirm that the Stripe payment window now displays 'Tax' correctly.

Related links

For additional guidance, head over to the Infigo Academy or contact our Customer Support team.

Updating the Custom Logo Link

When the logo on your website is linked to an outdated URL, it is usually because the custom setting for the logo link still points to the old address.

This article explains how to update the Custom Logo Link by using the Editable Content section within your administrative dashboard.

Following the step-by-step instructions below will ensure that the logo click directs users to the correct URL.

Use cases

  • Updating the destination URL for your website's logo.
  • Ensuring customers are directed to the most current homepage or landing page.

Key settings in Infigo

  • Custom Logo Link: Located in the Header Editable Content under the Editable Content section of your admin panel.

Step-by-step guide

  1. Log in to your administrative dashboard.
  2. Navigate to the Editable Content section. This is typically found under Admin > Editable Content.
  3. Look for the field labeled 'Custom Logo Link'.
  4. Update the URL in the field to the desired destination.
  5. Save your changes to ensure the new URL is applied.

Related links

For additional guidance, head over to the Infigo Academy or contact our Customer Support team.

Updating the Logo Link via Appearance Settings

This article explains how to update the link associated with the logo displayed in the left-hand corner of your site when you have updated your website URL.

If you have already updated most URL settings but the logo link remains unchanged, you will need to access the Appearance Settings section to make this change.

Follow the step-by-step instructions below to locate the setting in your admin panel and update the logo link so that it correctly reflects your new site URL.

Use cases

  • Changing the logo link after updating your website URL.
  • Ensuring that the logo directs visitors to the correct homepage or landing page.

Key settings in Infigo

  • Appearance Settings: Access this via the Admin Dashboard under Theme Settings to update your logo and its associated link.

Step-by-step guide

  1. Log in to your Admin Dashboard.
  2. Navigate to the Appearance Settings section (often found under Theme Settings).
  3. Locate the option to update the logo. From here, you can either upload a new image or change the existing logo's link.
  4. Enter the new URL that your logo should point to and save your changes.
  5. Refresh your storefront to verify that the updated logo link is active across your site.

Related links

For additional guidance, head over to the Infigo Academy or contact our Customer Support team.

Using Two Column Layouts for Product Descriptions

In Infigo, product descriptions can be displayed in multiple areas of the product page using different editor types and layout configurations. This article explains how to create a two-column layout for product descriptions, allowing you to display content on both the right and left sides of the product image area.

By using a custom content template and configuring the product display settings, you can control where each section of your product description appears. This is especially useful for creating visually balanced layouts or separating key information into distinct areas.

This guide also covers how to resolve common styling issues, such as missing padding or unexpected white space, and how to test safely before applying changes to live products.

Use cases

  • Displaying a short summary on the right and detailed information on the left below the product image
  • Creating a visually balanced layout for marketing or promotional content
  • Separating technical specifications from general product descriptions
  • Testing layout changes on a staging or test storefront before going live
  • Improving readability and user experience on product pages

Key settings in Infigo

  • Content Templates: Admin > Content Templates
  • Additional Description Editor: Admin > Products > Edit Product > Additional Description Editor
  • Display Settings: Admin > Products > Edit Product > Display Settings
  • Apply Default Styling: Within the WYSIWYG block settings in the Content Template Editor

Step-by-step guide

  1. Log in as a Platform Admin and navigate to Content Templates.
  2. Open the existing 'Two Column (Platform)' template to view its structure and settings.
  3. In a separate browser, log in as a Storefront Admin and go to Content Templates on your storefront.
  4. Click Add New and replicate the structure of the platform-level template, including HTML markup and block settings.
  5. Under the Settings tab, check the box for Product to make the template usable on product pages.
  6. Save the new template.
  7. Go to the product you want to update and set the Additional Description Editor to Content Template Editor.
  8. Assign your new two-column template.
  9. Add a WYSIWYG block to Column 1 for content that should appear on the left below the product image.
  10. Leave Column 2 empty if you don’t want content on the right side below the add-to-basket area.
  11. Ensure Apply Default Styling is unchecked in the WYSIWYG block to avoid padding issues.
  12. Adjust the Display Settings of the product to control where the Full Description appears (e.g., set to 'Picture section bottom' to place it below the image).
  13. Save your changes and preview the product page.

Related links

For additional guidance, head over to the Infigo Academy or contact our Customer Support team.

Hiding the Add Barcode Button in Products

This article describes how to remove the 'Add barcode' button from the top of a product editor while keeping the barcode functionality intact. The solution applies to individual products where the barcode updates in real time.

Using the Barcode Fields script configuration in the admin area, you can easily hide the button by adding a small snippet of code. No changes to the barcode functionality or form fields are needed if you are already using the InVent form fields.

This guide provides step-by-step instructions and highlights key settings within the admin interface to help customize the product display in a clear and efficient manner.

Use cases

  • Customizing the product editor for a cleaner user interface.
  • Hiding unnecessary buttons to reduce user confusion.
  • Maintaining real-time barcode functionality without extra UI elements.

Key settings in Infigo

  • Barcode Fields Script Configuration: Access this setting in the product's admin panel under the barcode fields section.
  • Config Pop-up: Open the configuration pop-up to modify the settings.

Step-by-step guide

  1. Log in to the admin panel and navigate to the desired product.
  2. Locate the Barcode Fields script settings for that product.
  3. Open the configuration pop-up where the barcode script settings are defined.
  4. Add the following snippet to the configuration: { ShowButton: false }
  5. Save the configuration changes.
  6. Reload the product editor to confirm that the 'Add barcode' button is no longer visible.

Related links

For additional guidance, head over to the Infigo Academy or contact our Customer Support team.

How to Change the Layout of the Basket Page

When you need to adjust the layout of your basket page you have two main options:


1. Use Built-In Basket Layout Settings

  1. Go to Appearance Settings.
  2. Look for the Basket/Cart Style setting: it usually provides two different layout options.
  3. Change to the alternative layout and Save to see if this meets your needs.


2. Adjust Via CSS

If the built-in settings don’t adjust the layout as required, you’ll need to use custom CSS. This might involve:

  1. Targeting specific elements in your stylesheet.
  2. Applying margin, padding, or positioning rules to reposition, resize or remove elements.

Note: Please note that while we can advise on where and how to add custom CSS, creating or troubleshooting custom code falls outside our standard support scope.


Need More Help?
Visit the Infigo Academy for tutorials and step-by-step guides on customizing your storefront.

Customizing the Storefront Login Page

This article explains why you may not be able to change the layout of your storefront login page and provides clear steps to access the layout manager for modifications.

Even with full storefront access, the login page layout is controlled by a separate admin area that requires a storefront admin account and a specific URL path.

By following the instructions below, you can ensure that the layout manager is visible and make the desired changes to your login page design.

Use cases

  • Troubleshooting issues with modifying the login page layout
  • Accessing advanced layout settings through the admin area
  • Ensuring changes to the login page are reflected on the live storefront

Key settings in Infigo

  • Storefront Admin Account: Login using your storefront admin account to access the admin area for layout modifications
  • Output Cache: Disable the output cache if the layout manager is not visible
  • Login Page URL: Manually append /login to your storefront URL to access the login page layout manager

Step-by-step guide

  1. Log in to the admin area using your storefront admin account credentials.
  2. If the layout manager is not visible, disable the output cache to ensure the latest changes are displayed.
  3. Navigate to your storefront URL in the search bar and manually add /login at the end. For example, if your URL is https://yourstorefront.com, visit https://yourstorefront.com/login.
  4. Once on the login page, use the layout manager tools to modify the design as needed! 

 

 

 

For additional guidance, head over to the Infigo Academyor contact our Customer Support team.

How To Remove the Registration Form from Login page

If you would like new users to use your storefront without having to register, you may remove the Registration Form (highlighted below) from the login page.

registration1.png

Steps

To remove the registration form from the login page, please follow the instructions below:

1. Navigate to Admin > Configuration > Settings > Customer Settings. Click on the Registration tab and then the down arrow in the drop down box next to Registration method. Select the 'Disabled' entry from the drop-down list.

registration2.png

 

2. Save the configuration and log out to test the change. Your login page should now look like the following (assuming there have been no layout/skinning changes to your storefront):

registration3.png

How to Update Text on the Login Page in Infigo

1. Overview

This article provides clear instructions on how to update or edit the text displayed on the login page of your Infigo storefront. If you are an administrator struggling to locate where to modify the wording for fields such as "Forgotten Password?" or "Welcome, Please Sign In!", this guide will walk you through the process.

For additional information and detailed tutorials, the Infigo Academy offers extensive resources on a wide variety of topics. Visit the Infigo Academy to search and browse our content.

2. Contents

  1. Overview
  2. Contents
  3. Key Points and Takeaways
  4. Key Settings
  5. Scenario-Based Guide
    • Editing Login Page Text via the Language Editor
  6. FAQs
  7. Alternate Search Terms

3. Key Points and Takeaways

  • All text visible on the login page, such as "Forgotten Password?" or "Welcome, Please Sign In!" can be modified using the Languages pages in the Admin panel.
  • Changes must be made under specific resource names for different text elements.
  • Text is editable only if you're logged in as an admin user.

4. Key Settings

Language Resource Editor

  • Path: Admin Panel > Configuration > Languages > View String Resources [for chosen language]
  • Explanation: This is where all language keys (resource names) and their respective values are stored. These keys control the text displayed across your storefront, including the login page.

5. Scenario-Based Guide


Editing Login Page Text via the Language Editor

Problem:
You need to update text like "Forgotten Password?" or "Welcome, Please Sign In!" on the login page, but these options are not available in the Content Pages or Editable Content sections.

Solution:

  1. Log in to your Admin account.
    • Ensure you have administrative access to modify language resource, such as Storefront Administrator access.
  2. Navigate to the Language Resources section:
    • Go to Admin Panel > Configuration > Languages > View String Resources [for chosen language]
  3. Search for the relevant resource name:
    • Use the column fileters to locate the specific language resource for the text you want to edit.
      • If you know the resource name, filter the Resource Name column, however if you know the exact text you're looking to replace, filter in the Value column.
      • Common resource names for the login page include:
        • Account.Login.ForgotPassword (for "Forgotten Password?")
        • Account.Login.ReturningCustomer (for "Existing User Login")
        • Account.Login.Welcome (for "Welcome, Please Sign In!")
  4. Edit the text value:
    • Click the Edit button next to the resource name.
    • Modify the Value field to the desired text. For example, change "Welcome, Please Sign In!" to "Log In to Your Account".
  5. Save the changes:
    • Click Save to apply the update. The new text will now appear on the login page.
  6. Test the changes:
    • Navigate to your storefront's login page and refresh to confirm the updated text is displayed.
    • You may need to clear you Infigo cache or browser cache if this doesn't appear immediately.

6. FAQs

Q1: Why can’t I see the login page text in Editable Content or Content Pages?
The login page text is managed via the Language Resource Editor. It is not editable through the Content Pages section as it relies on predefined resource keys.

Q2: How do I revert changes made in the Language Editor?
Simply return to the Language Resource Editor, locate the same resource name, and update the value back to its original text or preferred wording.

Q3: Will these changes affect other pages?
No, changes to these specific resource keys will only impact the login page.

Q4: Can I modify the font or style of the login page text?
Text style and formatting are controlled by the storefront’s theme settings or custom CSS, which are separate from the Language Resource Editor.


For additional information and detailed tutorials, the Infigo Academy offers extensive resources on a wide variety of topics. Visit the Infigo Academy to search and browse our content.

How to Update the Login Page Welcome Text in Infigo

You can customise the welcome message on your storefront's login page by editing the relevant language string in the Infigo admin area.

This is especially useful if you manage multiple storefronts and want to differentiate them for your users.

The welcome message is controlled by a specific language resource, and changes must be made individually for each storefront and language version in use (e.g. English vs English US).

Understanding how to correctly filter and locate the language string will ensure a smooth editing experience.

 

Use cases

  • Customising the login page message to reflect the storefront’s brand or purpose
  • Clarifying which portal a user is accessing when multiple storefronts exist
  • Localising the login message for different languages or regions

 

Key settings in Infigo

  • Languages: Admin > Configuration > Languages
  • Language Resources: Admin > Configuration > Languages > Edit Resources (for the selected language)
  • Resource NameAccount.Login.Welcome

 

Step-by-step guide

  1. Log in to your storefront as an admin.
  2. Navigate to Admin > Configuration > Languages.
  3. Click View String Resources next to the language you want to edit (e.g. English or English US).
  4. In the Language Resources table, locate the Resource Name column.
  5. Click the small filter icon on the far right of the Resource Name column header (not the filter next to the Source Language).
  6. Enter The resource name or part of it (for example Account.Login.Welcome) in the filter box and press Enter.
  7. Click Edit next to the result and update the text as needed (e.g. “Welcome to the Corporate Portal”).
  8. Click Update to apply your changes. 
  9. Repeat the process for any other storefronts or languages as required.

Related links

For additional guidance, search the Infigo Academy or contact our Customer Support team.

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.


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.

How to Change Text / Wording on your Storefront

Almost every piece of text contained within Infigo has what's known as a language string attached to it. The language string is basically a set of characters (letters, numbers etc.) which the system "reads" and uses to populate most text fields.

If you navigate to Configuration > Languages you will see that Infigo supports multiple languages, all of which have string resources which you can view by clicking their respective View string resources button.

mceclip0.png

mceclip1.png

(click here to see full image)

Once you click on "View string resources" for the language you wish to edit, you will come to a page which lists every language string used on your storefront. In the screenshot below, and for the purposes of this example, I have selected "English" as this is the language I primarily use on my storefront.

NOTE: Its important that you always set the Source language to English (not English US) as this is the language bundle that contains ALL of the default language strings. So when you perform a search its wise to start your search by filtering the Source Language column which will be all the system English language strings.

Note: Each language has its own set of language strings and as such, changing the string for one language will not affect the strings for another.

mceclip2.png

(click here to see full image)

As you will be able to see, there are a lot of language strings present and all of these can be edited or removed entirely. 

For this example, I will be changing the "Log out" link at the top of my storefront's page, as shown below.

mceclip3.png

Rather than look through the many pages of language strings, I am going to search for the one I need by filtering the results by language strings which have a value that matches "Log out". In order to do this, you need to click on the filter icon I have highlighted in the following screenshot.

asdasdasd.jpeg

(click here to see full image)

Note: Whilst it is possible to filter by Resource Name as well as Value, it is often easier to search by the value as this is what you will see and what you will be changing.

Once you have clicked this button, the following menu will appear:

mceclip4.png

The first dropdown list contains the following filter types:

mceclip5.png

Is equal to - This will return any language strings whose value perfectly matches what you put in the field below it. If there is a single character different, including a missing space, then the result will not be returned. For example, if I were to enter "Log out" then it would return the language string I am looking for. However, if I were to enter "Logout" it would not return anything as there is not a language string with a value matching "Logout".

Is not equal to - This option does the exact opposite to the previous one, it will return every string with a value that does not perfectly match what you enter in the field below. For example, if you were to enter "Log out" it would return every language string except for the one relating to "Log out".

Starts with - This will return all strings with a value which starts with what you enter in the field below. For example, if you were to choose this option and enter the letter "A" it would return all language strings that start with A.

Contains - This will return all language strings whose values contain the entered characters at any point in their value. This means that if you were to enter "Log" or "out" then the language string relating to "Log out" will return.

Ends with - This will return all language strings whose values end with what you enter into the field. For example, if you were to enter "." it would return all strings whose values end with a full stop.

As I know the exact text of the string I am looking for, I will be searching the value using the Is equal to option, and entering "Log out" into the field, as shown in the screenshot below.

mceclip6.png

Now, if you click Filter, it will return all results which match the filtration criteria I have just set, as shown in the following screenshot.mceclip8.png

(click here to see full image)

Now all you need to do is click "Edit" and change the value of the field to whatever you want it to be. For this example, I will be changing it from "Log out" to "Sign out" and save my changes by clicking "Update"

mceclip9.png

(click here to see full image)

Note: Whilst it is indeed possible to change the Resource Name of the language string, it is not advised to do so as this could interfere with the system and cause the string to not load correctly.

As you can see in the following screenshot, the text has now changed from "Log out" to "Sign out"

mceclip10.png

How to Control Pricing Visibility by Viewer on Your Infigo Storefront

Overview

This article explains how to manage pricing visibility on your Infigo storefront. You can either bulk-hide all pricing or request customization to control visibility for specific user types.

For more tutorials, visit the Infigo Academy.


Key Options

Option 1: Bulk Hide Pricing

  • Path: Go to General Settings > Hide all pricing on the storefront.
  • Explanation: This setting removes all pricing from the storefront for all users.

Option 2: Custom Pricing Visibility Control

  • Setup: If you need pricing to display differently based on user status (e.g., guests vs. logged-in users), contact Infigo Support for assistance with customization.

Steps to Control Pricing Visibility

Blanket Hide Pricing

  1. Navigate to Settings > General Settings.
  2. Enable the Hide all pricing on the storefront option.
  3. Save changes and test the storefront to confirm pricing is hidden.

Custom Pricing Visibility

  1. Submit a support request to Infigo.
  2. Specify your requirements for pricing visibility (e.g., show only to registered users).
  3. Await confirmation from the Infigo team and test the changes once implemented.

FAQs

  • Can I configure custom pricing visibility myself?
    No, this requires assistance from Infigo Support.
  • Can I hide all pricing for everyone?
    Yes, use the Hide all pricing on the storefront option in General Settings.

For more resources, visit the Infigo Academy.

Adding a Border to Product Images on Category Pages

This article explains how to add a border and backdrop to product images within category pages on your Infigo storefront. This is a common customization request for storefronts aiming to enhance the visual presentation of product listings. This guide provides step-by-step instructions using CSS modifications to achieve this, ensuring your storefront’s category pages are visually appealing and consistent.

2. Contents

  1. Overview
  2. Contents
  3. Key Points and Takeaways
  4. Problems This Solves
  5. Key Settings
  6. Scenario-Based Guide
    • Scenario 1: Adding a Border Using CSS
  7. FAQs
  8. Troubleshooting
  9. Alternate Search Terms

3. Key Points and Takeaways

  • Adding a border to product images on category pages is done through CSS customization.
  • Ensure you download your existing CSS file before making changes.
  • If you don't have an existing CSS file, you can upload a new one with the modifications.
  • The solution applies to specific categories or products, ensuring targeted customization.

4. Problems This Solves

  • Lack of visual distinction for product images within categories.
  • Difficulty maintaining consistent design across multiple storefronts.
  • Providing a simple solution for storefront managers to customize appearance without extensive coding knowledge.

5. Key Settings

CSS Override:

  • Path: Content Management > CSS Override
  • Explanation: This setting allows users to upload or edit the CSS file applied to your storefront. By customizing this file, you can control the appearance of various elements, including product images in category pages.

6. Scenario-Based Guide

Scenario 1: Adding a Border Using CSS

Problem: You want to add a border and backdrop to product images on a category page to enhance visibility and design.

Solution:

  1. Access the CSS Override Section:

    • Navigate to your storefront’s dashboard.
    • Go to Content Management > CSS Override.
    • If an existing CSS file is present, download it before making any changes.
  2. Edit the CSS File:

    • Open the CSS file in a code editor.
    • Add the following CSS snippet:
       
      .arone-category-page .category-product-section .product-item .picture { padding: 20px; background: grey; }
       
       
    • This code adds padding around product images and sets a grey backdrop. Adjust the padding and background color as needed to fit your design preference.

     

  3. Upload the Modified CSS File:

    • Save the edited CSS file.
    • Return to the CSS Override section and upload the modified file.
  4. Verify the Changes:

    • Refresh your storefront’s category page to see the changes applied.
    • If the border does not appear, double-check the CSS file for any errors or missing components.

     

  5. Additional Tips:

    • If your CSS file contains specific sections for categories, place the code within that section to maintain organization.

7. FAQs

  1. What should I do if I don’t see the border after uploading the CSS?

    • Ensure the CSS file is correctly linked in your storefront settings. You might need to clear your browser cache or refresh the page to see the updates.
  2. What if I don’t have an existing CSS file?

    • If no CSS file is available, create a new one with the snippet provided and upload it directly in the CSS Override section.

Adding a Downloadable File or Button to the Homepage

You can easily add a downloadable file to your storefront homepage using Infigo's editable content blocks. This allows you to offer resources like brochures, templates, or guides directly from your homepage. You can also style the link as a button for a more visually engaging experience.

This article also covers how to apply custom CSS if you want to style individual links or buttons differently from your global theme settings.

 

 

Use cases

  • Providing a downloadable brochure or flyer on the homepage
  • Offering a template or sample file for customers to download
  • Creating a visually styled button that links to a downloadable file
  • Customising link or button colours for specific content blocks
  • Adjusting spacing or layout using CSS overrides

 

Key settings in Infigo

  • Editable Content Blocks: Content Management > Editable Content
  • Appearance Settings: Content Management > Appearance Settings
  • Custom CSS: Content Management > CSS Override

 

Step-by-step guide

  1. Navigate to Content Management > Editable Content.
  2. Select a homepage content block such as Homepage Above Midpage or Homepage Below Midpage.
  3. In the content editor, utilise content templates to create stylised sections, columns and content. Select a File content block
  4. Once created, upload the file you wish to provide as a download
  5. Use the Settings icon (represented by a gear) to change how the link to this download appears on your page. For example, you can provide a simple linked text, a button or more. In this example, we will select a button.
  6. To style the link or button, you can:
    • Use the Appearance Settings to change global link or button colours (note: this affects the entire site).
    • Or apply custom CSS to target specific links or buttons for individual styling.
  7. To add custom CSS:
    • Go to Content Management > CSS Override.
    • Add a CSS rule targeting the specific element (e.g., using a class or ID).
    • Example:
       .download-link { color: #ffffff; background-color: #000000; padding: 10px 20px; display: inline-block; text-decoration: none; } 
  8. Save your changes and preview the homepage to ensure the file link or button appears and functions as expected.

New Login-Page Appearance Option for B2B sites

A new appearance setting updates the behaviour of Login Style “Option 2 (Recommended for B2B)”, keeping the background image fixed while only the form scrolls.
This provides a sleeker, more professional look for corporate storefronts and ensures consistent branding across devices.

Highlights

  • Added appearance setting for controlled scroll behaviour

  • Background image remains static as the form moves

  • Optimised for B2B login experiences

How to implement

  1. Go to Admin > Appearance Settings.

  2. Select Login Style: Option 2 (Recommended for B2B).

  3. Enable the new “Fixed background scroll” setting.

  4. Save and preview the login page to confirm only the form scrolls.

Date-Picker Localization

The datepicker component is now fully localisable, allowing translated day and month names and flexible date formats.
This ensures a consistent, region-specific experience for international storefronts.

Highlights

  • Localized day and month names

  • Customizable date formats per language

  • Applies across checkout and My Account forms

How to implement

  1. Go to Admin > Languages.

  2. Edit the desired language and search for keys vue.datepicker.days and vue.datepicker.months.

  3. Update the comma-separated values for days (7) and months (12).

  4. Save and verify translations appear in the storefront datepicker.

Incomplete
🔎
Loading…
    Select a tip or trick