Skip to content
  • There are no suggestions because the search field is empty.

How does Visually work on the storefront?

Fetching Experiences & Targeting Rules

Once the Visually runtime loads, it securely communicates with Visually’s backend to determine which experiences should be applied for the current visitor and page.

These experiences can include:

  • Visual Editor changes
  • A/B test variants
  • Personalization campaigns
  • Product recommendation widgets
  • Feature flags
  • Audience targeting rules

The decision engine evaluates multiple factors in real time, such as:

  • Current URL/page
  • Device type
  • Visitor behavior
  • Audience segments
  • Experiment allocations
  • Customer attributes

Only the experiences relevant to that specific visitor are returned and applied, helping minimize unnecessary data transfer and maintain fast performance.

Non-Destructive Client-Side Modifications

Visually applies changes directly within the browser using lightweight DOM and CSS manipulations.

This allows teams to modify the storefront experience without permanently changing the Shopify theme codebase.

Supported Modifications Include

  • Updating text and images
  • Changing styles and layouts
  • Reordering or moving elements
  • Showing or hiding sections
  • Injecting UI components such as:
    • Banners
    • Popups/modals
    • Badges
    • Recommendation widgets
    • Promotional elements

Because all modifications are applied dynamically at runtime:

  • Original theme files remain untouched
  • No permanent code changes are made
  • Disabling Visually immediately restores the original storefront experience

This “non-destructive” architecture significantly reduces deployment risk and allows teams to experiment safely without affecting core storefront stability.

Routing & Dynamic Navigation Support

Modern Shopify themes increasingly use dynamic page navigation and partial page rendering instead of full page reloads.

Visually’s runtime automatically detects:

  • Route changes
  • AJAX navigation events
  • Dynamic content updates

When navigation occurs, the runtime intelligently re-evaluates and reapplies the relevant experiences for the new page state.

This ensures experiences remain consistent and functional across:

  • Collection pages
  • Product pages
  • Search/navigation flows
  • Single-page-app-like storefront behaviors