OptiMonk를 사용하여 최고의 전자상거래 브랜드 팝업을 복사하는 방법

전자 상거래 업계에서 일하는 경우 온라인 쇼핑을 할 때 항상 두 개의 모자를 쓰고 있습니다.

물론, 당신은 당신이 정말 좋아하는 아이템을 찾고 있고 다른 사람들과 마찬가지로 특가 상품을 찾고 있습니다. 그러나 다른 전자 상거래 사이트에서 작동하는 것과 작동하지 않는 것에 대해서도 주시하고 있습니다. 영감을 모으고 있습니다. 많은 훌륭한 아이디어가 이렇게 시작됩니다.

최고의 브랜드 웹사이트에 멋진 팝업이 표시되면 어떻게 됩니까?

음, OptiMonk 사용자라면 팝업 템플릿을 쉽게 조정하여 Adidas, American Eagle 및 Crocs와 같은 매장의 가장 놀라운 팝업처럼 현장 메시지를 표시할 수 있습니다!

이 기사에서는 영감을 주는 놀라운 예처럼 보이는 팝업을 만드는 방법을 정확히 살펴보겠습니다.

Adidas는 세계에서 가장 큰 라이프스타일 브랜드 중 하나이며 많은 사람들이 열망하는 브랜드입니다.

회사는 아래 팝업에서 이 이미지를 활용하여 웹사이트 방문자에게 "AdiClub에 가입"할 수 있는 기회를 제공합니다. 누가 그 클럽에 있고 싶지 않겠습니까?

매장에 충성도 클럽도 있는 경우 유사한 디자인을 사용하여 홍보할 수 있습니다.

팝업 복사를 시도하여 어떻게 작동하는지 봅시다. (실제로 할 때 자신의 이미지를 사용하고 복사하는 것을 기억하십시오!)

복사하려는 것과 유사한 기능을 가진 아래와 같은 템플릿을 선택하는 것으로 시작합니다.

먼저 Adidas 팝업에서 사본을 추가했습니다.

이제 팝업의 스타일을 조정해 보겠습니다.

팝업의 모서리 반경을 0으로 변경하여 완벽한 직사각형으로 만들었습니다.

그런 다음 요소의 정렬을 변경하여 닫기 버튼을 팝업 가장자리로 이동합니다.

다음으로 이미지를 변경하고 크기를 조정하고 흰색 테두리를 추가했습니다.

그리고 왼쪽 열을 더 크게 만들었습니다.

마지막으로 새 확인란 필드를 추가하고("예, 13세 이상입니다") 버튼 모양을 변경하는 등 약간의 변경을 했습니다. 글꼴을 Adidas와 유사한 글꼴로 변경한 후 팝업은 다음과 같습니다.

거의 구별할 수 없습니다! 약간의 변경만으로 이 템플릿을 완전히 다른 팝업으로 바꿀 수 있었습니다.

방금 본 아디다스의 팝업과 달리 Fashion Nova는 아름답게 미니멀한 팝업을 사용하여 10% 할인을 홍보했습니다. 이미지도 없고 색상도 없고 흑백 텍스트만 있습니다. 글꼴도 단순한 산세리프체입니다.

이 디자인 접근 방식이 하는 일은 방문자가 제안에 주의를 기울이도록 하는 것입니다. 화면에 그것이 전부이기 때문입니다!

또한 Fashion Nova는 관심 있는 제품 유형과 관련하여 "선호도" 목록에서 선택하도록 요청합니다. 이 정보를 수집하면 고객을 세분화하여 마케팅 메시지가 관련성이 있는지 확인하는 데 도움이 됩니다( 이 접근 방식에 대한 자세한 내용은 여기 ).

시도해 보고 싶다면 다음과 같이 할 수 있습니다.

다시 한 번, 우리가 복사하는 것과 유사한 요소가 있는 템플릿을 선택하는 것이 가장 좋습니다. 우리는 이 퀴즈 스타일 템플릿을 기반으로 선택했습니다.

OptiMonk의 브랜드 키트 기능을 사용하여 모든 모서리, 색상 및 글꼴을 한 번에 변경할 수 있습니다.

이미 훨씬 더 가까이! 특히 상단에 Fashion Nova 로고를 추가한 후:

그런 다음 사본을 변경했습니다.

다음으로, 원래 Fashion Nova 팝업에 있던 몇 가지 요소, 즉 이메일 필드, 확인란 필드 및 두 개의 버튼을 맨 아래에 추가했습니다.

이 시점에서 팝업에 필요한 모든 요소가 있습니다. 다음 단계는 우리가 시작한 Fashion Nova 팝업처럼 보이도록 사용자 정의하는 것이었습니다.

상단의 텍스트 요소로 시작하여 글꼴 크기와 두께를 변경했습니다.

너비와 높이를 변경하고 테두리를 약간 조정하여 설문조사 요소를 더 작게 만들었습니다.

마지막 단계는 이메일 필드와 확인란을 사용자 지정하는 것이었습니다.

버튼:

모두 완료되었습니다! 얼마나 놀랍습니까?

라이트박스 팝업을 사용하여 웹사이트 방문자가 이메일 목록을 구독하도록 요청하는 대신 American Eagle은 웹페이지 하단에 표시되는 고정 막대를 만들어 다른 접근 방식을 취했습니다.

고정 막대는 팝업만큼 주의를 끌지는 않지만 팝업과 같은 정도로 사용자의 탐색 경험을 방해하지 않습니다.

가능한 한 빨리 목록을 늘리려고 하지 않는 일부 상점의 경우 고정 막대가 가능한 한 중단 없는 경험을 제공하면서 일부 이메일을 수집하는 좋은 솔루션입니다.

그것이 당신처럼 들리면 다음 템플릿으로 시작하여 American Eagle과 같은 끈적 끈적한 막대를 만들 수 있습니다.

우리가 취한 첫 번째 단계는 왼쪽에 있는 이미지를 제거하는 것이었습니다.

그런 다음 사본을 변경하고 American Eagle이 사용하는 글꼴 및 크기와 일치하도록 서식을 변경했습니다.

이메일 필드와 버튼을 사용자 정의한 후 "모든 이메일" 및 "Airee 이메일"에 대한 확인란을 추가했습니다(토글 막대에 액세스할 수 없기 때문에).

그리고 그게 그거였어!

마지막으로 복사할 팝업은 Crocs의 클래식 이메일 가입 팝업입니다.

이미 매우 유사해 보이는 이 템플릿부터 시작하겠습니다.

팝업에서 불필요한 요소를 제거하고 이미지를 업데이트했습니다.

다음으로 배경과 텍스트의 색상을 변경했습니다.

그런 다음 복사본을 업데이트하고 전체 팝업 주위에 흰색 테두리를 추가했습니다.

닫기 버튼을 팝업 가장자리로 이동한 후 완료되었습니다.

똑같죠?

보시다시피 OptiMonk의 광범위한 템플릿과 강력한 끌어서 놓기 편집기의 조합은 온라인에서 보는 모든 팝업을 복사할 수 있음을 의미합니다. 올바른 요소를 추가하고 올바른 설정을 변경하기만 하면 됩니다.

이 기사에서 우리는 단순히 다른 브랜드의 팝업을 복사하라고 말하지 않았습니다. 팝업은 상점의 개성, 모양 및 느낌과 일치해야 합니다. 그리고 여러분의 스타일에 맞게 템플릿을 완전히 다르게 보이게 할 수 있는 방법을 배우셨기를 바랍니다!

물론 성공적인 브랜드에서 영감을 얻는 것도 나쁘지 않습니다! 😉

웹에서 본 것 중 마음에 드는 팝업이 있습니까? 댓글로 알려주세요!