Evlop에서 모바일 앱 임베드 확장 기능 사용하기

소개

모바일 앱 임베드 확장 기능을 사용하면 웹사이트 또는 Shopify 웹사이트의 페이지를 Evlop 모바일 앱에 자연스럽게 삽입할 수 있습니다. 웹페이지의 본문 콘텐츠만 표시하고 헤더, 푸터 등 불필요한 요소는 자동으로 숨겨 앱 내에서 원활한 사용자 경험을 제공합니다.

사용 시점

커스텀 페이지나 복잡한 웹사이트 페이지를 새로 만들지 않고 빠르게 표시할 수 있습니다.
웹사이트와 모바일 앱 간의 일관성을 유지할 수 있습니다.
정책, FAQ, 특별 페이지를 앱에 바로 포함할 수 있습니다.

작동 방식

이 확장 기능은 웹사이트 또는 Shopify 웹사이트의 <body> 태그 안에 직접 위치한 <main> HTML 요소를 인식하여 앱 내에서는 이 콘텐츠만 표시하고 다른 모든 요소는 숨깁니다. 최상의 결과를 위해 웹사이트 테마에서 <main> 태그가 <body> 안에 직접 위치하고, 헤더와 푸터는 <body> 태그 안에 있되 <main> 밖에 배치되도록 하세요.

문제 해결

1. 활성화 후 아무것도 표시되지 않는 경우

확인: 기본 콘텐츠를 둘러싼 <body> 내부에 <main> HTML 태그가 웹사이트 테마에 직접 포함되어 있는지 확인하세요.
해결: <main> 태그가 없으면 테마 코드에 추가하거나 테마 개발자에게 문의하세요.
확인: Shopify 테마 설정에서 모바일 앱 임베드가 활성화되어 있는지 확인하세요:
- Shopify Admin > Online Store > Themes > Customize 로 이동합니다.
- Theme Settings > App Embeds 로 이동합니다.
- 모바일 앱 임베드 확장을 활성화합니다.
해결: 활성화되지 않았다면 설정을 켜고 저장하세요.

2. 헤더 또는 푸터가 여전히 표시되는 경우

확인: 웹사이트 테마 구조를 확인하세요. 헤더와 푸터는 <body> 태그 안에 있어야 하지만 <main> 태그 밖에 있어야 합니다.
해결: 헤더와 푸터를 <main> 밖으로 이동하여 테마 구조를 조정하세요. 코드 편집이 어렵다면 테마 개발자에게 문의하세요.

추가 도움이 필요하시면 Evlop Support에 문의하세요.