Rechner auf Shopify Seite veröffentlichen

Deutsch Diskussion Technische Fragen & Antworten

Topic summary

Ein Nutzer möchte einen Granit-Gewichtsrechner (bestehend aus HTML, CSS und JS-Dateien) auf einer Shopify-Seite mit eigenem Layout veröffentlichen, ist aber unsicher über die korrekte Implementierung.

Erste Lösung:

  • Verwendung eines “Custom HTML”-Abschnitts in der Vorlage
  • Alternativ: Im Backend über den “<>”-Button in die HTML-Ansicht wechseln
  • CSS und JS können verkürzt werden, da sie bereits auf der Seite vorhanden sind
  • Nur der HTML-Markup-Teil muss eingefügt werden

Aktuelles Problem:
Der Rechner funktioniert grundsätzlich und gibt Ergebnisse aus, aber das CSS wird nicht korrekt übernommen. Der eingefügte Code enthält fehlerhafte HTML-Tags - CSS-Regeln wurden fälschlicherweise in <script>-Tags statt <style>-Tags platziert.

Status:
Finer hat eine korrigierte Code-Struktur bereitgestellt (im letzten Post angedeutet, aber abgeschnitten). Die Diskussion ist noch offen, da die vollständige Lösung zur korrekten Tag-Verwendung noch implementiert werden muss.

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

Guten Tag,

Ich würde gerne einen Rechner auf meiner Shopify Website veröffentlichen. Er soll auf dieser Seite ausgegeben werden: https://iynxtools.de/pages/granit-rechner

Ich habe diese Seite einer eigener Layout-Vorlage zugewiesen.

Ich habe folgenden Code erhalten. Bestehend aus: HTML Datei, CSS Datei und JS Datei.

HTML

Granit Gewichtsrechner

Granit Gewichtsrechner

Länge (cm):

Breite (cm):

Dicke (cm):

Dichte (kg/m³):

Berechnen

CSS Datei

.calculator {
margin: 0 auto;
width: 50%;
padding: 20px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}

h1 {
text-align: center;
}

form {
display: flex;
flex-direction: column;
}

label {
margin-top: 10px;
}

input {
padding: 5px;
margin-bottom: 10px;
}

button {
margin-top: 10px;
padding: 5px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}

button:hover {
background-color: #3e8e41;
}

#result {
margin-top: 10px;
text-align: center;
font-size: 24px;
font-weight: bold;
}

JS Datei

function calculateWeight() {
var length = document.getElementById(“length”).value;
var width = document.getElementById(“width”).value;
var thickness = document.getElementById(“thickness”).value;
var density = document.getElementById(“density”).value;
var result = document.getElementById(“result”);

var volume = length * width * thickness / 1000000;
var weight = volume * density;

result.innerHTML = “Das Gewicht beträgt " + weight.toFixed(2) + " kg.”;
}

Leider wie und wo ich die HTML Datei einfügen soll. Ich habe ja die theme.liquid mit einem bereits bestehenden doctype. Kann ich das einfach dazwischen bzw. an letzter stelle vor einfügen?

Danke

2

@blackforest22 In der Vorlage solltest du die Möglichkeit haben einen “Custom HTML” Abschnitt einfügen zu können. Alternativ kannst du auch auf der Seite (Backend) in der Beschreibung rechts oben den Button “<>” sehen. Dadruch kommst du in die HTML-Ansicht und kannst dort den Code einfügen.

Denk aber daran, das Script in die entsprechenden Tags zu setzen:

Das gilt auch für den CSS Abschnitt:

Da beides (CSS und JS) bereits auf der Seite sind, kannst du das HTML auf Folgendes kürzen:


# Granit Gewichtsrechner
3

Vielen Dank Finer.

Das hat sehr geholfen. Ich habe den Code im Backend wie beschrieben im HTML Feld eingefügt. Er gibt jetzt auch eine Lösung aus. Ich denke er übernimmt das CSS nicht richtig. Ich kann mich aber auch täuschen.

Hier ist der von mir eingefügte Code nach deiner Anleitung:

Granit Gewichtsrechner

Länge (cm): Breite (cm): Dicke (cm): Dichte (kg/m³): Berechnen

4

Das ist von den HTML-Tags her nicht korrekt. Probiere folgendes aus:


# Granit Gewichtsrechner
1 Like