Alcance

Este artículo cubre las opciones ofrecidas para personalizar los pines de ubicación del producto Locator & Pages. Esto incluye el color y el logotipo del pin, así como el color y el logotipo del clúster.

Personalizar todos los pines

Color del pin

El color del pin base de Locator se puede cambiar a otro color con el atributo data-locationpincolor. Este atributo acepta tres tipos diferentes de valor de color: un valor RGB, un código HEX o el nombre del color.

data-locationpincolor = "RGB(255,0,0)"
data-locationpincolor = "#F50000"
data-locationpincolor = "red"

Color del pin al pasar el cursor

El color del pin base de Locator al pasar el cursor se puede cambiar a otro color con el atributo data-locationpinhovercolor. Este atributo acepta tres tipos diferentes de valor de color: un valor RGB, un código HEX o el nombre del color.

data-locationpinhovercolor = "RGB(0,255,0)"
data-locationpinhovercolor = "#00FF00"
data-locationpinhovercolor = "green"

Logotipo del pin

El logotipo del pin predeterminado se puede cambiar con el atributo data-locationpinurl. Este atributo acepta la URL directa de la imagen que deseas usar como pin. El logotipo debe ser un archivo .png o .jpg para que se muestre correctamente en Locator.

data-locationpinurl = "https://s3.eu-central-1.amazonaws.com/uberall-downloads-prod/uberall_logo2.jpg"

Logotipo del pin al pasar el cursor

Puedes cambiar el pin a otro logotipo cuando pasas el cursor sobre él con el atributo data-locationpinhoverurl. Este atributo acepta la URL directa de la imagen que deseas usar como pin. El logotipo debe ser un archivo .png o .jpg para que se muestre correctamente en Locator.

data-locationpinhoverurl = "https://cdn.join.com/5d4915171a5a1000068c03c7/uberall-gmb-h-logo-xl.png"

Personalizar logotipos de pines a nivel de negocio

La configuración anterior del logotipo del pin aplica los pines personalizados a todas las ubicaciones de Locator. Lo siguiente te permitirá establecer un pin personalizado con un logotipo a todos los pines de un único negocio (cuenta). Esto es útil si tienes múltiples negocios o marcas en el mismo Locator y deseas diferenciarlos fácilmente con pines. Esto se puede lograr con el atributo data-locationpinurl-business. El id del negocio (id de cuenta) debe especificarse para la asociación con el logotipo del pin personalizado. Puedes encontrar el id del negocio en la URL cuando inspecciones una cuenta en la plataforma Uberall. Cuando uses diferentes logotipos de pines por negocio, se puede definir un logotipo de reserva.

data-locationpinurl = "https://s3.eu-central-1.amazonaws.com/uberall-downloads-prod/uberall_logo2.jpg"
data-locationpinurl-business = "337141=https://cdn.join.com/5d4915171a5a1000068c03c7/uberall-gmb-h-logo-xl.png"

data-locationpinurl-business="337141=https://cdn.iconscout.com/icon/premium/png-256-thumb/donut-1410601-1193527.png,
77215=https://www.top5reviewed.com/wp-content/uploads/2016/01/Donut-Cushions.png,
337143=https://cdn.iconscout.com/icon/premium/png-256-thumb/donut-174-878224.png"

Quitar el fondo blanco del logotipo

Si los logotipos que utilizas como pines personalizados tienen un fondo transparente, es posible que desees que sea transparente en Locator. Por defecto, el pin tendrá un fondo blanco. Para cambiar el color de este fondo predeterminado, es necesario utilizar CSS.

#store-finder-widget .custom-pin-default{
   background: none !important
   }


 #store-finder-widget .custom-pin-highlighted{
   background: none !important
   }