도움말
로그인

서식 있는 텍스트 편집기를 사용하여 콘텐츠 작업하기

Shopify의 서식 있는 텍스트 편집기를 사용하여 온라인 스토어에 표시되는 콘텐츠의 서식을 지정하고 스타일을 지정할 수 있습니다.

이 페이지의 내용

서식 있는 텍스트 편집기 사용처

서식 있는 텍스트 편집기를 사용하여 스토어의 여러 위치에서 텍스트를 추가하거나 편집할 수 있습니다.

호환되는 테마를 사용하는 경우 테마 편집기를 사용하여 페이지 또는 템플릿에 서식 있는 텍스트 섹션을 추가할 수 있습니다.

서식 있는 텍스트 편집기로 HTML 콘텐츠 추가하기

서식 있는 텍스트 편집기를 사용하여 블로그 게시물, 페이지, 제품 설명, 컬렉션 설명에 HTML 콘텐츠를 입력할 수 있습니다.

서식 있는 텍스트 편집기 내 콘텐츠의 HTML 코드를 보려면 코드 편집 버튼을 클릭하십시오.

HTML 보기에서는 서식 있는 텍스트 편집기의 콘텐츠를 다양하게 변경할 수 있습니다. HTML을 사용하여 이미지, 동영상, 표를 추가할 수 있으며 레이아웃 및 콘텐츠 스타일을 디버그하거나 미세 조정할 수 있습니다.

미디어 위젯 임베드하기

동영상이나 음악 위젯을 임베드하려면 먼저 Youtube, Vimeo 또는 SoundCloud와 같은 서비스에서 호스팅해야 합니다. 이러한 서비스는 임베드 코드를 생성하며, 이 코드를 복사하여 Shopify 관리자 서식 있는 텍스트 편집기에 붙여넣을 수 있습니다.

단계:

  1. 임베드하려는 미디어의 임베드 코드를 찾으십시오.
  2. 임베드 코드를 클릭한 다음 PC에서는 Ctrl + A, Mac에서는 Command + A를 눌러 전체 코드를 선택하십시오.
  3. PC에서는 Ctrl + C, Mac에서는 Command + C를 눌러 임베드 코드를 복사하십시오.
  4. Shopify 관리자에서 편집 중인 콘텐츠의 서식 있는 텍스트 편집기에 있는 HTML 보기 버튼을 클릭하십시오.
  5. PC에서는 Ctrl + V, Mac에서는 Command + V를 눌러 임베드 코드를 붙여넣으십시오.
  6. 저장을 클릭하십시오.

서식 있는 텍스트 편집기로 텍스트 서식 지정하기

서식 버튼을 사용하여 단락, 머리글 또는 인용구를 빠르게 만들 수 있습니다. 올바른 서식과 머리글 수준을 사용하면 사용자와 검색 엔진이 웹사이트 콘텐츠를 읽는 데 도움이 됩니다.

텍스트 서식을 선택하려면 텍스트를 강조 표시한 다음 서식 버튼을 클릭하십시오.

서식 옵션

  • 단락

    웹사이트의 텍스트 콘텐츠는 대부분 단락 텍스트입니다. 단락 텍스트의 글꼴 크기는 보통 10~12pt이지만 일부 테마에서는 다른 글꼴 크기를 사용합니다.

  • 머리글(1-6)

    머리글은 콘텐츠를 구조화하는 데 사용됩니다. 6개의 머리글 수준이 있으며, 머리글 1이 가장 중요한 수준이고 머리글 6이 가장 중요하지 않은 수준입니다.

  • 인용구

    인용구는 인용문이나 책 또는 웹사이트의 발췌문과 같이 다른 사람의 말을 인용한 텍스트를 표시하는 데 사용됩니다.

굵은 텍스트

텍스트를 굵게 표시하려면 텍스트를 강조 표시하고 굵게 버튼을 클릭하십시오.

기울임꼴 텍스트

텍스트를 기울임꼴로 표시하려면 텍스트를 강조 표시하고 기울임꼴 버튼을 클릭하십시오.

밑줄 텍스트

텍스트에 밑줄을 치려면 텍스트를 강조 표시하고 밑줄 버튼을 클릭하십시오.

글머리 기호 목록 만들기

글머리 기호 목록을 만들려면 글머리 기호 목록 버튼을 클릭하십시오.

입력하여 첫 번째 글머리 기호 목록 항목을 만들 수 있습니다. 새 목록 항목을 만들려면 Enter 또는 Return 키를 누르십시오. 목록을 마치려면 Enter 또는 Return 키를 두 번 누르십시오.

번호 매기기 목록 만들기

번호 매기기 목록을 만들려면 번호 매기기 목록 버튼을 클릭하십시오.

입력하여 첫 번째 번호 매기기 목록 항목을 만들 수 있습니다. 새 목록 항목을 만들려면 Enter 또는 Return 키를 누르십시오. 목록을 마치려면 Enter 또는 Return 키를 두 번 누르십시오.

텍스트 들여쓰기

단락을 들여쓰면 왼쪽에 여백이 생깁니다. 단락을 들여쓰려면 들여쓰기 버튼을 클릭하십시오.

텍스트 내어쓰기

단락을 내어쓰면 들여쓴 여백이 모두 제거됩니다. 단락을 내어쓰려면 내어쓰기 버튼을 클릭하십시오.

텍스트 정렬

텍스트를 정렬하려면 텍스트를 선택하고 정렬 버튼을 클릭한 다음 왼쪽 정렬, 가운데 정렬 또는 오른쪽 정렬을 선택하십시오.

텍스트 색상 변경

  1. 텍스트를 강조 표시하고 색상 버튼을 클릭하십시오.
  2. 색상을 클릭하거나 16진수 코드를 입력하여 강조 표시된 텍스트를 해당 색상으로 변경하십시오.

텍스트 배경색 변경

  1. 텍스트를 강조 표시하고 색상 버튼을 클릭하십시오.
  2. 배경 탭을 클릭하십시오.
  3. 색상을 클릭하거나 16진수 코드를 입력하여 강조 표시된 텍스트의 배경을 해당 색상으로 변경하십시오.

서식 있는 텍스트 편집기에서 서식 지우기

텍스트나 이미지에서 서식을 제거하려면 콘텐츠를 강조 표시한 다음 서식 지우기 버튼을 클릭하십시오.

서식 있는 텍스트 편집기를 사용하여 표 삽입하기

서식 있는 텍스트 편집기를 사용하여 블로그 게시물, 페이지, 제품 설명, 컬렉션 설명에 표를 삽입할 수 있습니다. 표를 생성한 후 텍스트, 이미지, 동영상까지 표에 배치할 수 있습니다.

단계:

  1. 서식 있는 텍스트 편집기에서 표 삽입 버튼을 클릭하십시오.
  2. 표 삽입을 클릭하여 표를 삽입하십시오. 이렇게 하면 1개 행과 1개 열이 있는 표가 생성됩니다.

표를 생성한 후 표 삽입 버튼을 다시 클릭하여 표의 행과 열을 수정합니다.

  • 위에 행 삽입: 행에 커서를 놓고 이 버튼을 클릭하면 위에 새 행이 삽입됩니다.
  • 아래에 행 삽입: 행에 커서를 놓고 이 버튼을 클릭하면 아래에 새 행이 삽입됩니다.
  • 앞에 열 삽입: 열에 커서를 놓고 이 버튼을 클릭하면 해당 열 앞에 새 열이 삽입됩니다.
  • 뒤에 열 삽입: 열에 커서를 놓고 이 버튼을 클릭하면 해당 열 뒤에 새 열이 삽입됩니다.
  • 행 삭제: 삭제할 행에 커서를 놓은 다음 이 버튼을 클릭하십시오.
  • 열 삭제: 삭제할 열에 커서를 놓은 다음 이 버튼을 클릭하십시오.
  • 표 삭제: 표의 아무 곳에나 커서를 놓은 다음 이 버튼을 클릭하여 전체 표를 삭제하십시오.

서식 있는 텍스트 편집기를 사용하여 링크 삽입하기

서식 있는 텍스트 편집기를 사용하여 블로그 게시물, 페이지, 제품 설명, 컬렉션 설명에 링크(하이퍼링크)를 삽입할 수 있습니다. Shopify 온라인 스토어 내 페이지나 다른 웹사이트로 고객을 안내하는 링크를 추가할 수 있습니다. 고객이 연락하는 데 도움이 되도록 이메일 메시지를 열거나 전화를 거는 링크를 추가할 수도 있습니다.

단계:

  1. 링크로 전환하려는 텍스트나 이미지를 강조 표시하십시오.
  2. 링크 삽입을 클릭하십시오.
  3. “ 링크 대상 ” 필드에 링크의 목적지 URL을 입력하십시오.
    • Shopify 스토어 외부의 웹사이트로 링크하려면 https://와 웹 주소를 차례로 입력하십시오(예: https://www.example.com).
    • Shopify 온라인 스토어 내 페이지로 링크하려면 약식 URL을 입력하십시오(예: /collections/summer-collection).
    • 이메일 메시지를 여는 링크를 생성하려면 mailto:와 이메일 주소를 차례로 입력하십시오(예: mailto:example@example.com).
    • 전화를 거는 링크를 생성하려면 tel:과 전화번호를 차례로 입력하십시오(예: tel:+0-123-456-7890).
  4. 링크 제목 상자에 링크에 대한 간단한 설명을 입력하십시오.
  5. “ 이 링크 열기 ” 메뉴에서 링크가 열리는 방식을 선택하십시오.
    • 동일한 창: 사용자의 기존 브라우저 탭 또는 창에서 링크가 열립니다.
    • 새 창: 새 브라우저 탭 또는 창에서 링크가 열립니다.
  6. 링크 삽입을 클릭하여 강조 표시된 텍스트를 링크로 전환하십시오.

서식 있는 텍스트 편집기로 내부 및 외부 링크 추가하기

Shopify 스토어 내 페이지로 연결되는 링크를 내부 링크라고 합니다. 약식 URL을 사용하여 내부 링크를 생성할 수 있습니다. 예를 들어, /collections URL은 스토어의 컬렉션 페이지를 가리킵니다.

컬렉션이나 제품 페이지 등 온라인 스토어의 특정 페이지에 링크하려면 /page-type/page-handle URL 형식을 사용하십시오. 예를 들어 Summer Collection이라는 이름으로 생성한 컬렉션에 링크하려면 /collections/summer-collection URL을 사용하십시오.

Shopify 스토어 외부의 웹사이트로 연결되는 링크를 외부 링크라고 합니다. 외부 링크는 전체를 입력해야 하며 http://로 시작해야 합니다.

파일을 업로드한 후 서식 있는 텍스트 편집기 콘텐츠에 링크를 걸어 제품 또는 컬렉션 설명, 웹 페이지, 블로그 게시물에서 다운로드할 수 있게 설정할 수 있습니다.

단계:

데스크톱

  1. Shopify 관리자에서 **콘텐츠** > **파일**로 이동합니다.

  2. 링크하려는 파일의 URL을 복사합니다.

  3. Shopify 관리자에서 파일을 추가할 제품, 컬렉션, 웹 페이지 또는 블로그 게시물을 클릭합니다.

  4. 서식 있는 텍스트 편집기에서 링크 텍스트를 입력하거나 선택합니다.

  5. 링크 텍스트를 선택합니다.

  6. **링크 삽입**을 클릭합니다.

  7. **연결 대상** 필드에 링크하려는 파일의 URL을 붙여넣습니다.

  8. **링크 삽입**을 클릭합니다. 서식 있는 텍스트 편집기에서 링크된 텍스트는 파란색으로 표시되고 밑줄이 그어집니다.

모바일

  1. Shopify 앱에서 Menu 아이콘을 탭합니다.

  2. **콘텐츠** 메뉴에서 아래쪽 화살표 아이콘을 탭한 다음 **파일**을 탭합니다.

  3. 링크하려는 파일의 URL을 복사합니다.

  4. Shopify 관리자에서 파일을 추가할 제품, 컬렉션, 웹 페이지 또는 블로그 게시물을 탭합니다.

  5. 서식 있는 텍스트 편집기에서 링크 텍스트를 입력하거나 선택합니다.

  6. 링크 텍스트를 선택합니다.

  7. **링크 삽입**을 탭합니다.

  8. **연결 대상** 필드에 링크하려는 파일의 URL을 붙여넣습니다.

  9. **링크 삽입**을 탭합니다. 서식 있는 텍스트 편집기에서 링크된 텍스트는 파란색으로 표시되고 밑줄이 그어집니다.

서식 있는 텍스트 편집기로 이미지 삽입

서식 있는 텍스트 편집기를 사용하여 이미지를 삽입하는 세 가지 방법이 있습니다.

이미지 업로드

단계:

  1. 서식 있는 텍스트 편집기에서 **이미지 삽입** 버튼을 클릭합니다.

  2. **이미지 삽입** 대화 상자에서 **업로드된 이미지** 탭을 클릭합니다.

  3. **파일 업로드**를 클릭합니다.

  4. 컴퓨터에서 WebP, HEIC, SVG, GIF, JPEG 또는 PNG 이미지 파일을 선택합니다.

  5. 업로드한 이미지를 클릭하여 선택합니다.

  6. **사이즈** 메뉴에서 이미지의 표시 사이즈를 선택합니다. **원본**을 선택하여 표시 사이즈를 변경하지 않고 이미지를 삽입할 수 있습니다.

  7. **이미지 삽입**을 클릭하여 서식 있는 텍스트 편집기에 이미지를 배치합니다.

제품 이미지에서 선택

단계:

  1. 서식 있는 텍스트 편집기에서 **이미지 삽입** 버튼을 클릭합니다.

  2. **이미지 삽입** 대화 상자에서 **제품 이미지** 탭을 클릭합니다.

  3. 삽입하려는 이미지를 클릭합니다. 삽입하려는 제품 미디어를 찾을 수 없는 경우 화살표 버튼을 사용하여 다른 페이지를 찾아볼 수 있습니다.

  4. **사이즈** 메뉴에서 이미지의 표시 사이즈를 선택합니다. **원본**을 선택하여 표시 사이즈를 변경하지 않고 이미지를 삽입할 수 있습니다.

  1. **이미지 삽입**을 클릭하여 제품 이미지를 서식 있는 텍스트 편집기에 배치합니다.

이미지 URL 사용

공개 URL을 사용하여 이미지를 삽입하려면 다음을 수행합니다.

  1. 서식 있는 텍스트 편집기에서 **이미지 삽입** 버튼을 클릭합니다.
  2. **이미지 삽입** 대화 상자에서 **URL** 탭을 클릭합니다.
  3. 이미지 파일의 공개적으로 액세스 가능한 URL을 입력합니다.
  4. **이미지 삽입**을 클릭하여 원본 사이즈로 서식 있는 텍스트 편집기에 이미지를 삽입합니다.

서식 있는 텍스트 편집기에서 이미지 이동 및 크기 조정

제품 또는 컬렉션 설명, 웹 페이지, 블로그에 이미지를 추가한 후 콘텐츠 내 다른 위치로 이동할 수 있습니다.

단계:

  1. Shopify 관리자에서 이동하거나 크기를 조정하려는 이미지가 포함된 제품, 컬렉션, 웹 페이지 또는 블로그 게시물을 클릭합니다.
  2. 서식 있는 텍스트 편집기에서 이미지를 클릭합니다.
  3. 다음 중 하나를 수행합니다.
    • 이미지를 이동하려면 클릭하여 **콘텐츠** 필드의 다른 위치로 끌어다 놓습니다.
    • 이미지 크기를 조정하려면 모서리 중 하나를 클릭하여 끕니다.
  4. 저장을 클릭하십시오.

서식 있는 텍스트 편집기에서 이미지 편집

서식 있는 텍스트 편집기 내에서 이미지의 사이즈, 텍스트 줄 바꿈, 정렬을 변경할 수 있습니다. 이미지 URL을 편집하거나 이미지 대체 텍스트를 추가하거나 편집할 수도 있습니다.

단계:

  1. 서식 있는 텍스트 편집기에서 이미지를 두 번 클릭하여 **이미지 편집** 대화 상자를 엽니다.
  2. 사이즈 및 정렬 옵션을 사용하여 이미지를 편집합니다.
    • 이미지 사이즈를 변경하려면 사이즈 옵션을 선택합니다.
    • 온라인 스토어의 SEO 및 접근성을 개선하려면 이미지 대체 텍스트를 추가하거나 편집합니다.
    • 간격을 추가하려면 각 측면에 원하는 공간의 픽셀 수를 입력합니다.
    • 이미지 정렬을 변경하려면 왼쪽, 가운데 또는 오른쪽 정렬을 나타내는 아이콘에서 선택합니다.
    • **이미지 주위로 텍스트 줄 바꿈**을 선택하여 텍스트 줄 바꿈을 추가합니다.
  3. **이미지 편집**을 클릭하여 변경 사항을 저장합니다.

서식 있는 텍스트 편집기로 동영상 삽입

서식 있는 텍스트 편집기를 사용하여 블로그 게시물, 페이지, 제품 설명 및 컬렉션 설명에 동영상을 삽입하거나 포함할 수 있습니다.

생성한 동영상을 포함하려면 먼저 YouTube 또는 Vimeo와 같은 동영상 스트리밍 사이트에 업로드해야 합니다.

YouTube에서는 관련 동영상을 비활성화할 수 없지만, 방금 재생된 동영상과 동일한 채널의 관련 동영상을 표시하도록 지정할 수 있습니다.

단계:

  1. PC에서 ctrl + C를 누르거나 Mac에서 command + C를 눌러 동영상 URL을 복사합니다.
  1. Embed Responsively를 방문하십시오. Embed Responsively는 동영상에 사용할 개선된 임베드 코드를 제공하는 도구입니다.
  1. Embed Responsively에서 동영상이 있는 동영상 웹사이트를 클릭하여 선택하십시오.
  2. PC에서 ctrl + V 키를 누르거나 Mac에서 command + V 키를 눌러 복사한 동영상 URL을 Embed Responsively의 페이지 URL 상자에 붙여넣으십시오.
  3. 임베드를 클릭합니다. Embed Responsively가 임베드 코드를 생성해 줍니다.
  4. 동영상이 YouTube의 동영상이고 동일한 YouTube 채널의 관련 동영상만 표시하려는 경우, 임베드 코드에서 동영상 URL을 찾으십시오. 따옴표 안의 끝에 ?rel=0을 복사하여 붙여넣으십시오.
  5. 임베드 코드 상자 안의 모든 코드를 복사하십시오.
  6. Shopify 관리자에서 서식 있는 텍스트 편집기의 동영상 삽입 버튼을 클릭하십시오.
  7. 동영상 삽입 대화 상자의 상자에 임베드 코드를 붙여넣으십시오.
  8. 동영상 삽입을 클릭합니다.
  9. 작업을 마치면 저장을 클릭하여 편집 중이던 품목에 변경 사항을 저장합니다.

서식 있는 텍스트 편집기로 오디오 파일 삽입

서식 있는 텍스트 편집기를 사용하여 블로그 게시물, 페이지, 제품 설명, 컬렉션 설명에 오디오 파일을 삽입하거나 임베드할 수 있습니다.

단계:

  1. Shopify 관리자에서 **콘텐츠** > **파일**로 이동합니다.

  2. 파일 업로드를 클릭하여 스토어에 삽입하거나 임베드할 오디오 파일을 업로드합니다.

  3. 온라인 스토어 섹션에서 오디오 파일을 표시할 페이지 또는 블로그 게시물의 서식 있는 텍스트 편집기를 엽니다.

  4. <div id="player"><audio controls="controls">를 복사한 다음, 페이지에 오디오 플레이어를 임베드하도록 코드를 서식 있는 텍스트 편집기에 붙여넣습니다.

  5. 다음 코드를 복사하십시오.

  • <source src="https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3" type="audio/mpeg" /></div>
  1. 서식 있는 텍스트 편집기에서 오디오 플레이어 코드 뒤에 이 코드를 붙여넣은 다음, https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3를 Shopify에 업로드할 때 오디오 파일에 대해 생성한 URL로 바꾸십시오. 오디오 파일의 URL은 파일 페이지에서 언제든지 찾을 수 있습니다.
  2. 저장을 클릭하십시오.
  3. 보기를 클릭하여 오디오 파일이 올바르게 재생되는지 확인하십시오.

서식 있는 텍스트 편집기에서 내부 주석 추가 또는 제거

스토어에 게시하지 않으려는 내부 텍스트에는 주석 태그 <!-- 및 -->를 사용할 수 있습니다.

단계:

  1. 서식 있는 텍스트 편집기에서 HTML 표시 버튼을 클릭합니다.
  2. 내부 주석을 추가하려면 숨기려는 텍스트를 <!-- 및 -->로 묶습니다. 예: <!--yourtext-->.
  3. 저장을 클릭하십시오.

주석 태그 안에 포함된 HTML 태그는 내부 텍스트로 저장됩니다. 해당 HTML 태그가 제대로 작동하게 하려면 태그를 둘러싼 주석 태그 <!-- 및 -->를 제거해야 합니다.

서식 있는 텍스트 편집기 이해하기

서식 있는 텍스트 편집기는 타사 콘텐츠 전송 네트워크(CDN)인 TinyMCE와 통합되어 있습니다. 이 통합에는 몇 가지 중요한 의미가 있습니다.

  • 콘텐츠 제한: 서식 있는 텍스트 편집기에 입력하는 콘텐츠에는 64KB의 엄격한 제한이 있습니다. 이는 페이지, 블로그 게시물 및 추가 스크립트에 적용됩니다.
  • HTML 정리: TinyMCE는 스토어프론트 오작동 및 보안 위험을 방지하기 위해 HTML 서식을 자동으로 수정하는 콘텐츠 필터링 로직을 제공합니다. HTML을 수동으로 원래 형태로 다시 편집할 수는 있지만, 잠재적인 문제를 방지하려면 이러한 자동 변경 사항을 사용하는 것이 좋습니다.

서식 있는 텍스트 편집기 문제 해결

서식 있는 텍스트 편집기에 문제가 발생하는 경우 다음 문제 해결 단계와 일반적인 문제를 검토하십시오.

서식 문제 해결

복사된 콘텐츠의 서식 문제

텍스트는 항상 원래 텍스트가 있던 편집기나 웹 페이지의 서식을 상속합니다. Microsoft Word에서 콘텐츠를 작성한 다음 서식 있는 텍스트 편집기에 복사하여 붙여넣으면 <div> 태그를 포함하여 동일한 색상, 크기, 들여쓰기, 간격이 유지됩니다.

가능하면 서식 있는 텍스트 편집기에서 직접 콘텐츠를 편집하고 서식을 지정하십시오.

더 복잡한 페이지 레이아웃의 경우 Shogun Drag & Drop Page Builder와 같은 페이지 빌더 앱 사용을 고려해 보십시오.

서식 문제 식별

서식 있는 텍스트 편집기에서 발생하는 가장 일반적인 문제의 원인은 다른 소스에서 콘텐츠를 복사하여 붙여넣을 때 함께 전달되는 임베드된 스타일 또는 서식입니다.

이는 여러 가지 방식으로 나타날 수 있지만, 일반적으로 Shopify 관리자에 표시되는 내용과 라이브 스토어에 표시되는 내용 간에 불일치가 있을 때 주로 발생합니다. 여기에는 정보가 업데이트되지 않거나 스타일이 다르게 표시되는 경우가 포함됩니다.

서식 문제 해결

서식 문제가 원인인지 테스트하는 방법에는 서식 지우기 버튼을 사용하거나 서식 있는 텍스트 편집기 콘텐츠를 HTML 스트리퍼로 실행하는 두 가지가 있습니다.

테스트하려면 문제가 있는 제품 또는 페이지의 사본을 만든 다음, 사본에 대해 다음 테스트 중 하나를 수행하십시오.

테스트 1: 서식 지우기

  1. 서식 있는 텍스트 편집기에서 모든 콘텐츠를 강조 표시합니다.
  2. 서식 지우기 버튼을 클릭합니다.
  3. 저장을 클릭하고 테스트합니다.

테스트 2: HTML 스트리퍼

  1. 서식 있는 텍스트 편집기에서 모든 콘텐츠를 복사합니다.
  2. striphtml.com과 같은 HTML 스트리퍼에 붙여넣습니다.
  3. 제거된 모든 콘텐츠를 복사합니다.
  4. 원래 콘텐츠를 바꾸면서 서식 있는 텍스트 편집기에 다시 붙여넣습니다.
  5. 저장을 클릭하고 테스트합니다.

이러한 단계 중 하나를 수행하여 문제가 해결되면, 해당 문제는 원래 콘텐츠를 서식 있는 텍스트 편집기에 추가할 때 전달된 서식으로 인해 발생한 것입니다. 동일한 방법을 사용하여 원래 콘텐츠를 수정할 수 있습니다.

정렬되지 않은 이미지 코드 문제 해결

줄 바꿈 옵션을 사용하여 이미지 옆에 텍스트를 올바르게 정렬하는 데 문제가 있는 경우 이미지 태그가 단락 중간이 아닌 시작 부분에 표시되도록 코드를 이동해야 할 수 있습니다.

  1. 서식 있는 텍스트 편집기에서 코드 편집 버튼을 클릭하십시오.
  2. 이미지 코드를 찾아 전체 <img> 태그를 <p> 단락 태그 밖의 단락 상단으로 이동하십시오.
  3. 이미지 아래의 후속 단락에 있는 모든 <span> 태그를 제거하십시오.
  4. 저장을 클릭하십시오.

잘못 정렬된 이미지 코드 예시:

<p style="float: left;"><br/><img alt="" src="your image link" style="float: left; margin-right: 20px;">This 22x34 special purchase frame...</p>

수정된 코드:

<img alt="" src="your image link" style="margin-right: 20px; float: left;">
<p>This 22x34 special purchase frame...</p>
작동하지 않는 mailto 링크 문제 해결

mailto: 링크가 작동하지 않는 경우(빈 페이지로 로드되거나 메일이 열리지 않음) 링크가 다음 구조를 따르는지 확인하십시오.

mailto:email@example.com

위 형식과 일치하지만 여전히 예상대로 작동하지 않는 경우 브라우저 또는 이메일 클라이언트 설정 문제일 수 있습니다. 브라우저 및 이메일 클라이언트의 설정을 확인하여 mailto: 링크를 올바르게 처리하도록 구성되었는지 확인하십시오.

크기 조정 후 페이지 이미지가 원래 사이즈로 돌아가는 문제 해결

페이지에 이미지를 삽입하면 생성되는 HTML에는 src 매개 변수와 data-mce-src 매개 변수가 모두 포함됩니다. 이 두 매개 변수가 일치하지 않으면 결국 src가 data-mce-src와 일치하도록 업데이트됩니다.

하지만 서식 있는 텍스트 편집기를 사용하여 이미지 크기를 조정하면 src만 업데이트되고 data-mce-src는 원래 사이즈의 URL로 남게 됩니다. 몇 번 더 클릭하면 src가 data-mce-src URL로 되돌아갑니다.

이를 방지하려면 data-mce-src URL을 원하는 이미지 사이즈에 맞게 수동으로 업데이트하십시오.

  1. 서식 있는 텍스트 편집기에서 코드 편집 버튼을 클릭하십시오.
  2. 크기를 조정한 이미지 태그를 찾으십시오.
  3. src 및 data-mce-src 매개 변수를 모두 찾으십시오.
  4. data-mce-src URL을 src URL과 일치하도록 업데이트하십시오.
  5. 저장을 클릭하십시오.
자동 HTML 변경(삭제/정리) 문제 해결

서식 있는 텍스트 편집기에서 변경 작업을 수행하면 해당 HTML이 자동으로 변경되는 것을 확인할 수 있습니다.

이런 현상은 왜 발생하나요?

Shopify의 서식 있는 텍스트 편집기는 타사 콘텐츠 전송 네트워크(CDN)인 TinyMCE와 통합되어 있습니다. 이 CDN은 스토어프론트에서 오작동하거나 보안 위험에 노출시킬 수 있는 HTML 줄의 서식을 자동으로 수정하는 광범위하고 신뢰할 수 있는 콘텐츠 필터링 논리 집합을 제공합니다. 이 프로세스를 HTML 삭제(정리)라고 합니다.

어떻게 해야 하나요?

HTML을 이전 상태로 수동 편집하여 콘텐츠 필터링 논리를 해결할 수는 있지만, 자동화된 변경 사항을 따르는 것이 좋습니다. 이러한 자동 수정은 예상된 동작이며 스토어프론트에 문제를 일으킬 수 있는 변경을 방지하는 중요한 목적을 수행합니다.

CDN이 수정하려는 HTML을 작성하여 특정 목표를 달성하려는 경우, 예상되는 HTML 서식을 지원하도록 테마 코드를 변경하는 등 해당 목표를 달성할 수 있는 더 이상적인 방법이 있는지 고려해 보십시오.

고객이 선택한 마켓에서 벗어나도록 연결되는 링크 문제 해결

하위 폴더 및 Geolocation 앱과 함께 Shopify Markets를 사용하는 경우 제품 설명, 블로그 게시물, 페이지 및 컬렉션 설명의 링크가 고객을 선택한 지역에 머무르도록 하는 대신 기본 도메인으로 리디렉션할 수 있습니다.

이런 현상은 왜 발생하나요?

서식 있는 텍스트 편집기는 직접 링크(전체 URL)와 내부 링크(짧은 URL)를 모두 지원합니다. 전체 URL을 포함하는 직접 링크(예: https://yourstore.com/collections/summer)를 사용하는 경우 고객은 선택한 마켓을 무시하고 해당 특정 URL로 이동합니다.

해결 방법

링크가 지역을 인식하고 고객이 선택한 마켓에 계속 머물도록 하려면 전체 URL 대신 /로 시작하는 내부 링크를 사용하십시오.

  • 직접 링크(지역 인식 안 됨): https://yourstore.com/collections/summer
  • 내부 링크(지역 인식): /collections/summer

기존 링크를 업데이트하려면:

  1. Shopify 관리자에서 링크를 업데이트하려는 제품, 컬렉션, 페이지 또는 블로그 게시물로 이동하십시오.
  2. 서식 있는 텍스트 편집기에서 코드 편집 버튼을 클릭하여 HTML을 확인하십시오.
  3. https://로 시작하고 스토어 도메인이 포함된 링크를 찾으십시오.
  4. 전체 URL을 짧은 URL 형식으로 바꾸십시오. 예를 들어 https://yourstore.com/pages/about를 /pages/about로 변경하십시오.
  5. 저장을 클릭하십시오.

업데이트할 제품, 컬렉션, 블로그 또는 페이지가 많은 경우 CSV 파일로 내보내기를 수행하고, 도메인 또는 http를 검색하여 직접 링크를 식별한 후 내부 링크로 업데이트하고, 업데이트된 CSV 파일을 스토어로 다시 가져올 수 있습니다.