FROM CACHE - de_header

Slider bei Logos - mobile

Winade_shop
Forscher
85 0 8

Hallo zusammen,

 

wir nutzen das Theme Flow. Wie kann ich Produkte oder Logos swipebar machen, also als Slider darstellen?

 

Winade_shop_0-1669637130831.png

Danke!

7 ANTWORTEN 7

Finer
Shopify Expert
2038 426 728

@Winade_shop ich würde einfach mal behaupten, dass es standardmäßig gar nicht möglich ist. Ihr könntet aber eine Slider Section darunter setzen, welche ihr dann nur in der mobilen Ansicht zeigt, wohingegen die Icon-Reihe nur auf dem Desktop sichtbar ist. Dafür sind ein paar HTML und CSS Kenntnisse von Vorteil.

 

Habt Ihr Kenntnisse in diesen Bereichen?

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
Winade_shop
Forscher
85 0 8

Hi @Finer ,

bisher kann ich keine separate mobile Ansicht erstellen. Also alles, was ich Desktop ändere, ändert sich 1:1 mobil.

 

VG

Finer
Shopify Expert
2038 426 728

@Winade_shop, das ist das erwartete Verhalten. Deswegen habe ich die Anmerkungen zu HTML und CSS gemacht 😉

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
Winade_shop
Forscher
85 0 8

lesen ja, schreiben eher nein. Es sei denn, ich kopiere eine Vorlage rein

Finer
Shopify Expert
2038 426 728

@Winade_shop leider habe ich keine Flow-Version in der ich einfach mal die Schritte 1:1 erläutern könnte. Im Grunde muss man folgende Schritte dafür durchführen:

 

1. In der CSS Datei eine neue Klasse definieren, welche per Media-Query einen Abschnitt einblenden/ausblendet:

.only-mobile {
 display:block;
}

.only-desktop {
display:block
}

@media only screen and (min-width: 769px){
.only-mobile {
 display:none;
}

@media only screen and (max-width: 768px){
.only-desktop{
 display:none;
}

 

Danach muss man im jeweiligen Abschnitt im Schema eine Checkox-Input Funktion unter den Settings hinterlegen:

{
  "type": "checkbox",
  "id": "only_mobile",
  "label": "Hide on Desktop",
  "default": false
},
{
  "type": "checkbox",
  "id": "only_desktop",
  "label": "Hide on Mobile",
  "default": false
},

 

In dem Abschnitt musst du dem ersten Container dann noch eine Kondition hinzufügen:

<section class="xxxxxx {% if sections.settings.only_mobile %}only_mobile{% elsif sections.settings.only_desktop %}only_desktop{% endif %}">

 

Nach dem Speichern kannst du im Theme-Editor dem Abschnitt dann in der Checkbox angeben, wo der Abschnitt eingeblendet werden soll. Wenn nichts ausgewählt ist, ist es in der mobilen Ansicht und Desktop-Ansicht sichtbar.

 

Wie bereits erwähnt, musst du das für das Theme an die richtige Stelle einrichten. Da jedes Theme etwas anders aufgebaut ist, gibt es keine allgemeingültige Anleitung dafür.

 

Am besten, du erstellst vorher eine Sicherheitskopie des Themes.

 

Disclaimer

Da ich das ganze gerade aus dem Kopf heraus formuliert habe, besteht keine Garantie dafür, dass das auf Anhieb funktionieren wird.😉

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
Winade_shop
Forscher
85 0 8

super, danke! Fangen wir mit Schritt 1 an: Welche CSS Datei davon? 😂

Winade_shop_0-1669818246999.png

Danke!

Finer
Shopify Expert
2038 426 728

@Winade_shop wie bereits erwähnt, kenne ich das Flow-Theme nicht und auch nicht wie es genau aufgebaut ist. Von dem was ich sehen kann, gibt es eventuell für jeden Abschnitt ein eigene CSS Datei. Das heißt. Du müsstest überall, wo es zutrifft, die CSS hinterlegen.

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency