Slider bei Logos - mobile

[Winade_shop]

Hallo zusammen,

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

Danke!

[Finer]

@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?

[Winade_shop]

Hi @Finer ,

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

VG

[Finer]

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

[Winade_shop]

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

[Finer]

@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.😉

[Winade_shop]

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

Danke!

[Finer]

@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.