Handy Storefront Styling Tips & Tricks đź“ťV2

Read our handy storefront styling tips and tricks!

This is a paragraph to introduce the page.

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.




Accordion Example
WYSIWYG stands for "What You See Is What You Get" which means that the styling choices made in this editor will be reflected on the front end.
Accordion Example
WYSIWYG stands for "What You See Is What You Get" which means that the styling choices made in this editor will be reflected on the front end.
How to Embed Videos on your Product Landing Page

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.





Accordion Example
WYSIWYG stands for "What You See Is What You Get" which means that the styling choices made in this editor will be reflected on the front end.
Accordion Example
WYSIWYG stands for "What You See Is What You Get" which means that the styling choices made in this editor will be reflected on the front end.
Incomplete