"Design anpassen" ist zu unauffällig

Genau! <3 Gerade deshalb wäre es wichtig, dass man als Shop fertig ausgestaltete Designs mit mehreren Motiven und individuell (innerhalb des Druckbereichs) skalierten/platzierten Motiven anbieten könnte! Wir freuen uns auf euren Bescheid, wann das möglich sein wird.

Das Design des Textes und des Buttons (css) kann doch jeder selbst anpassen und vergrößern oder irre ich mich?

Wie z.B.

.SprdMain .sprd-design-edit-tile__preview {
    position: absolute;
    top: 40%;
    background-color: rgba(255,255,255,0.5);
}

und Text ersetzen mit:

.SprdMain .sprd-design-edit-tile__preview span {
    display:none
}

.SprdMain .sprd-design-edit-tile__preview:after {
    content: 'Produkt anpassen';
    text-align: center;
}

1 Like

Ich habe mich für diese Lösung entschieden:
edit-this

Gruß David

1 Like

Es geht hier um den Button “Design anpassen” nicht um das Design selbst :slight_smile: siehe Grün umkreist. Oder schraubst du am Programmiercode von Spreadshirt herum? Wegen deines Quelltextes da oben …

Das weiß ich und genau das habe ich auch mit meiner Antwort adressiert :slight_smile:

Das ist CSS und den kannst du für deinen Shop selbst ändern unter: “Shop bearbeiten” -> “Erweitert” -> “HTML & CSS” und dort unter “Shop CSS bearbeiten” den oben genannten CSS-Code einfügen.

Wie man sieht, kann man mit dem Code die Position, den Inhalt und die Farbe des Buttons schnell und einfach anpassen.


P.s. So siehts noch auffälliger aus :wink:

.SprdMain .sprd-design-edit-tile__preview {
    position: absolute;
    top: 40%;
    background-color: #E2122F;
    color:#ffffff;
}
.SprdMain .sprd-design-edit-tile__preview span {
    display:none
}

.SprdMain .sprd-design-edit-tile__preview:after {
    content: 'Produkt anpassen';
    text-align: center;
}

@lovetee’s Lösung ist völlig sauber und funktioniert einwandfrei.

Gruß David

2 Likes

Achso, jetzt verstehe ich! Du bist ein Genie sozusagen :slight_smile:
Aber CSS ist nicht so mein Ding…
Mir wärs ja lieber wenn Spreadshirt das für Alle macht.

Prettylittlebuyers, Ich finde deine Variante - links daneben - sehr gut.

Css ist nichts schlimmes und sofern du deinen shop weiter individualisieren möchtest, kommst du da nicht drum herum :slight_smile:
Wenn Spreadshirt eine derartige Funktion einbaut, dauert das, aufgrund der verschiedenen Prioritäten, unter Umständen mehrere Wochen. Dann muss es noch getestet werden und in ein neues Release verpackt werden.
Diese Anpassung wäre für dich in 5 min erledigt und alles wie du es dir für deinen Shop vorstellst :wink:

Pretylittlebuyers nutzt das WP-Spreadplugin, das ist noch mal eine ganz andere Ebene der Individualisierung :slight_smile:

lovetee

CSS mache ich bislang nur mit editor GoLive. Ansonsten nicht.
kannst du mal deinen Shoplink einstellen? Würde den verschobenen Design-Button mal gerne sehen, in deinem geänderten Shop und testen :wink: Danke.

Hier:

Danke lovetee! Das ist sehr auffällig - kann man garnicht übersehen.
verdeckt nur leider das Motiv. Aber egal.
Ich würde ja anstatt “Produkt anpassen” besser schreiben: “Motiv anpassen”

denn das Produkt ist ja das Shirt, und das kann der Käufer ja nicht anpassen, sondern nur das Motiv (Design).

Und ich würde den Button eher nach links oder rechts setzen, da durch das Rot sowieso voll ins Auge springt.

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

.SprdMain .sprd-design-edit-tile__preview {
position: absolute;
top: 40%;
background-color: #ffffff;
color: #00b2a5;
width: 155px;
max-width: 100%;
height: 53px;
left: 64px;
  -webkit-border-radius: .2em;
border-radius: .2em;
}

.sprd-design-edit-tile__preview svg {
flex: 1;
width: 28px;
height: 28px;
position: absolute;
left: 12px;
}
.SprdMain .sprd-design-edit-tile__preview span {
    display:none
}

.SprdMain .sprd-design-edit-tile__preview:before {
    content: 'Willst du das Produkt anpassen?';
    text-align: left;position: absolute;
left: 50px;
}

.SprdMain .sprd-design-edit-tile__preview:after {
content: '';
    position: absolute;
    left: 159.5px;
    top: 25px;
    width: 0;
    height: 0;
    border-left: 7.5px solid transparent;
    border-right: 7.5px solid transparent;
    border-top: 7.5px solid #fff;
    clear: both;
  -webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}

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: )