Integration Shop eigene Website - Seitenrand / mobile Darstellung

Deutsch Spreadshop
#1

Hallo zusammen,

ich habe eben meinen Shop via Wordpress Plugin in meine eigene Website eingebettet. Das hat auch alles soweit funktioniert, nur ergeben sich zwei Probleme:

(1) Es werden weißen Seitenränder (oben, unten, links, rechts) eingefügt, siehe Anhang - wie kann ich diese löschen?

(2) Bei der mobilen Darstellung (Handy, Tablet) wird die Größe des Shops zwar skaliert, aber die Anzeige bleibt identisch zur Desktop-Variante: Reiter “Alle Produkte”, ‘Männer’, etc. anstatt eines Dropdown-Icons (siehe mobile Darstellung via Spreadshirt-Domain). Auch das würde ich gerne anpassen.

Ich hoffe ihr könnt mir hier helfen.

Vielen Dank und liebe Grüße,
Sebastian

Screenshot_Shop_wei%C3%9Fe_R%C3%A4nder
Screenshot_Shop_wei%C3%9Fe_R%C3%A4nder1280×800 25.7 KB

#2

Hallo Sebastian,

die Ränder werden wohl aus dem Page Template von Wordpress kommen. Da musst du im CSS rumbasteln. Zur mobilen Darstellung ist es gerade schwer etwas zu sagen.

Hast du ggf. einen Link wo man sich das mal anschauen kann?

Viele Grüße

#3

Hi, danke dir!

Meinst du im CSS-Feld in der Shop-Administration bei Spreadshirt direkt? Oder wo sonst?

Was genau muss ich denn ändern/anpassen? Kenne mich mit CSS leider nicht wirklich aus :smiley:

zu (2) hier der Link:
http://beispielverein3.myteamshop.de/shop#!/

Die Produktkategorien werden über mobile Endgeräte suboptimal dargestellt.
Dazu ist links etwas “abgeschnitten”, der Shopname liegt direkt am Rand.

Es wäre klasse, wenn du mir hier helfen könntest!

Danke und liebe Grüße

#4

sample_1
sample_11901×975 57 KB

Du kannst deinen Shop so aussehen lassen.
Dafür müsstest du sowohl im CSS in der Shopadmin was ändern als auch im Wordpress.
Der Spreadshop hat eine Breite von max. 1400px.
Im CSS in der Shopadmin müsstest du ein
#sprd-main, #sprd-footer {max-width: 100%;} einfügen

Im CSS von Wordpress müsstest du folgendes ändern:
.site-inner{max-width:100%;}
.site-content{padding:0;}

Da ich die Struktur des CSS nicht kenne, kann ich dir aber leider nicht sagen, wo du das einfügen musst.

Mobil sieht es insgesamt aber auch ganz gut aus. Um den Titel zu verschieben müsste man die media queries anpassen. Das wäre jetzt allerdins etwas zu viel über das Forum

Viele Grüße

1 Like
#5

Hi,

klasse, danke dir, es funktioniert und sieht aus wie auf deinem Bild!

Jedoch stört mich immer noch der weiße Rand oben und unten - wie kriege ich das angepasst?

Kannst du mir hier noch einmal helfen? Oder jemand anderes? :slight_smile:

LG

#6

Also wenn du nur den Shop anzeigen möchtest, brauchst du kein Wordpress.

Es reicht eigentlich nur eine index.html mit dem angepassten Inhalt, wie hier:

Oder du nutzt ein sog. Blank-Template. Im Grunde eine Seitenvorlage, die komplett “leer” ist. :slight_smile:

1 Like
#7

Danke dir! :slight_smile:

Ich kenne mich leider nicht wirklich aus, wo finde ich denn meine index.html oder ein Blank-Template?

Kann ich das irgendwo innerhalb meines Wordpress finden? Also damit ich kein Plugin installieren muss, sondern den Shop mit diesem Code dort einfügen kann.

LG

#8

Welchen Anbieter hast du für deinen Webspace?

Im Wordpress unter Themes “Hinzufügen” einmal nach “Blank” oder derartiges suchen :slight_smile:

Wie gesagt entweder Wordpress oder direkt.

@Rock-Witches willst du vielleicht helfen?

1 Like
#9

Wenn Du Wordpress nutzt, nutzt Du keine index.html und die index.php im Rootverzeichnis, die zu Wordpress gehört, solltest Du nicht editieren. Bei Wordpress solltest Du stattdessen alles über den Wordpress-Adminbereich machen.

Wer kein Wordpress oder ein anderes CMS benutzt, kann sich einfach via FTP mit seinem Webspace verbinden (z.B. mithilfe des Clients “Filezilla”). Dort angekommen, kann man einfach eine leere Datei erstellen, diese index.html nennen und sie mit einem HTML-Gerüst füllen. Im Bodybereich dann einfach den “Shiop”-Code einfügen, alles abspeichern und fertig ist der Lack.

Du kannst die Datei auch anders nennen aber dann wird sie nicht automatisch aufgerufen wenn du die Domain im Browser lädst.

2 Likes
#10

Klasse, vielen Dank euch beiden, ihr habt mir sehr geholfen! :slightly_smiling_face:

Ich verwende jetzt das Spreadshirt Plugin auf einem Blank-Template.

Einziges Problem: der Shop auf meiner Seite hat eine andere Schriftart, als der direkt bei Spreadshirt gehostete.

Leider sieht das recht doof aus, wie kann ich das denn anpassen? Bzw. am liebsten wäre es, wenn der Shop einfach 1:1 übernommen werden würde.

Könnt ihr mir hier auch helfen?

Zur Verdeutlichung:

Bild
Bild828×1792 101 KB
Bild
Bild828×1792 96.3 KB

#11

Schau mal unter wp-content/themes/DEIN_THEME/style.css
nach, welche Schriftart dort eingestellt ist und mache eine Raute (#) vor den Eintrag, um ihn auszukommentieren oder trage die passende Schriftart ein (arial…glaube ich)

Scanne nach font-family:

Bei Dir scheint momentan Times New Roman eingestellt zu sein.#

Kannst Dich auf diese Weise aber nicht blind darauf verlassen, dass es bei allen Nutzern richtig angezeigt wird. Ist nur richtig, wenn Font auf dem System installiert ist.

Gibt aber auch Möglichkeiten, Fonts fest zu installieren. Falls nötig, nachfragen.

#12

Hallo Rock-Witches,

danke für deine Ausführungen.

Ich habe beides getestet - klappt leider beides nicht.

(1) # vor den Eintrag mit font-family setzen: da kommt eine Fehlermeldung; siehe Anhang

(2) Arial eingesetzt anstatt courier (so ist das bei dem Theme wohl vorgegeben)

Was mache ich hier falsch?

Langsam verzweifle ich hier, ich will doch nur meinen Shop / zukünftig mehrere Shops auf eigenen Domains laufen lassen :smiley:

LG

38
381280×800 317 KB

#13

Oh ja, das kann so auch nicht funktionieren. Sorry, dass ich so spät antworte. Hab’s einfach übersehen.

Es gibt zwei Möglichkeiten, css-Code auszukommentieren. Mit # wird eine ganze Zeile auskommentiert, was normalerweise kein Problem wäre…wenn man css nicht so als Spaghetticode schreiben würde.

Die zweite Möglichkeit ist /* Anweisung */ (Slash Sternchen…Anweisung Sternchen Slash). Ist die einzige Möglichkeit bei Spaghetticode, also Code bei dem alle Anweisungen hintereinandergepackt sind.

/*font-family: courier;*/
oder
font-family: arial,courier;

Also…die schriftart auszuwechseln sollte eigentlich funktionieren. Es könnte am Cache liegen wenn Du es nicht sofort siehst. Du musst dabei courier gar nicht löschen. Setze einfach eine arial, (Komma nicht vergessen) davor. CSS arbeitet hierarchisch. courier würde dann nur abgearbeitet wenn arial auf dem User-Rechner nicht vorhanden ist.

Viel Erfolg

P.S. ,Falls alle Stricke reißen, richte mir bitte einen Account auf Deinem Wordpress ein. Den kannst Du anschließend wieder löschen.

1 Like