Tiedustele, mitä kautta asiakkaat kuulivat kaupastasi
Tämä sivu on tulostettu Mar 29, 2024. Nykyinen versio on osoitteessa https://help.shopify.com/fi/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/ask-how-customers-heard-about-your-store.
Huomio
Vanhoja teemoja ei ole saatavilla Theme Storessa. Näissä teemoissa ei ole Shopifyn Online Store 2.0 -teemoihin sisältyviä ominaisuuksia, eikä niihin tehdä muita päivityksiä kuin turvallisuuskorjauksia.
Huomaa
Jos käytät Shopifyn ilmaista teemaa , voit ottaa yhteyttä Shopify-tukeen tutoriaaliin liittyvissä asioissa. Tähän tarvitaan 15 minuuttia suunnitteluaikaa. Lisätietoja on kohdassa Teemojen tuki .
Huomaa
tämä mukautus koskee vain vanhoja Shopify-teemoja, eikä sitä sovelleta Online Store 2.0 -teemoihin.
Voit tiedustella asiakkailtasi, mitä kautta he kuulivat kaupastasi lisäämällä Mitä kautta kuulit meistä? ‑lomakekentän ostoskorisivullesi.
Huomio
Tämä mukautus ei toimi veto-ostoskorien tai ponnahdusikkunatyylisten ostoskorien kanssa. Se toimii ainoastaan ostoskorisivun kanssa (URL-osoite: your-store.com/cart
). Jos käytät veto-ostoskoria tai ponnahdusikkunaa, sinun on muutettava ostoskorityylisi sivuksi teemaeditorissa . Lisää tuote ostoskoriin teemaesikatselussa ja klikkaa sitten Ostoskorisivu -välilehteä teemaeditorissa tarkastellaksesi ostoskorisi asetuksia.
Mitä kautta kuulit meistä? ‑lomakekentän luominen
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat .
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ... -painiketta ja klikkaa sitten Muokkaa koodia .
klikkaa Koodinpätkät -hakemistossa Lisää uusi koodinpätkä .
Luo koodinpätkä:
Nimeä koodinpätkäsi hear-about-us
.
Klikkaa Luo koodinpätkä .
Liitä seuraava koodi uudessa koodinpätkässäsi hear-about-us.liquid
:
<style>
#how-did-you-hear-about-us--label,
#how-did-you-hear-about-us-other--label {
font-weight: bold;
}
select#how-did-you-hear-about-us,
input#how-did-you-hear-about-us-other {
width: 100%;
padding: 8px 10px 8px 10px;
line-height: 1.2;
}
#how-did-you-hear-about-us,
#how-did-you-hear-about-us-other,
#how-did-you-hear-about-us--label,
#how-did-you-hear-about-us--error,
#how-did-you-hear-about-us-other--label,
#how-did-you-hear-about-us-other--error {
display:block;
margin-bottom: 5px;
}
#how-did-you-hear-about-us-other.error,
#how-did-you-hear-about-us.error {
border: 2px solid {{ settings . hau_error_color }} ;
}
#how-did-you-hear-about-us--error,
#how-did-you-hear-about-us-other--error {
color: {{ settings . hau_error_color }} ;
}
</style>
<div class="form-vertical">
<p>
<label id="how-did-you-hear-about-us--label" for="how-did-you-hear-about-us">How did you hear about us?</label>
<span id="how-did-you-hear-about-us--error" style="display:none">{{ settings . hau_error_message }} </span>
<select id="how-did-you-hear-about-us" name="attributes[how-did-you-hear-about-us]">
<option value=""{% if cart . attributes . how-did-you-hear-about-us == "" %} selected{% endif %} >Please make a selection</option>
{% assign optionsArray = settings . hau_form_options | split : ',' %}
{% for o in optionsArray %}
{% assign option = o | strip %}
<option value="{{ option }} "{% if cart . attributes . how-did-you-hear-about-us == option %} selected{% endif %} >{{ option }} </option>
{% endfor %}
<option value="Other"{% if cart . attributes . how-did-you-hear-about-us == "Other" %} selected{% endif %} >Other</option>
</select>
</p>
<p id="otherFormWrapper" style="{% unless cart . attributes . how-did-you-hear-about-us == 'Other' %} display:none{% endunless %} ">
<label id="how-did-you-hear-about-us-other--label" for="how-did-you-hear-about-us-other">Other</label>
<span id="how-did-you-hear-about-us-other--error" style="display:none">{{ settings . hau_error_message_other }} </span>
<input id="how-did-you-hear-about-us-other" type="text" name="attributes[how-did-you-hear-about-us-other]" value="{{ cart . attributes . how-did-you-hear-about-us-other }} "/>
</p>
</div>
<script>
(function() {
document.addEventListener("DOMContentLoaded", initForm);
document.addEventListener("shopify:section:load", initForm);
function initForm(){
var formElement = document.querySelector('#how-did-you-hear-about-us');
var formError = document.querySelector('#how-did-you-hear-about-us--error');
var otherFormElement = document.querySelector('#how-did-you-hear-about-us-other');
var otherFormError = document.querySelector('#how-did-you-hear-about-us-other--error');
var otherFormWrapper = document.querySelector('#otherFormWrapper');
var checkoutButtons = document.querySelectorAll('[name="checkout"], [name="goto_pp"], [name="goto_gc"]');
function showOrHideForm(){
if (formElement.value == 'Other'){
otherFormWrapper.style.display = '';
} else {
otherFormWrapper.style.display = 'none';
}
}
function checkFormElement(){
if (formElement.value.length == 0){
formElement.classList.add('error');
formError.style.display = '';
} else {
if (formElement.classList.contains('error')){
formElement.classList.remove('error');
formError.style.display = 'none';
}
}
}
function checkOtherFormElement(){
if (otherFormElement.value.length == 0){
otherFormElement.classList.add('error');
otherFormError.style.display = '';
} else {
if (otherFormElement.classList.contains('error')){
otherFormElement.classList.remove('error');
otherFormError.style.display = 'none';
}
}
}
otherFormElement.addEventListener("input", function() {
{% if settings . hau_form_validation %}
checkOtherFormElement();
{% endif %}
});
formElement.addEventListener("change", function() {
showOrHideForm();
{% if settings . hau_form_validation %}
checkFormElement();
{% endif %}
});
checkoutButtons.forEach(function(element){
element.addEventListener("click", function(evt) {
{% if settings . hau_form_validation %}
var validated = true;
if (formElement.value.length == 0){
checkFormElement();
validated = false;
}
if (formElement.value == 'Other'){
if (otherFormElement.value.length == 0){
checkOtherFormElement();
validated = false;
}
}
if (!validated) {
evt.preventDefault();
evt.stopPropagation();
}
{% endif %}
});
});
}
})()
</script>
Klikkaa Tallenna .
Napauta Shopify-sovelluksessa … -painiketta.
Napauta myyntikanavat -osiossa Verkkokauppa .
Napauta Hallitse teemoja .
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ... -painiketta ja klikkaa sitten Muokkaa koodia .
klikkaa Koodinpätkät -hakemistossa Lisää uusi koodinpätkä .
Luo koodinpätkä:
Nimeä koodinpätkäsi hear-about-us
.
Klikkaa Luo koodinpätkä .
Liitä seuraava koodi uudessa koodinpätkässäsi hear-about-us.liquid
:
<style>
#how-did-you-hear-about-us--label,
#how-did-you-hear-about-us-other--label {
font-weight: bold;
}
select#how-did-you-hear-about-us,
input#how-did-you-hear-about-us-other {
width: 100%;
padding: 8px 10px 8px 10px;
line-height: 1.2;
}
#how-did-you-hear-about-us,
#how-did-you-hear-about-us-other,
#how-did-you-hear-about-us--label,
#how-did-you-hear-about-us--error,
#how-did-you-hear-about-us-other--label,
#how-did-you-hear-about-us-other--error {
display:block;
margin-bottom: 5px;
}
#how-did-you-hear-about-us-other.error,
#how-did-you-hear-about-us.error {
border: 2px solid {{ settings . hau_error_color }} ;
}
#how-did-you-hear-about-us--error,
#how-did-you-hear-about-us-other--error {
color: {{ settings . hau_error_color }} ;
}
</style>
<div class="form-vertical">
<p>
<label id="how-did-you-hear-about-us--label" for="how-did-you-hear-about-us">How did you hear about us?</label>
<span id="how-did-you-hear-about-us--error" style="display:none">{{ settings . hau_error_message }} </span>
<select id="how-did-you-hear-about-us" name="attributes[how-did-you-hear-about-us]">
<option value=""{% if cart . attributes . how-did-you-hear-about-us == "" %} selected{% endif %} >Please make a selection</option>
{% assign optionsArray = settings . hau_form_options | split : ',' %}
{% for o in optionsArray %}
{% assign option = o | strip %}
<option value="{{ option }} "{% if cart . attributes . how-did-you-hear-about-us == option %} selected{% endif %} >{{ option }} </option>
{% endfor %}
<option value="Other"{% if cart . attributes . how-did-you-hear-about-us == "Other" %} selected{% endif %} >Other</option>
</select>
</p>
<p id="otherFormWrapper" style="{% unless cart . attributes . how-did-you-hear-about-us == 'Other' %} display:none{% endunless %} ">
<label id="how-did-you-hear-about-us-other--label" for="how-did-you-hear-about-us-other">Other</label>
<span id="how-did-you-hear-about-us-other--error" style="display:none">{{ settings . hau_error_message_other }} </span>
<input id="how-did-you-hear-about-us-other" type="text" name="attributes[how-did-you-hear-about-us-other]" value="{{ cart . attributes . how-did-you-hear-about-us-other }} "/>
</p>
</div>
<script>
(function() {
document.addEventListener("DOMContentLoaded", initForm);
document.addEventListener("shopify:section:load", initForm);
function initForm(){
var formElement = document.querySelector('#how-did-you-hear-about-us');
var formError = document.querySelector('#how-did-you-hear-about-us--error');
var otherFormElement = document.querySelector('#how-did-you-hear-about-us-other');
var otherFormError = document.querySelector('#how-did-you-hear-about-us-other--error');
var otherFormWrapper = document.querySelector('#otherFormWrapper');
var checkoutButtons = document.querySelectorAll('[name="checkout"], [name="goto_pp"], [name="goto_gc"]');
function showOrHideForm(){
if (formElement.value == 'Other'){
otherFormWrapper.style.display = '';
} else {
otherFormWrapper.style.display = 'none';
}
}
function checkFormElement(){
if (formElement.value.length == 0){
formElement.classList.add('error');
formError.style.display = '';
} else {
if (formElement.classList.contains('error')){
formElement.classList.remove('error');
formError.style.display = 'none';
}
}
}
function checkOtherFormElement(){
if (otherFormElement.value.length == 0){
otherFormElement.classList.add('error');
otherFormError.style.display = '';
} else {
if (otherFormElement.classList.contains('error')){
otherFormElement.classList.remove('error');
otherFormError.style.display = 'none';
}
}
}
otherFormElement.addEventListener("input", function() {
{% if settings . hau_form_validation %}
checkOtherFormElement();
{% endif %}
});
formElement.addEventListener("change", function() {
showOrHideForm();
{% if settings . hau_form_validation %}
checkFormElement();
{% endif %}
});
checkoutButtons.forEach(function(element){
element.addEventListener("click", function(evt) {
{% if settings . hau_form_validation %}
var validated = true;
if (formElement.value.length == 0){
checkFormElement();
validated = false;
}
if (formElement.value == 'Other'){
if (otherFormElement.value.length == 0){
checkOtherFormElement();
validated = false;
}
}
if (!validated) {
evt.preventDefault();
evt.stopPropagation();
}
{% endif %}
});
});
}
})()
</script>
Klikkaa Tallenna .
Napauta Shopify-sovelluksessa … -painiketta.
Napauta myyntikanavat -osiossa Verkkokauppa .
Napauta Hallitse teemoja .
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ... -painiketta ja klikkaa sitten Muokkaa koodia .
klikkaa Koodinpätkät -hakemistossa Lisää uusi koodinpätkä .
Luo koodinpätkä:
Nimeä koodinpätkäsi hear-about-us
.
Klikkaa Luo koodinpätkä .
Liitä seuraava koodi uudessa koodinpätkässäsi hear-about-us.liquid
:
<style>
#how-did-you-hear-about-us--label,
#how-did-you-hear-about-us-other--label {
font-weight: bold;
}
select#how-did-you-hear-about-us,
input#how-did-you-hear-about-us-other {
width: 100%;
padding: 8px 10px 8px 10px;
line-height: 1.2;
}
#how-did-you-hear-about-us,
#how-did-you-hear-about-us-other,
#how-did-you-hear-about-us--label,
#how-did-you-hear-about-us--error,
#how-did-you-hear-about-us-other--label,
#how-did-you-hear-about-us-other--error {
display:block;
margin-bottom: 5px;
}
#how-did-you-hear-about-us-other.error,
#how-did-you-hear-about-us.error {
border: 2px solid {{ settings . hau_error_color }} ;
}
#how-did-you-hear-about-us--error,
#how-did-you-hear-about-us-other--error {
color: {{ settings . hau_error_color }} ;
}
</style>
<div class="form-vertical">
<p>
<label id="how-did-you-hear-about-us--label" for="how-did-you-hear-about-us">How did you hear about us?</label>
<span id="how-did-you-hear-about-us--error" style="display:none">{{ settings . hau_error_message }} </span>
<select id="how-did-you-hear-about-us" name="attributes[how-did-you-hear-about-us]">
<option value=""{% if cart . attributes . how-did-you-hear-about-us == "" %} selected{% endif %} >Please make a selection</option>
{% assign optionsArray = settings . hau_form_options | split : ',' %}
{% for o in optionsArray %}
{% assign option = o | strip %}
<option value="{{ option }} "{% if cart . attributes . how-did-you-hear-about-us == option %} selected{% endif %} >{{ option }} </option>
{% endfor %}
<option value="Other"{% if cart . attributes . how-did-you-hear-about-us == "Other" %} selected{% endif %} >Other</option>
</select>
</p>
<p id="otherFormWrapper" style="{% unless cart . attributes . how-did-you-hear-about-us == 'Other' %} display:none{% endunless %} ">
<label id="how-did-you-hear-about-us-other--label" for="how-did-you-hear-about-us-other">Other</label>
<span id="how-did-you-hear-about-us-other--error" style="display:none">{{ settings . hau_error_message_other }} </span>
<input id="how-did-you-hear-about-us-other" type="text" name="attributes[how-did-you-hear-about-us-other]" value="{{ cart . attributes . how-did-you-hear-about-us-other }} "/>
</p>
</div>
<script>
(function() {
document.addEventListener("DOMContentLoaded", initForm);
document.addEventListener("shopify:section:load", initForm);
function initForm(){
var formElement = document.querySelector('#how-did-you-hear-about-us');
var formError = document.querySelector('#how-did-you-hear-about-us--error');
var otherFormElement = document.querySelector('#how-did-you-hear-about-us-other');
var otherFormError = document.querySelector('#how-did-you-hear-about-us-other--error');
var otherFormWrapper = document.querySelector('#otherFormWrapper');
var checkoutButtons = document.querySelectorAll('[name="checkout"], [name="goto_pp"], [name="goto_gc"]');
function showOrHideForm(){
if (formElement.value == 'Other'){
otherFormWrapper.style.display = '';
} else {
otherFormWrapper.style.display = 'none';
}
}
function checkFormElement(){
if (formElement.value.length == 0){
formElement.classList.add('error');
formError.style.display = '';
} else {
if (formElement.classList.contains('error')){
formElement.classList.remove('error');
formError.style.display = 'none';
}
}
}
function checkOtherFormElement(){
if (otherFormElement.value.length == 0){
otherFormElement.classList.add('error');
otherFormError.style.display = '';
} else {
if (otherFormElement.classList.contains('error')){
otherFormElement.classList.remove('error');
otherFormError.style.display = 'none';
}
}
}
otherFormElement.addEventListener("input", function() {
{% if settings . hau_form_validation %}
checkOtherFormElement();
{% endif %}
});
formElement.addEventListener("change", function() {
showOrHideForm();
{% if settings . hau_form_validation %}
checkFormElement();
{% endif %}
});
checkoutButtons.forEach(function(element){
element.addEventListener("click", function(evt) {
{% if settings . hau_form_validation %}
var validated = true;
if (formElement.value.length == 0){
checkFormElement();
validated = false;
}
if (formElement.value == 'Other'){
if (otherFormElement.value.length == 0){
checkOtherFormElement();
validated = false;
}
}
if (!validated) {
evt.preventDefault();
evt.stopPropagation();
}
{% endif %}
});
});
}
})()
</script>
Klikkaa Tallenna .
Koodinpätkän sisällyttäminen ostoskorisivuusi Mitä kautta kuulit meistä? -koodinpätkän lisääminen ostoskorisivulle:
Klikkaa Osat -hakemistossa kohtaa cart-template.liquid
. Jos teemassasi ei ole mallia cart-template.liquid
, valitse silloin Mallit -hakemistosta cart.liquid
.
Etsi tämän elementin lopputunniste </form>
. Liitä seuraava koodi uudelle riville lopputunnisteen </form>
yläpuolelle:
{% render 'hear-about-us' %}
Klikkaa Tallenna .
Teeman asetusten lisääminen määritystä varten
Klikkaa Asetus -hakemistossa settings_schema.json
.
Etsi koodista ensimmäinen sulkeva kaarisulje koodissa },
. Liitä seuraava koodi uudelle riville sulkevan kaarisulkeen alle },
:
{
"name" : "Hear About Us" ,
"settings" : [
{
"type" : "text" ,
"id" : "hau_form_options" ,
"label" : "Form options" ,
"default" : "Facebook, Twitter, Google, Instagram, Youtube" ,
"info" : "Separate each option with a comma"
},
{
"type" : "header" ,
"content" : "Form validation"
},
{
"type" : "checkbox" ,
"id" : "hau_form_validation" ,
"label" : "Enable form validation" ,
"default" : true
},
{
"type" : "text" ,
"id" : "hau_error_message" ,
"label" : "Error message" ,
"info" : "The error message that is displayed when no selection is made" ,
"default" : "Please select an option below"
},
{
"type" : "text" ,
"id" : "hau_error_message_other" ,
"label" : "Other field error message" ,
"info" : "The error message that is displayed when there is no input in the 'Other' field" ,
"default" : "Please fill the text field below"
},
{
"type" : "header" ,
"content" : "Error styling"
},
{
"type" : "color" ,
"id" : "hau_error_color" ,
"label" : "Color" ,
"default" : "#ff0000"
}
]
} ,
Klikkaa Tallenna .
Lomakekentän asettaminen pakolliseksi Jos haluat estää asiakkaita jatkamasta kassalle ilman, että he valitsevat jonkin vaihtoehdon Mitä kautta kuulit meistä? -lomakekenttään, voit määrittää kentän pakolliseksi.
Klikkaa Osat -hakemistossa kohtaa cart-template.liquid
. Jos teemassasi ei ole mallia cart-template.liquid
, valitse silloin Mallit -hakemistosta cart.liquid
.
Etsi seuraava novalidate
-määrite ostoskorilomakkeen koodista:
novalidate
Korvaa novalidate
-määrite seuraavalla koodilla:
{% unless settings . hau_form_validation %} novalidate{% endunless %}
Klikkaa Tallenna .
Klikkaa teemaeditorin sivupalkissa Teeman asetukset .
Klikkaa Kuule meistä -välilehteä.
Varmista Lomakkeen validointi -kohdassa, että Ota lomakkeen validointi käyttöön -valinta on käytössä.
Huomaa
Voit mukauttaa näytettäviä virheilmoituksia muuttamalla virheilmoituksen ja muiden kenttien virheilmoitusten tekstikenttien asetuksia. Voit myös mukauttaa virheen väriä muuttamalla Väri -asetusta Virheen tyyli -kohdassa.
Määritä vaihtoehdot Jos haluat mukauttaa vaihtoehtoja avattavasta Mitä kautta kuulit meistä? -valikosta, voit muokata vaihtoehtoja teemaeditorin teema-asetuksissa.
Klikkaa teemaeditorissa Teeman asetukset .
Klikkaa Kuule meistä -välilehteä.
Lisää tai poista pilkuilla eroteltuja vaihtoehtoja kohdassa Lomakkeen vaihtoehdot .
Klikkaa Tallenna .
Huomaa
Älä lisää vaihtoehtoa Muu , koska se lisätään automaattisesti.
Usein kysyttyä Missä voin tarkastella kerättyjä tietoja? Näet vastauksen adminissa tilauksen Lisätiedot -osiossa:
Jos mikään luettelossa oleva vaihtoehto ei ole sopiva, voiko asiakas kirjoittaa oman vastauksen? Kyllä. Kun asiakas valitsee Muu -vaihtoehdon, avattavan valikon alle aukeaa tekstiruutu, johon hän voi kirjoittaa vastauksen.
Voinko näyttää vastauksen uuden tilauksen ilmoitussähköpostissa? Kyllä. Voit näyttää asiakkaiden vastauksia uuden tilauksen ilmoitussähköpostissasi seuraavalla tavalla:
Siirry Adminin Ilmoitus-sivulle ja lisää seuraava koodi Uusi tilaus -sähköpostimalliin:
This customer heard about us through {% if attributes . how-did-you-hear-about-us-other == blank %}{{ attributes . how-did-you-hear-about-us }}{% else %}{{ attributes . how-did-you-hear-about-us-other }}{% endif %} .
Klikkaa Tallenna .