Centrum pomocy
/
Integracje
/
Shopify
/
Shopify: Najlepsze praktyki

Dostosowanie stylistyki przycisków i formularzy „Znów dostępne” w bezpłatnych motywach Shopify

Około 2 min czytania
|
Zaktualizowano 7 lip 2025, 00:00 EST

Czego się dowiesz?

Dowiedz się, jakie kluczowe zmiany wprowadzić w przypadku każdego bezpłatnego motywu Shopify, aby szybko upewnić się, że przycisk i formularz znów dostępne pasują do stylu motywu. Przycisk i formularz Klaviyo „Powiadom mnie, gdy będzie dostępne” można w szerokim zakresie konfigurować. Zgodnie z własnymi preferencjami zmienisz ich kolory, czcionki, tekst i inne elementy.

Instalacja funkcji „Znów dostępne” jest obsługiwana tylko w przypadku niektórych bezpłatnych motywów Shopify, a nie w sklepach Shopify korzystających z niestandardowych motywów. Obecnie zespół Klaviyo ds. pomocy nie jest w stanie udzielać użytkownikom wsparcia podczas wdrażania dla sklepu funkcji „Znów dostępne” przy użyciu niestandardowych motywów. Aby sprawdzić, jakiego motywu Shopify używa sklep, możesz skorzystać z narzędzia do wykrywania motywów Shopify.

Kilka słów na początek

Zanim przejdziesz do dalszej części tego artykułu, warto zapoznać się z naszym przewodnikiem Shopify: pierwsze kroki, który zawiera dokładną instrukcję integracji.

Aby dowiedzieć się więcej na temat funkcji Znów dostępne i jak ją włączyć, przeczytaj nasz przewodnik: zainstaluj funkcję Znów dostępne dla Shopify.

Jak dostosować stylistykę przycisku i formularza

  1. Podczas instalowania snippetu znajdź w tym artykule snippet stylów dla bezpłatnego motywu.
  2. Domyślny fragment kodu jest pokazany poniżej. Zaktualizuj (lub dodaj) pozycje wiersza w sekcjach trigger: {} i modal: {} domyślnego fragmentu kodu zgodnie z tym, co pokazano we fragmencie kodu stylów
    1. Na przykład, jeśli masz motyw Crave, musisz dodać tylko następujący wiersz w sekcji modal: font_family: '"Archivo", serif;'
  3. Wprowadź wszelkie inne, pożądane aktualizacje stylów pozycji wiersza wedle uznania.
text 
<script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
<script>
    var klaviyo = klaviyo || [];
    klaviyo.init({
      account: "PUBLIC_API_KEY",
      platform: "shopify"
    });
    klaviyo.enable("backinstock",{ 
    trigger: {
      product_page_text: "Notify Me When Available",
      product_page_class: "button",
      product_page_text_align: "center",
      product_page_margin: "0px",
      replace_anchor: false
    },
    modal: {
     headline: "{product_name}",
     body_content: "Register to receive a notification when this item comes back in stock.",
     email_field_label: "Email",
     button_label: "Notify me when available",
     subscription_success_label: "You're in! We'll let you know when it's back.",
     footer_content: '',
     additional_styles: "@import url('https://fonts.googleapis.com/css2?family=Roboto+wght@400;700&display=swap');",
     drop_background_color: "#000",
     background_color: "#fff",
     text_color: "#222",
     button_text_color: "#fff",
     button_background_color: "#439fdb",
     close_button_color: "#ccc",
     error_background_color: "#fcd6d7",
     error_text_color: "#C72E2F",
     success_background_color: "#d3efcd",
     success_text_color: "#1B9500"
    }
  });
</script>

Pragnąć

text 
trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Archivo", serif;'
}

Dawn

text 
trigger: {
 product_page_class: 'button'
},
modal: {
font_family: '"Assistant", sans-serif;' 
}

Studio

text 
trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Electra", serif;' 
}

Blok kolorów

text 
trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Futura", sans-serif;' }

Wyrażanie zgody

text 
trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Harmonia Sans", sans-serif;'
}

Smak

text 
trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Anonymous Pro", sans-serif;'
}

Rzemiosło

text 
trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Quattrocento Sans", sans-serif;'
}

Przejażdżka

text 
trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Avenir Next", sans-serif;'
}

Odśwież

text 
trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Questrial", sans-serif;'
}

Uproszczone

Uroda

text 
modal: {
 font_family: '"PT Serif",serif;'
}

Pop

Kość

text 
trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Raleway');",
 font_family: '"Raleway","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Zabawka

text 
trigger: {
 product_page_class: 'btn btn--large btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Open+Sans');",
 font_family: '"Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Czarno-biały

text 
trigger: {
 product_page_class: 'btn btn--large btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Open+Sans');",
 font_family: '"Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Żywy

text 
trigger: {
 product_page_class: 'btn btn--large btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Open+Sans');",
 font_family: '"Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Przedsięwzięcie

Snowboardy

text 
trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Karla');",
 font_family: '"Karla","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Outdoor

text 
trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Roboto');",
 font_family: '"Roboto","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Boks

text 
trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');",
 font_family: '"Source Sans Pro","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Debiut

Domyślne

text 
trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Work+Sans');",
 font_family: '"Work Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Jasny

text 
trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Muli');",
 font_family: '"Muli","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Dostarczanie

Jasny

text 
trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Roboto');",
 font_family: '"Roboto","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Niebieski

text 
trigger: {
 product_page_class: 'btn btn--large btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Montserrat');",
 font_family: '"Montserrat","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Narracja

Rozgrzewanie

text 
trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Avenir');",
 font_family: '"Avenir","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Jasny

text 
trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Open+Sans');",
 font_family: '"Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Zimny

text 
trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Lato');",
 font_family: '"Lato","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Brooklyn

Klasyczny

text 
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Arapey');",
 font_family: '"Arapey",serif;'
}

Minimalna

Nowoczesny

text 
modal: {
 font_family: '"PT Serif",serif;'
}

Vintage

text 
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=PT+Sans');",
 font_family: '"PT Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Moda

text 
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=PT+Sans');",
 font_family: '"PT Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Rezultat

Zaktualizowano już stylistykę przycisku i formularza „znów dostępne” w Twoim sklepie Shopify.

Czy ten artykuł był pomocny?
Ten formularz służy tylko do przesyłania opinii na temat artykułów. Dowiedz się, jak skontaktować się z zespołem ds. pomocy.

Dowiedz się od Klaviyo więcej

Społeczność
Nawiązuj kontakty z osobami na podobnych stanowiskach, partnerami oraz ekspertami i ekspertkami Klaviyo – inspirujcie się nawzajem, wymieniajcie spostrzeżeniami i pomagajcie szukać odpowiedzi na nurtujące Was pytania.
Odwiedź stronę społeczności
Partnerzy
Zatrudnij certyfikowanego eksperta Klaviyo, który pomoże Ci w konkretnym zadaniu lub w ciągłym zarządzaniu marketingiem.
Zatrudnij partnera
Pomoc

Uzyskaj wsparcie za pośrednictwem konta.

E-mail do zespołu ds. pomocy (konta w bezpłatnym okresie próbnym oraz konta płatne) Całodobowa dostępność

Czat/wirtualna pomoc
 Dostępność różni się w–zależności od lokalizacji i typu planu.

Zaloguj się