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

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. 

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.

<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

• Instalowanie funkcji „Znów dostępne“ dla Shopify
• Jak utworzyć kod kuponu dynamicznego dla Shopify