콘텐츠에 서식 있는 텍스트 편집기 사용

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

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

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

• 제품 설명
• 컬렉션 설명
• 블로그 게시물
• 페이지
• 스토어 정책

Online Store 2.0 테마를 사용 중인 경우,테마 편집기를 사용해 페이지나 템플릿에서식있는 텍스트 섹션을 추가할 수 있습니다.

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

서식있는텍스트편집기를사용하여블로그게시물,페이지,제품설명및컬렉션설명에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. 저장을 클릭합니다.

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

서식버튼을 사용하면 단락, 제목 또는 인용문을 빠르게 생성할 수 있습니다. 적합한 서식과 제목 수준을 사용하면 사람들이 스토어 웹사이트 콘텐츠를 읽는 데 도움이 되며 검색 엔진에서도 쉽게 인식할 수 있습니다.

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

서식 옵션

• 단락

• 제목(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을연결 대상필드에 입력합니다.

4. 해당 링크에 대한 짧은 설명을링크 제목상자에 입력합니다.

5. 이 링크를 열 위치메뉴에서 링크를 여는 방식을 선택합니다.

6. 링크 삽입을 클릭하여 강조 표시한 텍스트를 링크로 전환합니다.

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

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

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

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

페이지 콘텐츠 내 파일로 연결

파일을 업로드하면 제품 또는 컬렉션 설명, 웹페이지, 블로그 게시물에서 다운로드할 수 있도록 서식 있는 텍스트 편집기에서 해당 파일을 콘텐츠로 연결할 수 있습니다.

단계:

1. 연결하려는 파일의 URL을 복사합니다.

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

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

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

5. 링크 삽입을 클릭합니다.

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

1. 링크 삽입을 클릭합니다. 서식 있는 텍스트 편집기에서 링크가 삽입된 텍스트는 밑줄이 추가된 파란색 텍스트로 표시됩니다.

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

다음과 같은 세 가지 방법으로 서식 있는 텍스트 편집기에서 이미지를 삽입할 수 있습니다. 이미지를 삽입하려면:

• 이미지 업로드
• 제품 이미지에서 선택
• 공개 이미지 URL 사용

이미지 업로드

단계:

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

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

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

4. 컴퓨터에서 JPEG 또는 PNG 형식 이미지 파일을 선택합니다.

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

6. 삽입 크기메뉴에서 이미지 표시 크기를 선택합니다.원본을 선택하면 표시 크기 변경 없이 이미지를 삽입할 수 있습니다.

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

제품 이미지에서 선택

단계:

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

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

3. 삽입할 이미지를 클릭합니다.

4. 삽입 크기메뉴에서 이미지 표시 크기를 선택합니다.원본을 선택하면 표시 크기 변경 없이 이미지를 삽입할 수 있습니다.

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

이미지 URL 사용

공개 URL을 사용하여 이미지를 삽입하려면:

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

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

3. 공개적으로 액세스할 수 있는 이미지 파일의 URL을 입력합니다.

4. 이미지 삽입을 클릭하여 이미지를 서식 있는 텍스트 편집기에 원본 크기로 삽입합니다.

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

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

단계:

1. Shopify 관리자에서 이동 또는 크기 조정할 이미지를 포함한 제품, 컬렉션, 웹 페이지 또는 블로그 게시물을 클릭합니다.

2. 서식 있는 텍스트 편집기에서 이미지를 클릭합니다.

3. 다음 중 하나를 수행합니다.

4. 저장을 클릭합니다.

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

서식 있는 텍스트 편집기에서 이미지의 크기, 텍스트 배치 및 정렬을 변경할 수 있습니다. 이미지 URL을 편집하거나 이미지 대체 텍스트를 추가 또는 편집할 수도 있습니다.

단계:

1. 서식 있는 텍스트 편집기에서 이미지를 두 번 클릭하여이미지 편집대화 상자를 엽니다.

2. 크기 및 정렬 옵션을 사용하여 다음과 같이 이미지를 편집할 수 있습니다.

   • 이미지 크기를 변경하려면 크기 옵션을 선택합니다.
   • 새 이미지 URL로 변경합니다.
   • 온라인 스토어의 SEO 및 접근성을 개선하려면 이미지 대체 텍스트를 추가하거나 편집합니다.
   • 간격을 추가하려면 각 면에 추가할 간격의 픽셀 값을 입력합니다.
   • 이미지 정렬을 변경하려면 왼쪽, 가운데, 오른쪽 정렬을 나타내는 아이콘 중 선택합니다.
   • 텍스트 배치를 추가하려면텍스트로 이미지 둘러싸기에 확인 표시합니다.

3. 이미지 편집을클릭하여변경사항을저장합니다。

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

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

생성한 동영상을 임베드하려면 우선YouTube또는Vimeo같은 동영상 스트리밍 사이트에 해당 동영상을 업로드해야 합니다.

YouTube에서 스토어 관련 동영상을 사용하지 못하게 설정할 수는 없지만, 방금 재생한 동영상과 동일한 채널에서 전송하도록 지정할 수 있습니다.

단계:

1. PC의 경우ctrl+C를, Mac의 경우command+C를 눌러 동영상의 URL을 복사합니다.

2. 응답형 임베드로 이동합니다. 응답형 임베드는 동영상에 대해 개선된 임베드 코드를 제공하는 툴입니다.

3. 응답형 임베드에서 동영상이 있는 동영상 웹사이트를 클릭하여 선택합니다.

4. PC의 경우ctrl+V를, Mac의 경우command+V를 눌러 응답형 임베드의페이지 URL상자에 동영상의 URL을 붙여넣습니다.

5. 임베드를 클릭합니다. 응답형 임베드에서 임베드 코드가 생성됩니다.

6. YouTube에서 동영상을 사용하고 같은 YouTube 채널 내 관련 동영상만 표시하려면 임베드 코드에서 해당 동영상의 URL을 찾습니다. 인용 부호의 끝에?rel=0을 복사하여 붙여넣습니다.

7. 임베드 코드상자 내 모든 코드를 복사합니다.

8. Shopify 관리자에서 서식 있는 텍스트 편집기의동영상 삽입버튼을 클릭합니다.

9. 동영상 삽입대화 상자 내 상자에 임베드 코드를붙여넣습니다.

10. 동영상 삽입을 클릭합니다.

11. 작업을 마치면저장을 클릭하여 편집 중인 항목에 대한 변경 사항을 저장합니다.

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

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

단계:

1. Shopify 관리자에서설정을 클릭한 다음파일을 클릭합니다.

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

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

4. 를 복사한 다음 서식 있는 텍스트 편집기에 해당 코드를 붙여넣어 페이지에 오디오 플레이어를 임베드합니다.

5. 다음 코드를 복사합니다.

6. 저장을 클릭합니다.

7. 보기를 클릭하여 오디오가 올바르게 재생되는지 확인합니다.

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

주석 태그를 스토어에 게시하지 않을 내부 텍스트에 사용할 수 있습니다.

단계:

1. 서식 있는 텍스트 편집기에서HTML 표시버튼을 클릭합니다.

2. 내부주석을추가하려면숨길텍스트를사이에 배치합니다(예:).

3. 저장을 클릭합니다.

주석 태그 사이에 배치된 HTML 태그는 내부 텍스트로 저장됩니다. HTML 태그가 올바르게 작동하려면 해당 태그를 둘러싼주석 태그를 제거해야 합니다.