Sehr geehrte Shopbetreiber,
seit längerem kann man in den Grundeinstellungen Links für unsere Android- (in Kürze auch iOS-) App hinterlegen.
Bisher erschien unauffällig im Footer dann ein Symbol zum Store über das man die App installieren kann.
Diese Funktion wurde jetzt verbessert. Statt des kleinen Logos im Footer erscheint jetzt ein Popup im oberem Teil der Seite.
Wenn der Kunde also mobil auf den Shop zugreift bekommt er die Meldung, dass es eine App zu Ihrem Shop gibt. Sollte er die Meldung wegklicken wird die Seite nicht neu geladen sodass der Kunde ohne Wartezeit einfach weiter shoppen kann. Mit einem Klick auf Installieren öffnet sich dann der Store des jeweiligen Systems über den die App installiert werden kann.
Auch dieses Popup kann über ein Template unter Layout > Mobile App > App Popup jederzeit angepasst werden, für jede Shopsprache ganz individuell.
In diesem Template können Sie die folgenden drei Synonyme verwenden:
Die Funktion wird von Powergap beim Einrichten der App mit installiert und kann auf Wunsch auch deaktiviert werden.
Beispiel Code:
Beispiel CSS:
seit längerem kann man in den Grundeinstellungen Links für unsere Android- (in Kürze auch iOS-) App hinterlegen.
Bisher erschien unauffällig im Footer dann ein Symbol zum Store über das man die App installieren kann.
Diese Funktion wurde jetzt verbessert. Statt des kleinen Logos im Footer erscheint jetzt ein Popup im oberem Teil der Seite.
Wenn der Kunde also mobil auf den Shop zugreift bekommt er die Meldung, dass es eine App zu Ihrem Shop gibt. Sollte er die Meldung wegklicken wird die Seite nicht neu geladen sodass der Kunde ohne Wartezeit einfach weiter shoppen kann. Mit einem Klick auf Installieren öffnet sich dann der Store des jeweiligen Systems über den die App installiert werden kann.
Auch dieses Popup kann über ein Template unter Layout > Mobile App > App Popup jederzeit angepasst werden, für jede Shopsprache ganz individuell.
In diesem Template können Sie die folgenden drei Synonyme verwenden:
- #store_logo : je nachdem ob es sich um ein iPhone oder ein Android-Gerät handelt wird hier das App-Store- bzw Play-Store-Symbol angezeigt
- #link : auch hier wird nach Endgerät der entsprechende Link für den Store-Eintrag automatisch gesetzt
Die Funktion wird von Powergap beim Einrichten der App mit installiert und kann auf Wunsch auch deaktiviert werden.
Beispiel Code:
<div id="app_popup" class="popup">
<span class=popup2>
#shopname
</span>
<span class="popup_text_k">Installieren Sie jetzt unsere App und lassen sich bequem über Spezial-Angebote informieren.
</span>
<img src="#store_logo" width="60%">
<a href="#link"><div id="install" class="popup_button positive">INSTALLIEREN</div></a>
<div id="not_install" class="popup_button negative">NEIN DANKE</div></div>
<span class=popup2>
#shopname
</span>
<span class="popup_text_k">Installieren Sie jetzt unsere App und lassen sich bequem über Spezial-Angebote informieren.
</span>
<img src="#store_logo" width="60%">
<a href="#link"><div id="install" class="popup_button positive">INSTALLIEREN</div></a>
<div id="not_install" class="popup_button negative">NEIN DANKE</div></div>
Beispiel CSS:
.popup {
z-index: 10002;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
background-color: #f3f3f3;
-webkit-box-shadow: 0px 5px 44px 4px rgba(0,0,0,0.49);
-moz-box-shadow: 0px 5px 44px 4px rgba(0,0,0,0.49);
box-shadow: 0px 5px 44px 4px rgba(0,0,0,0.49);
color: #444444;
text-align: center;
padding: 25px;
transition: all 0.6s ease-in;
line-hight:30px;
}
.popup2 {font-size: 44px; color: #444444;font-weight:bold;}
.popup_text_k {font-size: 44px;}
.popup_text_m {font-size: 28px;}
.popup_button {
position: relative;
left: 0px;
right: 0px;
top: 37px;
font-size: 48px;
color: #f1f1f1;
padding: 48px;
border-radius: 4px;
text-align: center;
}
.positive {background-color: #388E3C;top: 5px;}
.negative {background-color: #D32F2F;margin-bottom: 21px;}
z-index: 10002;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
background-color: #f3f3f3;
-webkit-box-shadow: 0px 5px 44px 4px rgba(0,0,0,0.49);
-moz-box-shadow: 0px 5px 44px 4px rgba(0,0,0,0.49);
box-shadow: 0px 5px 44px 4px rgba(0,0,0,0.49);
color: #444444;
text-align: center;
padding: 25px;
transition: all 0.6s ease-in;
line-hight:30px;
}
.popup2 {font-size: 44px; color: #444444;font-weight:bold;}
.popup_text_k {font-size: 44px;}
.popup_text_m {font-size: 28px;}
.popup_button {
position: relative;
left: 0px;
right: 0px;
top: 37px;
font-size: 48px;
color: #f1f1f1;
padding: 48px;
border-radius: 4px;
text-align: center;
}
.positive {background-color: #388E3C;top: 5px;}
.negative {background-color: #D32F2F;margin-bottom: 21px;}