Shopify 스토어에 문의 양식을 추가하는 방법

고객 서비스는 비즈니스에서 가장 어려운 부분 중 하나일 수 있지만 행복한 고객이 없으면 비즈니스도 없습니다. 그렇기 때문에 고객 경험을 최우선 순위 중 하나로 만드는 것이 중요하며 고객이 귀하와 의사 소통하는 방식은 모두 그 경험의 일부입니다.

많은 기업에서 Intercom 또는 ZenDesk와 같은 헬프데스크 도구를 활용하지만 지금 당장 필요한 것 이상일 수 있습니다.

Shopify 테마에 아직 문의 양식이 없거나 Typeform, Google Forms 또는 Wufoo와 같은 타사 도구를 사용 중이거나 조금 단순화하려는 경우 Shopify에서 바로 간단한 문의 양식을 만들 수 있습니다. .

이 튜토리얼을 위해 상점에 양식이 없다고 가정하고 이 튜토리얼이 끝나면 고객 정보를 받아들이고 다음과 같은 모양을 갖게 될 것입니다.

시작하기 전에: 테마 사본 만들기

Shopify 대시보드에 로그인하고 온라인 스토어 > 테마 로 이동합니다. 라이브 테마를 찾아 작업 드롭다운 메뉴를 클릭하고 복제 를 클릭합니다.

복제되면 작업 메뉴를 다시 클릭하고 코드 편집 을 클릭 합니다 .

문의 양식을 작성해 봅시다!

문의 양식이 작동하려면 두 가지가 필요합니다. 코드를 보관할 새 템플릿 파일과 스토어의 새 페이지입니다.

새 템플릿 파일 만들기

이제 코드 편집기에 도착했으므로 폴더 트리에서 화면 왼쪽을 보고 Templates 를 클릭하고 확장합니다. 그런 다음 새 템플릿 추가 링크를 클릭합니다.

그런 다음 첫 번째 드롭다운에서 페이지 를 선택하고 연락처 라고 합니다. 그런 다음 템플릿 만들기 버튼을 누르십시오.

코드 복사 및 붙여넣기

다음은 문의 양식을 작성하는 데 필요한 모든 코드입니다.

다음 코드 블록을 복사하여 새 파일에 붙여넣고 저장 버튼을 누르십시오.

<div 클래스 = "페이지 너비" >
<div 클래스= "그리드" >
<div class= “grid__item medium-up–five-sixths medium-up–push-one-12th” >
<div class= "섹션 헤더 텍스트 센터" >
<h1> {{ page.title }} </h1>
</div>

{% if page.content.size > 0 %}
<div 클래스 = "rte" >
{{ 페이지 콘텐츠 }}
</div>
{% endif %}

<div class= "연락처 양식 양식 수직" >
{%- formId 할당 = 'ContactForm' -%}
{% 양식 '연락처', ID: formId %}
{% 포함 '양식 상태', form_id: formId %}

<div class= “그리드 그리드–하프 거터” >
<div class= "grid__item medium-up–one-half" >
<label for= “{{ formId }}-이름” > {{ 'contact.form.name' | t }} </label>
<입력 유형= “텍스트” id= “{{ formId }}-이름” 이름= “연락처[이름]” >
</div>
<div class= "grid__item medium-up–one-half" >
<label for= “{{ formId }}-email” > {{ 'contact.form.email' | t }} <span aria-hidden= "참" > * </span></label>
<입력 필수 유형= "email" id= "{{ formId }}-email" name= "contact[email]" autocorrect= "off" autocapitalize= "off" aria-required= "true"
{%- form.errors에 '이메일'이 포함된 경우 -%}
class= "입력-오류"
aria-invalid= "참"
aria- descriptedby = “{{ formId }}-이메일 오류”
{%- endif -%}
>
{%- form.errors에 '이메일'이 포함된 경우 -%}
<span id= “{{ formId}}-email-error” class= “input-error-message” >
<span class= "시각적으로 숨겨진" > {{ 'general.accessibility.error' | t }} </span>
{% 포함 '아이콘 오류' %}
<span> {{ form.errors.translated_fields['이메일'] | 대문자 }} {{ form.errors.messages['email'] }}. </span>
</span>
{%- endif -%}
</div>
</div>

<label for= “{{ formId }}-order” class= “hidden-label” > 주문 번호: </label>
<입력 유형= “텍스트” id= “{{ formId }}-주문” 이름= “연락처[주문]” 자리 표시자= “#1234” >

<label for= “{{ formId }}-phone” > {{ 'contact.form.phone' | t }} </label>
<입력 유형= “전화” id= “{{ formId }}-전화” 이름= “연락처[전화]” 패턴= “[0-9\-]*” >

<label for= “{{ formId }}-message” > {{ 'contact.form.message' | t }} <span aria-hidden= "참" > * </span></label>
<textarea required rows= “10” id= “{{ formId }}-message” name= “contact[body]” > {% if form.body %}{{ form.body }}{% endif %} </ 텍스트 영역>

<입력 유형= "제출" 클래스= "btn" 값= "{{ 'contact.form.submit' | }}” >

{% 엔드폼 %}
</div>
</div>
</div>
</div>

검증 스니펫

우리 양식에는 사용자가 양식을 작성할 때 실수를 했는지 알 수 있도록 약간의 유효성 검사 기능이 있습니다. 이 코드는 form-status.liquid 라는 별도의 액체 조각 파일에 있습니다.

테마 코드 편집기로 돌아가서 Snippets 를 클릭하고 확장합니다. 그런 다음 새 스니펫 추가 를 클릭합니다.

이름을 form-status 로 지정 하고 Create snippet 을 누르십시오.

여기에 있는 코드를 복사하여 새 스니펫에 붙여넣고 저장을 누르 십시오 .

새 연락처 페이지 만들기

그런 다음 Shopify 관리자로 돌아가 온라인 스토어 > 페이지를 클릭합니다.

그런 다음 화면 오른쪽 상단에 있는 페이지 추가 버튼을 클릭합니다. 제목을 선택하고 설명을 입력합니다(선택 사항). 그런 다음 화면 오른쪽 하단에서 템플릿 접미사 아래의 드롭다운을 클릭하고 방금 만든 새 템플릿을 찾습니다. page.contact 라고 해야 합니다.

이제 이 새 페이지는 새 템플릿 파일에 방금 붙여넣은 코드를 사용합니다. 따라서 여기에서 변경하면 템플릿 page.contact 를 사용하도록 선택한 페이지에만 반영됩니다. 제목과 설명이 마음에 들면 저장 을 클릭합니다.

이제 상단의 페이지 보기 를 클릭하여 페이지를 미리 볼 수 있습니다.

하지만 기다려! 그 모든 코드는 무엇을 의미했습니까?

필요한 경우 직접 편집하거나 변경할 수 있도록 사용한 코드에 대해 조금 더 알아보겠습니다. 코드를 다운로드하거나 북마크에 추가하려면 여기에서 Gist를 만들어 쉽게 복사하여 붙여넣을 수 있습니다.

코드가 압도적으로 보일 수 있지만 모든 if 문, 클래스 및 기타 속성을 살펴보면 매우 기본적입니다.

양식이 데이터를 적절하게 캡처하고 제출하는 데 필요한 주요 요소는 양식 데이터를 허용하는 필수 레이블 및 입력 필드입니다.

고객의 이름을 캡처하는 코드를 살펴보세요.

<label for= “{{ formId }}-이름” > {{ 'contact.form.name' | t }} </label>
<입력 유형= “텍스트” id= “{{ formId }}-이름” 이름= “연락처[이름]” >

레이블 과 입력 요소가 필요합니다. 레이블에는 동일한 id 를 공유하는 일치하는 입력 요소에 연결(또는 연결)하는 for 속성이 있습니다.

대괄호 사이에 있는 텍스트는 고객이 연락처 페이지에서 보게 되는 내용입니다. {{ 'contact.form.name' | t }} Shopify 관리자 내부의 언어 설정을 참조하는 동적 태그를 사용하기 때문입니다.

관리자의 이 영역은 생소할 수 있지만 Shopify 내에서 편집할 수 있는 모든 텍스트가 있는 곳입니다. 여기에서 편집할 수 있는 기타 항목 중 일부는 체크아웃 제목 또는 "지금 지불" 버튼의 텍스트입니다.

연락처 양식의 "이름" 레이블을 편집하려면 설정 > 스토어 언어 > 테마 언어 변경으로 이동 하십시오 .

탐색에서 연락처 를 클릭합니다.

이제 연락처 양식 내에서 액세스 권한이 있는 모든 필드를 볼 수 있습니다.

테스트 이메일 보내기

yourwebsite.com/pages/contact-us 의 연락처 양식으로 돌아가서 양식을 제출해 보십시오. 성공하면 화면에 다음과 같은 내용이 표시되어야 합니다.

그러면 다음과 같은 이메일을 받게 됩니다.

보너스

이제 주문 번호에 대한 추가 필드가 있는 상점의 기본 연락처 양식을 성공적으로 구축했습니다! 이것을 미리 수집하면 나중에 요청해야 하는 번거로움과 시간을 절약할 수 있습니다. 이것은 주문이 많고 둘 이상을 참조할 수 있는 반복 고객이 있는 모든 상점에 특히 유용합니다.

결론

이 튜토리얼이 가치 있다고 생각하셨기를 바랍니다. 저는 처음에 이 정보를 수집하기 위해 제가 말한 타사 도구 중 하나를 사용하곤 했습니다. 이 도구는 훌륭하지만 상점 첫 화면에 통합되지 않고 비용이 많이 듭니다!