Sense Theme - Video mit Textbox

[Anonym1]

Hallo 🙂

Ich möchte in meinem Onlineshop gerne eine Video Section einfügen. Rechts davon soll sich ein Textfeld mit icons befinden. Ich hätte es sehr gerne exakt so, wie in der anhängenden Datei dargestellt. Ich habe mich schon überall durch geklickt und nichts passendes gefunden, vermutlich ein manuell hinzugefügter Code? 

Vielen Dank vorab für die Hilfe.

[Gabe]

Hey @Anonym1 

Danke für das Bild! Der einfache Weg: um das möglichst genau wie in deinem Bild in unserem Free Sense Theme zu bauen wirst du wahrscheinlich einer unserer Page Builder Apps verwenden müssen. Es gibt Page Builder Apps , die es ermöglichen, sehr professionelle benutzerdefinierte Seiten und Abschnitte zu erstellen oder spezifische Layouts für Produkte mit deren Video und Texte zu gestalten. Apps wie "PageFly Advanced Page Builder" oder "Shogun Landing Page Builder" können dir helfen, das zu erreichen.

Dann wäre es auch zu erwägen zu einem unserer Premium Themes zu wechseln denn die können das viel besser was du für den Design deines Shops gerne hättest. Hier ein Beispiel eines solchen Section, dass du auf jeder Seite einbauen kannst, und das du links oder rechts-gerichtet einstellen kannst, aus einem unserer Premium Themes genommen:

• vermutlich ein manuell hinzugefügter Code? 

Haha, wenn es bloß so einfach wäre... Um eine Videosektion mit einer danebenliegenden Textbox und Icons im Shopify Sense Theme zu erstellen, musst du wahrscheinlich tatsächlich eine benutzerdefinierte Sektion mit etwas HTML, CSS und möglicherweise etwas Liquid-Code einfügen. Hier ist eine grundlegende Anleitung, wie du vorgehen kannst:

Schritt 1: Vorbereitung

Stelle sicher, dass du Zugriff auf den Theme-Code hast. Gehe dazu in deinem Shopify-Dashboard zu Online Store > Themes und klicke auf Actions > Edit code.

Schritt 2: Neue Sektion erstellen

1. Klicke im Theme-Editor auf Add a new section.
2. Gib der Sektion einen Namen, zum Beispiel video-with-textbox.
3. Füge den folgenden Code in die neue Sektionsdatei ein:

{% schema %}
{
  "name": "Video with Textbox",
  "settings": [
    {
      "type": "text",
      "id": "video_url",
      "label": "Video URL",
      "default": "https://www.example.com/video.mp4"
    },
    {
      "type": "textarea",
      "id": "text_content",
      "label": "Text Content",
      "default": "Hier dein Text..."
    }
  ]
}
{% endschema %}

{% stylesheet %}
<style>
  .video-text-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .video-container {
    flex: 1;
    padding-right: 20px;
  }
  .text-container {
    flex: 1;
    padding-left: 20px;
  }
</style>
{% endstylesheet %}

{% javascript %}
<script>
  // Hier könnte JavaScript-Code stehen, falls nötig
</script>
{% endjavascript %}

<div class="video-text-container">
  <div class="video-container">
    <video width="100%" controls>
      <source src="{{ section.settings.video_url }}" type="video/mp4">
      Dein Browser unterstützt das Video-Tag nicht.
    </video>
  </div>
  <div class="text-container">
    {{ section.settings.text_content | newline_to_br }}
  </div>
</div>

Schritt 3: Sektion zur Homepage hinzufügen

1. Gehe zurück zum Hauptmenü des Theme-Editors.
2. Wähle Customize für dein aktuelles Theme.
3. Füge die neue Sektion zur Homepage hinzu, indem du Add Section auswählst und dann Video with Textbox findest.
   
   

Schritt 4: Anpassungen und Styling

• Du kannst den CSS-Code innerhalb der Sektion anpassen, um das Layout, die Farben und andere Stilelemente zu ändern.
• Für Icons kannst du HTML-Code innerhalb des Textfelds verwenden oder zusätzliche Einstellungen in der Sektionsschema hinzufügen, um Icons über eine Benutzeroberfläche einzufügen.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

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

[Anonym1]

Hey 🙂
Vielen Dank für deine schnelle Antwort. Ich schaue mir gleich mal an welche Lösung für mich passender ist. Ich habe noch eine Ergänzung und zwar habe ich mir den Seitenquelltext des Onlineshops anzeigen lassen. Kannst du anhand dessen erkennen, ob es sich um einen customize HTML-Code handelt oder doch nur eine page builder App verwendet wurde? 

</div>
</div>

</section><div id="shopify-section-template--16775621476587__16486285883be73f4d" class="shopify-section"><section class="pro_vid_img_sec">
  <div class="page-width">
    <div class="pro_vid_img_row">
      
      
      <div class="vid_img_box">
        
<!--         <iframe width="100%" height="100%" frameborder="0" allow="fullscreen; picture-in-picture" title="vimeo Video Player" src="https://cdn.shopify.com/videos/c/o/v/201ccb3390864944bda48b9b3c45b498.mp4?autoplay=1&amp;playsinline=1&color&aautopause=0&loop=1&muted=1&title=1&portrait=1&byline=1"></iframe> -->
       <video class="b-lazy b-loaded" autoplay="true" loop="true" muted="" playsinline="" controlslist="nodownload" src="https://cdn.shopify.com/videos/c/o/v/201ccb3390864944bda48b9b3c45b498.mp4"></video>
        
      </div>
      
      <div class="text_box">
         
        <h3>Die Zukunft ist haarfrei! 💜</h3>
         
       
        <div class="pro_icon_text">
          
          
          <div class="item">
            
            <div class="progress_icn">
              <div class="icon_progress" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="--value: 95"></div>
            </div>
            
            
            <div class="text">
              Sagten, dass ihre Erdbeerbeine verschwunden sind
            </div>
            
          </div>
          
          
          
          <div class="item">
            
            <div class="progress_icn">
              <div class="icon_progress" role="progressbar" aria-valuenow="94" aria-valuemin="0" aria-valuemax="100" style="--value: 94"></div>
            </div>
            
            
            <div class="text">
              Bemerkten einen Rückgang von eingewachsenen Haaren
            </div>
            
          </div>
          
          
          
          <div class="item">
            
            <div class="progress_icn">
              <div class="icon_progress" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="--value: 90"></div>
            </div>
            
            
            <div class="text">
              Bemerkten eine Verbesserung der Hautstruktur
            </div>
            
          </div>
          
          
          </div> 
        
         <div class="b-product-card__benefits-asterisk">
            <p> *Ergebnisse klinischer Studien. Mehr Informationen findest du auf der jeweiligen Produktseite.</p>
                </div>
         
        <div class="vid_img_btn"><a class="btn" href="/products/crystal-hair-eraser"><span>JETZT BESTELLEN</span></a></div>
                                                                                         
  
      </div>
      
      </div>
  

[Gabe]

Hey @Anonym1 

Es sieht es so aus, als ob der Code Teil einer benutzerdefinierten Shopify-Sektion ist, die speziell für diesen Shop entwickelt wurde.

Der Abschnitt <div id="shopify-section-template--16775621476587__16486285883be73f4d" class="shopify-section"> ist typisch für Shopify-Liquid-Sektionen, bei denen eine eindeutige ID verwendet wird, die von Shopify generiert wird. Dies deutet darauf hin, dass es sich um eine speziell für dieses Theme oder diesen Shop entwickelte Sektion handelt.

Die Klassennamen wie pro_vid_img_sec, pro_vid_img_row, vid_img_box, und text_box sowie das Layout dieser Elemente deuten auch darauf hin, dass es sich um eine speziell gestaltete Sektion handelt. Diese Namen sind nicht typisch für Standard-Shopify Themes und scheinen benutzerdefiniert zu sein, um spezifische Stil- und Strukturanforderungen zu erfüllen. Die Klassennamen wie pro_vid_img_sec, pro_vid_img_row, vid_img_box, und text_box sowie das Layout dieser Elemente deuten darauf hin, dass es sich um eine speziell gestaltete Sektion handelt.

Hoffe das hilft dir weiter und noch ein schönes W-Ende!