Blöcke nebeneinander Platzieren

Deutsch Diskussion Shopify Design
,

Topic summary

Ein Nutzer fragt, wie man zwei Blöcke im Sense Theme nebeneinander statt untereinander platzieren kann.

Antwort:

  • Die Grids sind fest im Theme codiert (hardcoded)
  • Eine Anpassung erfordert umfangreiche Code-Änderungen
  • Geschätzte Kosten mit Programmierer: ca. €5.000

Technische Lösung (CSS Flexbox):

  • Beide Blöcke müssen in einem gemeinsamen Container sein
  • Verwendung von display: flex für den Container
  • flex: 1 und min-width: 45% für beide Blöcke
  • gap: 20px für Abstand zwischen den Blöcken
  • Media Query bei max-width 750px für responsive Design (untereinander auf kleineren Bildschirmen)

Wichtige Hinweise:

  • Immer in Themekopie/Testumgebung testen
  • Backup erstellen vor Code-Änderungen
  • Code-Änderungen können Page Loading Speeds beeinflussen und Theme-Updates ausschließen
  • Lösung ohne Gewähr, theme-abhängig

Zusätzlich werden Gamification-Elemente für den Shop vorgeschlagen.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

Hallo,

weiß jemand, wie man die Blöcke 1 & 2 nebeneinander bekommt statt untereinander ?
Ich benutze das Sense Theme.

automatensnack_0-1715870026803.png
automatensnack_0-1715870026803.png1239×583 35.5 KB

Danke!

2

Hey @automatensnack

Die oben abgebildeten Grids sind in das Theme ge-hardcoded und um sie nebeneinander zu haben, würde eine ziemlich Code Anpassung verlangen. Kostenschätzung mit einem Programmierer: um die €5k.

Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Du könntest CSS flexbox verwenden aber ich habe da meine Zweifel. Stelle sicher, dass beide Blöcke in einem gemeinsamen Container enthalten sind wie folgt aus meinem Sense Theme in der Developer Console entnommen.


  

    

      

        

          

            ## 
              Talk about your brand
            
            
              

Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store.

            

            
              Button label

Füge die folgenden CSS-Regeln hinzu, um die beiden Blöcke nebeneinander anzuordnen:

.container {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* Abstand zwischen den Blöcken */
}

.block1, .block2 {
  flex: 1;
  min-width: 45%; /* Mindestens 45% der Breite für jeden Block */
}

@media (max-width: 750px) {
  .container {
    flex-direction: column;
  }
}
  • Flexbox Container: Der container-Div verwendet display: flex, um die beiden Blöcke nebeneinander anzuordnen.
  • Flex-Kinder: Die block1 und block2 Divs haben flex: 1, um ihnen gleiche Flex-Werte zu geben und min-width: 45%, um sicherzustellen, dass sie mindestens 45% der Breite einnehmen.
  • Abstand: gap: 20px fügt einen Abstand zwischen den beiden Blöcken hinzu.
  • Responsive Design: Ein Media-Query ändert das Layout für Bildschirme mit einer Breite von 750px oder weniger, um die Blöcke untereinander anzuordnen (flex-direction: column).

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink:

Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.