Jak stylizować znów dostępne przyciski i formularze dla darmowych motywów Shopify – Klaviyo - Help Center - PL

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

Podczas instalacji snippetu znajdź snippet stylizacji dla swojego darmowego motywu w tym artykule.
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;'
Dokonaj wszelkich innych pożądanych aktualizacji stylizacji w pozycjach wierszy, jeśli uznasz to za stosowne.

<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

trigger: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Archivo", serif;'

}

Świt

trigger: {

 product_page_class: 'button'

},
modal: {

font_family: '"Assistant", sans-serif;' 

}

Studio

trigger: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Electra", serif;' 

}

Colorblock

trigger: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Futura", sans-serif;' 

}

Zmysł

trigger: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Harmonia Sans", sans-serif;'

}

Smak

trigger: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Anonymous Pro", sans-serif;'

}

Rzemiosło

trigger: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Quattrocento Sans", sans-serif;'

}

Jedź

trigger: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Avenir Next", sans-serif;'

}

Odśwież

trigger: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Questrial", sans-serif;'

}

Prosty

Piękno

Okienko modalne: {

 font_family: '"PT Serif",serif;'

}

Pop

Kość

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Okienko modalne: {

 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Arapey');",

 font_family: '"Arapey",serif;'

}

Minimalny

Nowoczesny

Okienko modalne: {

 font_family: '"PT Serif",serif;'

}

Vintage

Okienko modalne: {

 additional_styles: "@import url('https://fonts.googleapis.com/css?family=PT+Sans');",

 font_family: '"PT Sans","HelveticaNeue","Helvetica Neue",sans-serif;'

}

Moda

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