Skip to main content

Create a store card for search results

A Store Card controls one result in the Store List. It is a reusable template: fields such as store name, address, image, distance, and opening status are filled from each result at runtime.

1. Create the design​

  1. Go to Store Locator → Builder.
  2. Select New.
  3. Choose Store Card.
  4. Enter a name that describes its intended use, such as Compact list card or Immersive image card.
  5. Create the design.

2. Build the outer structure​

Add an outer container and choose its column structure. Use nested containers only where they create a real grouping—for example, image beside content, or title/address above actions.

Set desktop and mobile widths for every container. A two-column desktop card will normally need stacked or deliberately narrowed columns on mobile.

3. Add dynamic store content​

Select + Content in the appropriate container and add the required elements. Common elements include:

  • hero/store image;
  • Store name;
  • Address or locality;
  • Opening Hours or Open now;
  • Distance;
  • category, brand, or custom store field;
  • Details button, directions, phone, or website action.

For a Store field element, select the field in the inspector rather than typing a token-looking value into ordinary text. Use Prefix and Suffix only when they still read correctly if the dynamic value is absent.

4. Style the card states​

Set spacing, background, border, radius, typography, and image behavior. Then configure hover and keyboard focus for any clickable area. Keep essential text readable without hover.

To give the selected store a distinct card color, select the Store Card container and set Selected store → Active background. This color replaces the container's normal background only while the card's .cliq-sl-result wrapper is active—for example, after the visitor selects that card or its map marker. Clear the color to keep the normal card background for both states.

For a full-image design, use a tint overlay strong enough to protect text contrast over both light and dark photos. A slight image blur on hover can add depth, but respect reduced-motion preferences and do not blur the content overlay.

Add a Details button or make an image, title, or entire card clickable. Avoid a whole-card link when the card also has separate phone, website, or directions links.

6. Assign the card to a locator​

  1. Save the Store Card.
  2. Open the target Layout in the Builder.
  3. Select its Store List widget.
  4. Choose the new Store Card in the widget settings.
  5. Save the Layout.

If no per-layout card is selected, the plugin can use Store Locator → Settings → Defaults → Default store card.

Test real content, not only preview data​

Open the published locator and test a store with a missing image, long name, long translated address, no known visitor distance, closed status, multiple categories, and empty optional custom fields. Check desktop, narrow mobile, keyboard focus, and the loading state after a filter change.