How to Create and Highlight Online Stores

Agile Store Locator allows you to add and manage online-only stores alongside physical store locations. This guide explains how to create, identify, and visually differentiate online stores within the store locator listing using custom fields and JSRender templates.

---

Step 1: Add a Custom Field for Online Stores #

1. Go to ASL Settings > Manage Additional Fields.
2. Click Add New Field.
3. Set the following values:
   • Field Key: online_store
   • Label: Online Store
   • Type: Checkbox
4. Save the field.

This checkbox will now appear in the “Add/Edit Store” form.

Step 2: Use the Checkbox When Adding or Editing a Store #

When adding a store via Manage Stores, check the Online Store checkbox for stores that do not have a physical location and are purely digital (e.g., eCommerce, marketplaces).

Step 3: Differentiate Online Stores in the Store Listing #

Using the {{if online_store}} condition in your JSRender template, you can apply styles and behaviors that highlight online stores visually. Below are several customization ideas:

1- Change Background Color #

Highlight online listings with a distinct background.

<li class="sl-item {{if online_store}}asl-online-store{{/if}}">

.asl-online-store {
  background-color: #f0f8ff !important;
}

2. Add an “Online Store” Tag #

Display a label on the top-right of the listing item.

{{if online_store}}
<span class="asl-tag-online">Online Store</span>
{{/if}}

.asl-tag-online {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #007bff;
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
}

3. Hide Directions Button #

Skip directions for online-only stores.

{{if !online_store}}
<a class="btn btn-asl s-direction">[Directions]</a>
{{/if}}

4. Show “Shop Now” Instead of Visit #

Replace default “Visit Website” button with a strong CTA.

{{if online_store}}
<a class="btn btn-asl btn-shop-now" href="{{:link}}" target="{{:target}}">Shop Now</a>
{{else}}
<a class="btn btn-asl btn-asl-outline s-visit-website" href="{{:link}}" target="{{:target}}">[Website]</a>
{{/if}}

5- Add a Corner Ribbon #

{{if online_store}}
<div class="asl-ribbon"><span>Online</span></div>
{{/if}}

.asl-ribbon {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: absolute;
  top: -5px;
  right: -5px;
}
.asl-ribbon span {
  position: absolute;
  width: 140px;
  background-color: #ff5e5e;
  color: white;
  text-align: center;
  transform: rotate(45deg);
  top: 20px;
  right: -40px;
  font-size: 11px;
}

6- Add Tooltip or Note #

{{if online_store}}
<div class="pol-12">
  <p class="text-muted"><i class="icon-info"></i> This is an online-only store.</p>
</div>
{{/if}}

7- Add Badge on Store Logo #

<div class="pol-sm-4 {{if online_store}}asl-logo-online{{/if}}">

.asl-logo-online::after {
  content: 'Online';
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0,123,255,0.7);
  color: white;
  font-size: 10px;
  padding: 2px 5px;
}

8- Animate Listings (Pulse Effect) #

<li class="sl-item {{if online_store}}asl-highlight{{/if}}">

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0,123,255, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(0,123,255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0,123,255, 0); }
}
.asl-highlight {
  animation: pulse 3s infinite;
}

Summary #

Create a custom field named online_store.

Use {{if online_store}} in the HTML from ASL Settings > Customizer > Template.

Add CSS to Appearance > Customize > Additional CSS.

Modify button labels, layout, and visuals to suit your online stores.