"Design anpassen" ist zu unauffällig

Danke für deine Hinweise, aber ich habe den Button nur für dich und alle anderen zur Ansicht einmal so in meinem Shop eingefügt. Ich persönlich setze etwas komplett anderes ein.

Falls jemand Interesse oder Fragen zur Umsetzung oder Umgestaltung hat, einfach melden :slight_smile:

1 Like

Mit dem folgenden CSS sieht es dann aus, wie hier:

3e557f0b5c766ec6a9f8af94a42050e5d6fce618_1_690x388

Code hier: :spreadshop: Tipps und Tricks: Die besten Lifehacks - #2 by lovetee - Spreadshop - Spreadshop Official Forum

Dies wäre hier einzufügen:
“Shop Einstellungen” → “Erweitert” → “HTML & CSS” → “Shop CSS bearbeiten”

2 Likes

Hallo Lovetee

Super, hat geklappt. War ja ganz einfach einzufügen, der CSS-Code.
So siehts nun aus (habe ich in alle 3 Shops eingebunden)

Allerdings steht bei mir nun Design / Motiv.
Denn das “Produkt” kann man ja nicht anpassen.

Beispiel:

1 Like

Sauber! (Der Text ist Ansichtssache :wink: )

Hi @lovetee

Ich habe deinen Code oben kopiert und eingefügt, leider tut sich bei mir überhaupt nichts, keine Änderung. Kann es sein dass Spreadshop in der zwischenzeit was geändert hat am Code sodass diese Anpassung nicht mehr funktioniert?

1 Like

@lovetee
Habs hingekriegt bzw. den aktualisierten Code in dem anderen Thread gefunden.

An alle die hier diesen Thread via Suche finden:
Der Code in diesem Thread ist nicht mehr aktuell. Aktualisierten Code hat Lovetee hier gepostet:

2 Likes

Super, habe den alten Beitrag mal angepasst :slight_smile:

3 Likes

@lovetee

Vielen Dank für den Code… läuft super… ausser bei Tank Tops… ist das nur bei mir so?

Ist bei mir auch so… :thinking:

Danke für die Erklärung für Blondinen :wink: Ich hab es sogar hinbekommen und du weißt, dass das was heißt :grimacing: :stuck_out_tongue_winking_eye:

oh bei dir funktionieren die Tank Tops jetzt?

Nein, leider nicht

das wird meiner Meinung nach auch nicht wirklich funktionieren… die Fotos plus Edit Button unter dem Produkt sind bei den Shirts und Hoodies 5 an der Anzahl. Bei Produkten wo es unter dem Hauptbild nur 3 Fotos plus Edit Button = Anzahl 4 gibt funktioniert es nicht. Ich glaube auch fast das dies mit CSS nicht lösbar sein wird… da die Child Elemente (Fotos und Edit Button) ja fix von Spreadshirt vergeben sind…

Bei Shirts wäre der Edit Button Child Element 5, beim Tank Top Child Element 4… ich denke darum wird lovetee das nicht eingebaut haben… und ich weiss jetzt schon das Spreadshirt das egal sein wird… da die Spreadshops sowieso sehr stiefmütterlich behandelt werden

EDIT: Vielleicht weiss aber Lovetee da eine Lösung…

Ich glaube so war es tatsächlich, müsste man noch einmal schauen ob es andere Selektoren gibt, die man dafür verwenden kann.

1 Like

Bin gespannt was da noch verwendet werden könnte…ich hab ein wenig geschaut bin aber kein CSS Profi

:nth-last-child(1) könnte vielleicht die Lösung sein. Habe es aber noch nicht umfassend getestet.

.SprdMain .sprd-detail-images__views > button:nth-last-child(1) {
    position: absolute;
    top: 40%;
    background-color: red;
    color: white;
    width: 155px;
    max-width: 100%;
    height: 60px;
    left: 64px;
    -webkit-border-radius: 0.2em;
    border-radius: 0.2em;
    border: 0;
    overflow: visible
}
.SprdMain .sprd-detail-images__views > button:nth-last-child(1) svg {
flex: 1;
    width: 28px;
    height: 28px;
    position: absolute;
    left: 12px;
    top: 12px;
    color: white;
}
.SprdMain .sprd-detail-images__views > button:nth-last-child(1) span {
  display: none;
}
.SprdMain .sprd-detail-images__views > button:nth-last-child(1)::after {
    content: "";
    position: absolute;
    left: 151px;
    top: 25px;
    width: 0;
    height: 0;
    border-left: 7.5px solid transparent;
    border-right: 7.5px solid transparent;
    border-top: 7.5px solid red;
    clear: both;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.SprdMain .sprd-detail-images__views > button:nth-last-child(1)::before {
    content: "Willst du das Produkt anpassen?";
    text-align: left;
    position: absolute;
    left: 50px;
    display: block;
    top: 6px;
    padding: 0;
}
.SprdMain .sprd-detail-images__views > button:nth-last-child(1):hover {
box-shadow: none;
background-color: darkred
}
2 Likes

Cool…ich schau Mal am Abend…gilt das nur für Produkte mit 3 Produkt Bildern oder ?

@Berliner_Original

gute Idee… leider ist das Last Child Element bei den Produkten mit 5 Bildern das Element das runterscrollt zu den Product Views

Habs mir eben mal genauer angeschaut. Der Edit-Button hat doch eine eigene Klasse! Problem erledigt würde ich sagen ohne es getestet zu haben:

.SprdMain .sprd-detail-images__views > button.sprd-detail-images__view--edit {
    position: absolute;
    top: 40%;
    background-color: red;
    color: white;
    width: 155px;
    max-width: 100%;
    height: 60px;
    left: 64px;
    -webkit-border-radius: 0.2em;
    border-radius: 0.2em;
    border: 0;
    overflow: visible
}
.SprdMain .sprd-detail-images__views > button.sprd-detail-images__view--edit svg {
flex: 1;
    width: 28px;
    height: 28px;
    position: absolute;
    left: 12px;
    top: 12px;
    color: white;
}
.SprdMain .sprd-detail-images__views > button.sprd-detail-images__view--edit span {
  display: none;
}
.SprdMain .sprd-detail-images__views > button.sprd-detail-images__view--edit::after {
    content: "";
    position: absolute;
    left: 151px;
    top: 25px;
    width: 0;
    height: 0;
    border-left: 7.5px solid transparent;
    border-right: 7.5px solid transparent;
    border-top: 7.5px solid red;
    clear: both;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.SprdMain .sprd-detail-images__views > button.sprd-detail-images__view--edit::before {
    content: "Willst du das Produkt anpassen?";
    text-align: left;
    position: absolute;
    left: 50px;
    display: block;
    top: 6px;
    padding: 0;
}
.SprdMain .sprd-detail-images__views > button.sprd-detail-images__view--edit:hover {
box-shadow: none;
background-color: darkred
}
3 Likes

Danke dir :pray:, schaut gut aus soweit.

1 Like