Utilizarea editorului de branding în Checkout Blocks

Puteți utiliza editorul de branding în Checkout Blocks, susținut de Checkout Branding API, pentru a personaliza estetica paginilor de plată și de conturi fără a fi nevoie să modificați niciun cod.

Puteți utiliza editorul de branding pentru a edita culorile și elementele de plată pentru orice configurație de plată. Modificările pe care le aduceți designului de plată utilizând editorul de branding se aplică tuturor paginilor de plată, inclusiv pagina cu mulțumiri, pagina de stare a comenzii și noile pagini de conturi client.

Pentru a lansa editorul de branding din panoul de administrare Shopify, faceți clic pe Aplicații > Checkout Blocks, apoi faceți clic pe Editor de branding.

Personalizarea culorilor pentru pagina de plată

În secțiunea Culori, puteți personaliza culorile de bază ale paginii de plată. De asemenea, puteți personaliza până la 4 scheme de culori care se aplică secțiunilor individuale atunci când doriți să faceți modificări mai detaliate designului dumneavoastră. Puteți edita tipurile de culori, inclusiv culorile de accent (pentru elemente interactive, cum ar fi linkurile) și culorile de brand (utilizate pentru elemente precum butoanele primare și secundare).

Pași:

Personalizați culorile globale
  1. Din panoul de administrare Shopify, accesați Aplicații > Checkout Blocks.

  2. Faceți clic pe Editor de branding.

  3. În secțiunea Culori, faceți clic pe Culori globale.

  4. Pentru a suprascrie orice culoare existentă a paginii de plată, în secțiunea Culori globale, faceți clic pe pictograma și apoi selectați culoarea dorită efectuând una dintre următoarele acțiuni:

    • Utilizați selectorul de culoare pentru a selecta culoarea.
    • Introduceți codul de culoare HEX în câmpul disponibil.
  5. Faceți clic pe Salvați.

Personalizați schemele de culori
  1. Din panoul de administrare Shopify, accesați Aplicații > Checkout Blocks.

  2. Faceți clic pe Editor de branding.

  3. În secțiunea Culori, faceți clic pe Schemă 1, Schemă 2, Schemă 3 sau Schemă 4 pentru a personaliza o anumită schemă de culori.

  4. Selectați oricare dintre următoarele componente pe care doriți să le personalizați:

    • Culori principale
    • Comenzi formular
    • Buton primar
    • Buton secundar
  5. În secțiunea Bază, faceți clic pe pictograma de lângă tipul de culoare pe care doriți să îl personalizați, apoi selectați culoarea dorită efectuând una dintre următoarele acțiuni:

    • Utilizați selectorul de culoare pentru a selecta culoarea.
    • Introduceți codul de culoare HEX în câmpul disponibil.
  6. Opțional: dacă editați schema pentru Comenzi formular, Buton primar sau Buton secundar, atunci puteți personaliza și culorile pentru comportamentul de interacțiune La selectare sau La plasarea cursorului. Faceți clic pe pictograma de lângă tipul de culoare pe care doriți să îl personalizați, apoi selectați culoarea dorită efectuând una dintre următoarele acțiuni:

    • Utilizați selectorul de culoare pentru a selecta culoarea.
    • Introduceți codul de culoare HEX în câmpul disponibil.
  7. Faceți clic pe Salvați.

Personalizați elementele paginii de plată

În secțiunea Personalizări a editorului de branding, puteți edita următoarele elemente ale paginii de plată:

  • Favicon: alegeți pictograma care se afișează clienților în fila browserului în timpul procesului de plată.
  • Global: ajustați raza colțului pentru toate elementele (câmpuri de formular, butoane și carduri).
  • Antet și siglă: selectați poziția antetului în pagina de plată, precum și dacă să afișați rute de navigare, un link către coș și o siglă.
  • Principal: aplicați scheme de design zonei de conținut principale a paginii de plată, inclusiv imagini de fundal, lățimi ale chenarului și scheme de culori.
  • Rezumat comandă: aplicați scheme de design barei laterale a paginii de plată care conține rezumatul comenzii clientului, inclusiv imagini de fundal, lățimi ale chenarului și scheme de culori.
  • Subsol: selectați lățimea subsolului în pagina de plată, precum și dacă să afișați politicile magazinului.
  • Tipografie: selectați dimensiunea fontului, familia de fonturi, grosimea fontului, spațierea între caractere (kerning) și utilizarea majusculelor/minusculelor pentru până la 3 niveluri de anteturi.
  • Butoane: selectați spațierea, chenarele și stilurile butoanelor primare și secundare.
  • Formulare: personalizați stilurile pentru câmpurile de introducere din formularul de plată, cum ar fi casetele de selectare, câmpurile de text și opțiunile selectate dintr-o listă.
  • Miniaturi de produse: ajustați stilurile pentru chenar și raza colțului pentru imaginile de produs din pagina de plată.

Pași:

  1. Din panoul de administrare Shopify, accesați Aplicații > Checkout Blocks.

  2. Faceți clic pe Editor de branding.

  3. În secțiunea Personalizări, faceți clic pe oricare dintre elementele pe care doriți să le personalizați, cum ar fi Antet și siglă.

  4. Utilizând opțiunile de personalizare disponibile, ajustați elementul paginii de plată conform preferințelor dumneavoastră.

  5. Faceți clic pe Salvați.

Comutarea configurațiilor paginii de plată

Când deschideți editorul de branding, editați configurația de plată care este Activă în mod implicit. Totuși, puteți schimba configurația de plată pe care doriți să o editați folosind editorul de branding, precum și să creați noi configurații de plată.

Află mai multe despre gestionarea configurațiilor de plată active și schiță.

Pași:

  1. Din panoul de administrare Shopify, accesați Aplicații > Checkout Blocks.

  2. Faceți clic pe Editor de branding.

  3. Faceți clic pe numele configurației de plată curente pentru a deschide un meniu vertical care conține o listă cu configurația activă, precum și cu eventualele configurații schiță, apoi selectați configurația de plată pe care doriți să o personalizați:

    • Selectați o configurație existentă pe care doriți să o editați.
    • Faceți clic pe ⊕ Creare configurație nouă pentru a fi redirecționat(ă) la setările Plată din panoul de administrare Shopify.

Previzualizați pagina de plată

Puteți previzualiza oricând modificările pe care le faceți în editorul de branding selectând configurația paginii de plată pe care doriți să o previzualizați, apoi făcând clic pe Previzualizare. Editorul de plată și conturi se lansează într-o filă separată cu toate modificările aplicate, astfel încât să puteți previzualiza cum se afișează în pagina de plată.

Pași:

  1. Din panoul de administrare Shopify, accesați Aplicații > Checkout Blocks.

  2. Faceți clic pe Editor de branding.

  3. Efectuați orice personalizări la culorile sau elementele configurației paginii de plată pe care doriți să le ajustați.

  4. Faceți clic pe Previzualizați.

Exportarea și importarea configurațiilor paginii de plată

Puteți exporta și importa configurațiile paginii de plată utilizând fișiere JSON.

Exportarea unei configurații a paginii de plată:

  1. Din panoul de administrare Shopify, accesați Aplicații > Checkout Blocks.

  2. Faceți clic pe Editor de branding.

  3. Selectați configurația paginii de plată cu personalizări aplicate utilizând editorul de branding.

  4. Faceți clic pe Mai multe acțiuni > Exportare configurație.

Configurația paginii de plată este descărcată ca fișier .json pe dispozitivul dumneavoastră local.

Importarea unei configurații a paginii de plată:

  1. Din panoul de administrare Shopify, accesați Aplicații > Checkout Blocks.

  2. Faceți clic pe Editor de branding.

  3. Selectați configurația paginii de plată la care doriți să aplicați profilul de branding importat.

  4. Faceți clic pe Mai multe acțiuni > Importare configurație.

  5. În caseta de dialog Importare branding pentru plată, încărcați fișierul JSON de branding:

    1. Faceți clic pe Adăugați fișier.
    2. Selectați fișierul JSON corespunzător de pe dispozitivul dumneavoastră.
    3. Faceți clic pe Importați și continuați.
  6. Examinați configurația de personalizare preîncărcată. Modificați-o după cum este necesar.

  7. Faceți clic pe Salvați.

Resetarea stilului paginii de plată la valorile implicite

Când editați o culoare sau un element al paginii de plată folosind editorul de branding, puteți reseta valoarea specifică la valoarea sa implicită făcând clic pe Resetare lângă culoarea sau elementul pe care l-ați modificat.

Puteți reseta oricând brandingul întregii configurații de finalizare a comenzii la valorile implicite Shopify. Resetarea configurației de finalizare a comenzii șterge toate personalizările de pe toate paginile editorului de branding. Această acțiune nu poate fi anulată.

Pași:

  1. Din panoul de administrare Shopify, accesați Aplicații > Checkout Blocks.

  2. Faceți clic pe Editor de branding.

  3. Selectați configurația de finalizare a comenzii pe care doriți să o resetați.

  4. Faceți clic pe Resetare la valorile implicite.

  5. În caseta de dialog Resetați la stilurile implicite?, faceți clic pe Continuați.