Πώς προσθέτω προσαρμοσμένο CSS σε όλο το κατάστημά μου ή σε ένα τμήμα;

Το CSS αλλάζει την εμφάνιση του καταστήματός σας: χρώματα, αποστάσεις, μεγέθη και άλλα. Μπορείτε να προσθέσετε το δικό σας CSS σε δύο σημεία στον builder: για όλο το κατάστημα ή μόνο για ένα τμήμα.

Προσαρμοσμένο CSS για όλο το κατάστημα

Κάντε κλικ στο εικονίδιο με το γρανάζι και ανοίξτε την καρτέλα Custom CSS. Το πλαίσιο ονομάζεται CSS code: Applies to the entire store. Το CSS σας φορτώνεται σε κάθε σελίδα της αγοράς που επεξεργάζεστε και η προεπισκόπηση δείχνει το αποτέλεσμα.

Χρησιμοποιήστε το για κανόνες που πρέπει να ισχύουν παντού, για παράδειγμα για να κρύψετε ένα στοιχείο σε όλες τις σελίδες ή να αλλάξετε το στυλ όλων των κουμπιών. Για παράδειγμα, το h1 { text-transform: uppercase; } γράφει τον κύριο τίτλο κάθε σελίδας με κεφαλαία γράμματα.

Προσαρμοσμένο CSS για ένα τμήμα

Επιλέξτε ένα τμήμα στην καρτέλα Sections. Στο κάτω μέρος των ρυθμίσεών του, ανοίξτε την καρτέλα Custom CSS. Το πλαίσιο CSS code γράφει Applies to this section only. Τα περισσότερα τμήματα το έχουν, μεταξύ αυτών η κεφαλίδα, το υποσέλιδο, το hero, οι πληροφορίες προϊόντος και η ολοκλήρωση παραγγελίας.

Αυτή είναι η πιο ασφαλής επιλογή. Το Storeep προσθέτει το τμήμα μπροστά από κάθε επιλογέα σας, οπότε οι κανόνες σας δεν μπορούν να αλλάξουν τίποτα έξω από αυτό.

• Το h2 { letter-spacing: 2px; } αλλάζει μόνο τους τίτλους μέσα σε αυτό το τμήμα.
• Χρησιμοποιήστε το & για να αλλάξετε το στυλ του ίδιου του τμήματος: & { border-top: 1px solid #000; }.
• Οι κανόνες @media λειτουργούν. Οι κανόνες μέσα σε αυτούς περιορίζονται επίσης στο τμήμα.
• Τα animations @keyframes διατηρούνται όπως τα γράψατε.

Το CSS ενός τμήματος ανήκει σε αυτό το τμήμα σε αυτή τη σελίδα. Χρησιμοποιήστε το Apply to all pages στο τμήμα για να αντιγράψετε το τμήμα, μαζί με το CSS του, στις άλλες σελίδες σας που το περιέχουν. Δείτε Εφαρμογή σε όλες τις σελίδες.

Ποιο να χρησιμοποιήσετε

• Ένα τμήμα δεν φαίνεται σωστά: χρησιμοποιήστε το Custom CSS του τμήματος.
• Η ίδια αλλαγή χρειάζεται παντού: χρησιμοποιήστε την καρτέλα ρυθμίσεων Custom CSS.
• Πριν γράψετε CSS, ελέγξτε αν υπάρχει ήδη ρύθμιση που το κάνει: τα χρώματα βρίσκονται στους Συνδυασμούς χρωμάτων, οι γραμματοσειρές στις Ρυθμίσεις γραμματοσειρών, ενώ οι γωνίες και οι σκιές προέρχονται από το θέμα σας.

Όταν το CSS σας δεν λειτουργεί

• Ελέγξτε αν λείπει κάποιο } ή ;. Ένα λάθος μπορεί να σταματήσει τους κανόνες που ακολουθούν.
• Ο κανόνας σας μπορεί να είναι πιο αδύναμος από τον κανόνα του θέματος. Κάντε τον επιλογέα πιο συγκεκριμένο.
• Στο CSS τμήματος, μην ξεκινάτε τον επιλογέα σας με body ή html. Βρίσκονται έξω από το τμήμα, οπότε ο κανόνας δεν θα ταιριάξει.
• Αν η σελίδα φαίνεται χαλασμένη, αφαιρέστε την τελευταία σας αλλαγή, κάντε δημοσίευση και προσθέστε ξανά τους κανόνες έναν έναν.

Καλό να γνωρίζετε

• Το προσαρμοσμένο CSS ανήκει στην αγορά που επεξεργάζεστε. Επαναλάβετέ το σε κάθε αγορά που το χρειάζεται.
• Η αλλαγή θέματος μπορεί να αλλάξει ονόματα κλάσεων και τη διάταξη, οπότε ελέγξτε το προσαρμοσμένο CSS σας μετά από αλλαγή θέματος.
• Οι αλλαγές δημοσιεύονται όταν κάνετε κλικ στο Publish.
• Για HTML και κώδικα μέσα σε μια σελίδα, δείτε Προσαρμοσμένος κώδικας.