Centrum pomocy
/
Integracje
/
Shopify
/
Shopify: Najlepsze praktyki

Jak stylizować znów dostępne przyciski i formularze dla darmowych motywów Shopify

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

Czego się dowiesz

Dowiedz się, jakie kluczowe zmiany należy wprowadzić w każdym darmowym motywie Shopify, aby szybko upewnić się, że ponownie dostępny przycisk i formularz pasują do stylu motywu. Przycisk i formularz Klaviyo "Notify Me When Available" są wysoce konfigurowalne. Możesz zmieniać kolory, czcionki, tekst i inne elementy zgodnie ze swoimi preferencjami projektowymi.

Instalacja znów dostępna jest obsługiwana tylko dla niektórych darmowych motywów Shopify, a nie dla Shopify sklep przy użyciu niestandardowych motywów. W tej chwili Klaviyo pomoc nie może pomóc we wdrożeniu znów dostępne dla sklepu przy użyciu niestandardowych motywów. Aby sprawdzić, którego szablonu Shopify używa Twój sklep, możesz użyć wykrywacza szablonów Shopify.

Zanim zaczniesz

Jeśli jeszcze tego nie zrobiłeś, przeczytaj nasz przewodnik Pierwsze kroki z Shopify, aby uzyskać instrukcje krok po kroku dotyczące integracji, zanim przejdziesz do tego artykułu.

Aby dowiedzieć się więcej o znów dostępnych funkcjach i jak je włączyć, przeczytaj nasz przewodnik po instalacji znów dostępnej dla Shopify.

Jak nadać styl przyciskowi i formularzowi

  1. Podczas instalacji snippetu znajdź snippet stylizacji dla swojego darmowego motywu w tym artykule.
  2. Poniżej przedstawiono domyślny fragment kodu. zaktualizuj (lub dodaj) elementy linii w sekcjach trigger: {} i modal: {} sekcji domyślnego fragmentu zgodnie z tym, co pokazano we fragmencie stylizacji
    1. Na przykład, jeśli masz motyw Crave, wystarczy dodać następującą linię w sekcji modalnej: font_family: '"Archivo", serif;'
  3. Dokonaj wszelkich innych pożądanych aktualizacji stylizacji w pozycjach wierszy, jeśli uznasz to za stosowne.
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.włączać("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: "Zarejestruj się, aby otrzymywać powiadomienia, gdy ten artykuł będzie znów dostępny.",
     email_field_label: "e-mail",
 button_label: "Powiadom mnie, gdy będzie dostępny",
 subscription_success_label: "Jesteś zapisany! Damy Ci znać, kiedy będzie gotowy.",
     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>

Pożądaj

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

Świt

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

Studio

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

Colorblock

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

Zmysł

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;'
}

Jedź

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;'
}

Prosty

Piękno

text 
Okienko modalne: {
 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;'
}

Wibrujący

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;'
}

Venture

Deski snowboardowe

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;'
}

Na zewnątrz

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ślny

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;'
}

Dostawa

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

Ciepły

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;'
}

Zimno

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 
Okienko modalne: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Arapey');",
 font_family: '"Arapey",serif;'
}

Minimalny

Nowoczesny

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

Vintage

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

Moda

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

Rezultat

Teraz możesz zaktualizować stylizację swojego znów dostępnego przycisku i formularza na swoim Shopify sklepie.

Dodatkowe źródła

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ę