Shopify

Search

Search code

Clerk.io bietet drei verschiedene Suchlösungen, die zusammen oder separat verwendet werden können:

Dieser Artikel erklärt, wie man mit einem Clerk.js Setup in Shopify beginnt.

Instant Search
Instant Search liefert in Echtzeit Suchergebnisse, während Kunden tippen, die in einem Dropdown unter dem Suchfeld angezeigt werden.

Design erstellen #

Sie können entweder den Design Editor verwenden, um es visuell zu konfigurieren, oder Code-Designs verwenden.

Design Editor #

  1. Gehen Sie zu Search > Designs und klicken Sie auf New Design.
  2. Wählen Sie Other designs > Instant Search.
  3. Wählen Sie aus der Liste der Designvorlagen, mit welcher Sie beginnen möchten.
  4. Geben Sie ihm einen Namen und klicken Sie auf Create design.
  5. Nehmen Sie alle gewünschten Änderungen am Design vor.

Code Design #

  1. Gehen Sie zu Search > Designs und klicken Sie auf New Design.
  2. Wählen Sie Other designs > Blank > With code.
  3. Geben Sie ihm einen Namen und klicken Sie auf Save.
  4. Erstellen Sie ein Code-Design von Grund auf mit Liquid-Code.

Wenn Sie ein Startdesign möchten, überprüfen Sie die Instant Search-Vorlage weiter unten.

Inhalt erstellen #

Dies enthält alle Einstellungen, die verwendet werden, um das Instant Search Dropdown anzuzeigen und es in Ihre Website einbettbar zu machen.

  1. Gehen Sie zu Search > Content.
  2. Klicken Sie auf New Content.
  3. Nennen Sie es “Live Search”.
  4. Wählen Sie in Content type Live-search aus dem Dropdown-Menü.
  5. Wählen Sie in Design das Design aus, das Sie aus dem Dropdown-Menü erstellt haben.
  6. Klicken Sie oben auf dem Bildschirm auf Save.

Zur Website hinzufügen #

  1. Öffnen Sie die Registerkarte Insert into website in den Inhaltseinstellungen.
  2. Hier haben Sie zwei Optionen:
    • Mit Injection können Sie den Code mit einem CSS-Selektor einfügen.
    • Mit Embedded Code können Sie den Code manuell in Ihre Website einfügen.
  3. Wählen Sie die Option, die für Sie am einfachsten zu verwenden ist.
  4. Ersetzen Sie für den eingebetteten Code INSERT_SEARCH_INPUT_CSS_SELECTOR_HERE durch eine eindeutige Klasse oder ID für Ihr Suchfeld. Dadurch wird das Instant Search darauf abzielen und Ergebnisse anzeigen, während der Benutzer tippt.
  5. Fügen Sie den Code in die Haupt-Theme-Datei von Shopify ein. Dies ist fast immer die Datei, die Sie in Online Store > Themes > "..." > Edit code > Layout > theme.liquid finden.

Hier ist ein vollständiges Beispiel für den Embed-Code von Instant Search, einschließlich des CSS-Selectors, der am häufigsten in Shopify verwendet wird:

<span class="clerk"
  data-template="@live-search"
  data-instant-search=".search-form__input"
  data-instant-search-suggestions="6"
  data-instant-search-categories="6"
  data-instant-search-pages="6"
  data-instant-search-positioning="right">
</span>

Search Page #

Search Page
Die Search Page bietet ein vollständiges Sucherlebnis mit erweiterten Filteroptionen. Dies wird verwendet, um jedes einzelne Ergebnis für die Suchanfrage eines Kunden anzuzeigen.

Design erstellen #

Sie können entweder den Design Editor verwenden, um es visuell zu konfigurieren, oder Code-Designs verwenden.

Design Editor #

  1. Gehen Sie zu Search > Designs und klicken Sie auf New Design.
  2. Wählen Sie Other designs > Search Page.
  3. Wählen Sie aus der Liste der Designvorlagen, mit welcher Sie beginnen möchten.
  4. Geben Sie ihm einen Namen und klicken Sie auf Create design.
  5. Nehmen Sie alle gewünschten Änderungen am Design vor.

Code Design #

  1. Gehen Sie zu Search > Designs und klicken Sie auf New Design.
  2. Wählen Sie Other designs > Blank > With code.
  3. Geben Sie ihm einen Namen und klicken Sie auf Save.
  4. Erstellen Sie ein Code-Design von Grund auf mit Liquid-Code.

Wenn Sie ein Startdesign möchten, überprüfen Sie die Search Page-Vorlage weiter unten.

Inhalt erstellen #

Dies enthält alle Einstellungen, die verwendet werden, um die Search Page anzuzeigen und sie in Ihre bestehende Suchseite einbettbar zu machen.

  1. Gehen Sie zu Search > Content.
  2. Klicken Sie auf New Content.
  3. Nennen Sie es “Search Page”.
  4. Wählen Sie in Content type Search page aus dem Dropdown-Menü.
  5. Wählen Sie in Design das Design aus, das Sie aus dem Dropdown-Menü erstellt haben.
  6. Klicken Sie oben auf dem Bildschirm auf Save.

Zur Website hinzufügen #

  1. Öffnen Sie die Registerkarte Insert into website in den Inhaltseinstellungen.
  2. Hier haben Sie zwei Optionen:
    • Mit Injection können Sie den Code mit einem CSS-Selektor einfügen.
    • Mit Embedded Code können Sie den Code manuell in Ihre Website einfügen.
  3. Wählen Sie die Option, die für Sie am einfachsten zu verwenden ist.
  4. Fügen Sie den Code in die Shopify-Vorlage ein, die Ihre bestehende Suchseite generiert. Dies ist normalerweise die Datei, die Sie in Online Store > Themes > "..." > Edit code > Layout > main-search.liquid finden.
  5. Deaktivieren Sie alle vorhandenen Suchfunktionen, indem Sie sie in einen Kommentar-Tag einfügen. Dadurch bleibt der Code intakt, wird jedoch nicht im Frontend angezeigt. Die Syntax ist wie folgt:
{% comment %}
  Vorhandener Suchcode
{% endcomment %}
  1. Kopieren Sie den Embed-Code der Search Page und fügen Sie ihn über dem {% comment %}-Tag ein.
  2. Fügen Sie den Abfrage-Tag von Shopify {{ search.terms }} im data-query-Attribut hinzu.
  3. Klicken Sie oben auf dem Bildschirm auf Save.

Hier ist ein vollständiges Beispiel für den Embed-Code der Search Page, einschließlich CSS zum Anzeigen und Ausblenden von Facetten auf mobilen Geräten:

<div class="page-width clerk-page-width">
  <span
      id="clerk-search"
      class="clerk"
      data-template="@search-page"
      data-target="#clerk-search-results"
      data-query="{{ search.terms }}"
      data-facets-attributes='["price","categories","vendor"]'
      data-facets-titles='{"price":"Preis","categories":"Kategorien","vendor":"Marke"}'
      data-facets-target="#clerk-search-filters"
      data-facets-price-prepend="€"
      data-facets-in-url="false"
      data-facets-view-more-text="Mehr anzeigen"
      data-facets-searchbox-text="Suche nach "> 
  </span>

  <div id="clerk-show-facets" onclick="toggleFacets()">Filter</div>

  <div class="clerk_flex_wrap">
    <div id="clerk-facets-container">
      <div id="clerk-search-filters"></div>
    </div>
    <div id="clerk-search-results"></div>
  </div>

  <script>
    function toggleFacets(){
      el = document.getElementById('clerk-facets-container');
      el.classList.toggle('active');
    }
  </script>


  <style>
    #clerk-show-facets {
        width: 70%; 
        height: 40px;
        margin: 20px auto; 
        background-color: #333;
        color: white;
        text-align: center;
        border-radius: 2px;
        line-height: 40px;
        cursor: pointer;
    }



    .clerk-page-width {
        display: flow-root;
    }

    #clerk-search-results {
        width: 80%;
      
    }
   

    #clerk-show-facets {
        display: none;
    }
    .clerk_flex_wrap {
        display: flex;
        flex-direction: row;
    }

    .active {
      display: block !important;
    }

    @media only screen and (max-width : 800px) {
      #clerk-search-filters {
        width: 100% !important;
      }

      #clerk-facets-container {
        display: none;
      }
      #clerk-show-facets {
          display: block;
      }
      .clerk_flex_wrap {
        flex-direction: column;
      }
      #clerk-search-results {
          display: block;
          width: 100%;
      }
    }
  </style>
</div>

Omnisearch #

Omnisearch
Der Omnisearch kombiniert das Instant Search und die Search Page in einem einzigen Overlay, das angezeigt wird, wenn der Benutzer in das Suchfeld klickt.

Design erstellen #

Omnisearch funktioniert nur mit Code-Designs, da es ein komplexeres Layout hat, das in beliebiger Weise modifiziert werden kann.

  1. Gehen Sie zu Search > Designs und klicken Sie auf New Design.
  2. Wählen Sie Omni-search.
  3. Wählen Sie aus der Liste der Designvorlagen, mit welcher Sie beginnen möchten.
  4. Geben Sie ihm einen Namen und klicken Sie auf Save.
  5. Nehmen Sie alle gewünschten Anpassungen am Design vor. Der Omnisearch-Leitfaden enthält weitere Informationen dazu, wie Sie dies tun können.

Inhalt erstellen #

Dies enthält alle Einstellungen, die verwendet werden, um den Omnisearch anzuzeigen und ihn in Ihre Website einbettbar zu machen.

  1. Gehen Sie zu Search > Content.
  2. Klicken Sie auf New Content.
  3. Nennen Sie es “Omni-Search”.
  4. Fügen Sie ein Tracking-Label hinzu - dies sollte ebenfalls nur “Omni-Search” sein.
  5. Wählen Sie in Content type Omni-search aus dem Dropdown-Menü.
  6. Wählen Sie in Design das Design aus, das Sie aus dem Dropdown-Menü erstellt haben.
  7. Klicken Sie oben auf dem Bildschirm auf Save.

Zur Website hinzufügen #

  1. Öffnen Sie die Registerkarte Insert into website in den Inhaltseinstellungen.
  2. Hier haben Sie zwei Optionen:
    • Mit Injection können Sie den Code mit einem CSS-Selektor einfügen.
    • Mit Embedded Code können Sie den Code manuell in Ihre Website einfügen.
  3. Wählen Sie die Option, die für Sie am einfachsten zu verwenden ist.
  4. Wenn Sie die Option für eingebetteten Code verwenden, ersetzen Sie INSERT_CSS_SELECTOR[...] durch eine eindeutige Klasse oder ID für Ihr Suchfeld. Der Omnisearch wird angezeigt, wenn das Eingabefeld, das dem Selektor entspricht, angeklickt wird.

Hier ist ein vollständiges Beispiel für den Embed-Code von Omni-search mit dem CSS-Selector, der am häufigsten in Shopify verwendet wird:

<span class="clerk"
  data-template="@omni-search"
  data-api="search/omni"
  data-trigger-element=".search-form__input
></span>

Startvorlagen #

Wenn Sie Code-Designs verwenden möchten, können Ihnen diese Vorlagen den Einstieg erleichtern. Sie enthalten die grundlegenden UI-Elemente, die das Instant Search und die Search Page ausmachen, die Sie dann nach Ihren Bedürfnissen anpassen können.

Instant Search Code #

Dies enthält die HTML- und CSS-Teile zur Anzeige eines Instant Search Dropdowns. Fügen Sie diese zu einem Code-Design in my.clerk.io hinzu.

HTML #

<div class="clerk-instant-search">
    {% if hits.length == 0 %}
        <div class="clerk-instant-search-no-results">
            Nichts gefunden: <b>{{ query }}</b>... versuchen Sie eine einfachere Suche!
        </div>
    {% endif %}

    {% if content.query != response.query %}
        <div class="clerk-instant-search-alternate-query">
            <i class="fas fa-search clerk-icon" aria-hidden="true"></i> Zeige Ergebnisse für: <b>{{ query }}</b>
        </div>
    {% endif %}

    <div class="clerk-instant-search-grid">
        {% if products.length > 0 %}
            <div class="clerk-instant-search-col clerk-col-1">
                <div class="clerk-instant-search-products">
                    <div class="clerk-instant-search-title">Produkte</div>
                    {% for product in products %}
                        <a href="{{ product.url }}">
                            <div class="clerk-instant-search-product clerk-instant-search-key-selectable">
                                <div class="clerk-instant-search-product-image" style="background-image: url('{{ product.image }}');"></div>
    
                                <div>
                                    <div class="clerk-instant-search-product-name">{{ product.name | highlight query }}</div>
        
                                    {% if product.price < product.list_price %}
                                        <div class="clerk-instant-search-product-list-price">{{ product.list_price | money }}</div>
                                    {% endif %}
                                    <div class="clerk-instant-search-product-price">{{ product.price | money }}</div>
                                </div>
                                
                                <div>
                                    <div class="clerk-instant-search-product-button">Jetzt kaufen</div>
                                </div>
                            </div>
                        </a>
                    {% endfor %}
    
                    {% if hits > products.length %}
                        <div class="clerk-desktop-button clerk-instant-search-more-results clerk-instant-search-key-selectable">
                            <a class="clerk-view-more-results-button" href="/search?q={{ query }}">
                                <u>Siehe <b>{{ hits }}</b> weitere Ergebnisse für "<i>{{ query }}</i>"</u>
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        {% endif %}

        {% if (suggestions.length + categories.length + pages.length) > 0 %}
            <div class="clerk-instant-search-col clerk-col-2">
                {% if suggestions.length > 1 %}
                    <div class="clerk-instant-search-suggestions">
                        <div class="clerk-instant-search-title">Suchvorschläge</div>
                        {% for suggestion in suggestions %}
                            {% if suggestion != query %}
                                <div class="clerk-instant-search-suggestion clerk-instant-search-key-selectable">
                                    <a href="/search?q={{ suggestion highlight query 'bold' true }}">
                                    <i class="fas fa-search clerk-icon" aria-hidden="true"></i>{{ suggestion }}
                                    </a>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                {% endif %}
        
                {% if categories.length > 0 %}
                    <div class="clerk-instant-search-categories">
                        <div class="clerk-instant-search-title">Kategorien</div>
                        {% for category in categories %}
                            <div class="clerk-instant-search-category clerk-instant-search-key-selectable">
                                <a href="{{ category.url }}">
                                    {{ category.name | highlight query }}
                                </a>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
        
                {% if pages.length > 0 %}
                    <div class="clerk-instant-search-pages">
                        <div class="clerk-instant-search-title">Verwandte Inhalte</div>
                        {% for page in pages %}
                            <div class="clerk-instant-search-category clerk-instant-search-key-selectable">
                                <a href="{{ page.url }}">
                                    <div class="name">{{ page.title | highlight query 'bold' true }}</div>   
                                </a>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        {% endif %}
         {% if hits > products.length %}
            <div class="clerk-mobile-button clerk-instant-search-more-results clerk-instant-search-key-selectable">
                <a href="/search?q={{ query }}">
                    Siehe <b>{{ hits }}</b> weitere Ergebnisse für "<i>{{ query }}</i>"
                </a>
            </div>
        {% endif %}
    </div>
</div>

CSS #

.clerk-instant-search {
    padding: 20px;
}

.clerk-instant-search-container a {
    color: black !important;
    text-decoration: none !important;
}

.clerk-instant-search-container a:hover {
    color: #b6c254; !important;
}

.clerk-instant-search {
    overflow: hidden;

    width: 100%;
    min-width: 650px;
    max-width: 1000px;
    
    margin: .2em auto;

    background-color: white;

    border: 1px solid #eee;
    border-top: 0px;

    border-radius: 5px 5px 10px 10px;

    box-shadow: 0 1em 2em 1em rgba(0,0,0,.2);
}

.clerk-instant-search-no-results {
    padding: 1em;
    
    font-style: italic;
    
    text-align: center;
}

.clerk-instant-search-alternate-query {
    margin: 0px 0px 5px 0px;
}

.clerk-instant-search-more-results {
    padding: 1em;

    font-size: 1.2em;
    
    text-align: center;
}

.clerk-instant-search-title {
    color: #b6c254;
    margin: 20px 0px 5px 0px;
    padding: 0px 0px 10px 0px;
    text-transform: uppercase;
    font-size: 1em;
    border-bottom: 1px solid #000000;
}


/* Produkte */
.clerk-instant-search-products {
    padding-right: 2em;
}

.clerk-instant-search-product {
    display: flex;
    
    padding: .2em;
    
    color: gray;
}

.clerk-instant-search-product:hover {
    background-color: rgba(46, 204, 113, .1);
}

.clerk-instant-search-product:hover .clerk-instant-search-product-button {
    transform: scale(1.05);
}

.clerk-instant-search-product > * {
    flex: 1 1 auto;
}
.clerk-instant-search-product > *:first-child, .clerk-instant-search-product > *:last-child {
    flex: 0 0 auto;
}

.clerk-instant-search-product-image {
    display: inline-block;

    width: 3em;
    height: 3em;

    margin-right: 1em;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.clerk-instant-search-product-name {
    overflow: hidden;

    height: 1.2em;

    margin-bottom: .2em;
}

.clerk-instant-search-product-list-price {
    display: inline-block;
    
    margin-right: .5em;
    
    opacity: .8;
    
    font-weight: normal;
    text-decoration: line-through;
    color: gray;
}

.clerk-instant-search-product-price {
    display: inline-block;
    
    font-weight: bold;
}

.clerk-instant-search-product-button {
    display: block;

    margin: .2em auto;
    padding: .8em 2em;

    border: none;
    border-radius: .5em;

    background-color: #b6c254;
    color: white;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;
    font-size: .8em;

    cursor: pointer;
}

/* Vorschläge */

.clerk-icon {
    color: lightgray;
    margin-right: .5em;  
}

.clerk-instant-search-suggestions {
    margin-bottom: 1em;
}

.clerk-instant-search-suggestion {
    padding: .1em;
}



/* Kategorien */
.clerk-instant-search-categories {
    margin-bottom: 1em;
}

.clerk-instant-search-category {
    padding: 5px;
    margin: 5px;
    width: auto;
    display: inline-block;
    border: 1px solid black;
    border-radius: 2px;
}


/* Seiten */
.clerk-instant-search-pages {
    margin-bottom: 1em;
}

.clerk-instant-search-page {
    padding: .1em;
}

@media screen and (min-width: 1200px) {
    .clerk-instant-search-container {
        width: 50%;
    }
    .clerk-instant-search-grid {
        display: flex;
    }

    .clerk-col-1 {
        flex: 2;
    }
    
    .clerk-col-2 {
        flex: 1;
    }

    .clerk-mobile-button {
        display: none;
    }
}

@media screen and (min-width: 768px) and (max-width: 1200px){
    .clerk-instant-search-container {
        right: 0px !important;
        left: 0px !important;
    }
    .clerk-mobile-button {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .clerk-instant-search-container {
        right: 0px !important;
    }
    .clerk-desktop-button {
        display: none;
    }
}

@media screen and (min-width: 376px) and (max-width: 800px) {
    .clerk-instant-search {
            min-width: 0px !important;
    }
}

@media screen and (max-width: 375px) {
    .clerk-instant-search {
        min-width: 200px !important;
    }
    .clerk-instant-search-col {
        margin: 0px 0px 20px 0px;
    }
    .clerk-instant-search-product-name {
        height: 3em !important;
    }
}

Search Page Code #

Dies enthält die HTML- und CSS-Teile zur Anzeige einer Search Page. Fügen Sie diese zu einem Code-Design in my.clerk.io hinzu.

HTML #

<div class="clerk-search-result">
    <div class="clerk-search-result-headline">{{ headline }}</div>
    <div class="clerk-grid">
        {% for product in products %}
            <div class="clerk-grid-item">
                <div class="clerk-grid-product">
                    <a href="{{ product.url }}">
                        {% if product.price < product.list_price %}
                            <div class="clerk-grid-badge">Im Angebot</div>
                        {% endif %}
                        <div class="clerk-grid-image" style="background-image: url('{{ product.image }}');"></div>
                        <div class="clerk-grid-brand">{{ product.brand }}</div>
                        <div class="clerk-grid-name">{{ product.name }}</div>
                        
                        <div class="clerk-grid-pricing">
                            {% if product.price < product.retail_price %}
                                <div class="clerk-grid-list-price">£{{ product.retail_price | money }}</div>
                            {% endif %}
                            
                            <div class="clerk-grid-price">£{{ product.price | money }}</div>
                        </div>
                    </a>
                    {% if product.stock == 1 %}
                        <a class="clerk-not-in-stock" href="{{ product.url }}" data-event-type="product-click">
                            <div class="clerk-grid-button-not-in-stock">Nicht auf Lager</div>
                        </a>
                    {% else %}
                        <a class="clerk-add-to-cart" href="/cart.php?action=add&amp;product_id={{ product.id }}" data-event-type="product-click">
                            <div class="clerk-grid-button">In den Warenkorb</div>
                        </a>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>

    {% if count > products.length %}
        <div class="clerk-load-more-button" onclick="Clerk('content', '#{{ content.id }}', 'more', 40);">Weitere Ergebnisse anzeigen</div>
    {% endif %}
</div>

CSS #

#clerk-search-results {
    margin: 0px;
}

.clerk-search-result {
    margin: 1em 0;
}

.clerk-search-result-headline {
    font-weight: bold;
    font-size: 2em;

    text-align: center;
}

.clerk-grid {
    display: flex;
    flex-flow: row wrap;
}

.clerk-grid-item {
    margin: auto;
}

.clerk-grid-product {
    position: relative;
    overflow: hidden;

    margin: 1em;
    padding: 1em;

    background-color: white;

    border: 1px solid #eee;
    border-radius: 1em;

    box-shadow: 0 .1em .2em 0 rgba(0,0,0,.08);

    text-align: center;
}

.clerk-grid-badge {
    position: absolute;
    top: 5px;
    right: -35px;

    display: inline-block;

    width: 120px;

    margin: 10px auto;
    padding: 5px 0;

    border-radius: 3px;

    background-color: #fbc531;

    font-size: 10px;
    color: white;

    text-align: center;
    letter-spacing: 1px;

    transform: rotate(45deg);
}

.clerk-grid-tags {
    position: absolute;
    top: .8em;
    left: .8em;
}

.clerk-grid-tag {
    display: inline-block;

    padding: .2em .8em;

    border-radius: .3em;

    background-color: gray;

    font-size: 10px;
    color: white;

    letter-spacing: 1px;
}

.clerk-grid-image {
    width: 100%;
    height: 8em;

    margin-bottom: 1em;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.clerk-grid-brand {
    font-size: 0.9em;
    color: #757575;;
}

.clerk-grid-name {
    height: 3em;
    overflow: hidden;
    color: #4a3b40;
    font-weight:bold;
    font-size: 15px;
    margin-bottom: 1em;
}

.clerk-grid-pricing {
    display: flex;

    margin-bottom: 1em;
}

.clerk-grid-price {
    flex: 1;
    color: #757575;
    font-weight: bold;
}

.clerk-grid-list-price {
    flex: 1;
    
    opacity: .8;
    
    font-weight: normal;
    text-decoration: line-through;
    color: gray;
}

.clerk-add-to-cart, .clerk-add-to-cart:hover {
    color: white;
}

.clerk-not-in-stock, .clerk-not-in-stock:hover {
    color: #4a3b40;
}

.clerk-grid-button-not-in-stock {
    display: block;

    margin: 0 auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: white;
    color: #4a3b40;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;

    cursor: pointer;
}

.clerk-grid-button {
    display: block;

    margin: 0 auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: #b6c254;
    color: white;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;

    cursor: pointer;
}


.clerk-load-more-button {
    display: block;
    
    width: 20em;

    margin: 1em auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: #b6c254;
    color: white;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;
    font-size: 1.2em;

    cursor: pointer;
}

@media screen and (min-width: 1025px) {
    .clerk-grid-item {
        flex: 0 0 25%;
        margin: auto;
    }
}

@media screen and (min-width: 500px) and (max-width: 1024px) {
    .clerk-grid-item {
        flex: 0 0 33%;
        margin: auto;
    }
}

@media screen and (max-width: 499px) {
    .clerk-grid-item {
        flex: 0 0 100%;
        margin: auto;
    }
}

Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.