쇼피파이_1

예시 사이트 (https://lactomedi.com/)

• https://lactomedi.com/ 링크 뒤에 admin을 붙이면 쇼피파이 관리자 페이지로 이동
• header 가장 우측의 버튼 클릭 후, 아래의 Switch 클릭
• 새 창에서 해당 해외 브랜드 프로필 클릭
• snb의 Online Store 클릭
• 테마 항목에서 Custom 옆의 ••• 항목 클릭 후, Edit code 누르면 코드 확인 가능
  (liquid는 html이라 이해하면 편함)
• 코드에서 {% schema %} 로 표기된 구역을 찾고, 속성에서 settings 배열을 이용하여 이미지, 영상을 구분할 수 있다.
• 새로운 페이지를 작업할 때는 settings 속성 하단에 prests속성을 추가해주어야 한다.

"presets": [
	{
		"name": "main_visual",
		"category": "Hura",
		"settings": {
			}
		}
	]

• 다시 돌아가서 settings의 상단에는 name속성이 있는데 이 곳에는 이 페이지를 나타낼만한 임의의 이름을 지정해준다.
• settings에서는 type, id, label이 있는데 type에는 'text'라 적어주고, id로는 해당 타입을 나타낼수 있는 id값을 넣어주는데. 이것 또한 기존 이름과 중복되지 않고, 구분할 수 있도록 id값을 지정해준다. label은 id값과 동일하게 해주어도 문제는 없는 듯 하다.
• 각 이미지와 영상에 id값을 지정해 준 후에는, 위의 html의 각각 해당하는 태그 뒤에
  셋팅값을 넣어주면 된다.
  아래와 같이 {{ 경로 }} , 2개의 괄호 안에 경로를 입력해주면 된다.

**{{ section.settings.video_id }}** 

• liquid 작성 완료 후. 이전 페이지로 돌아가 Custiom 버튼 클릭 시 해당 CSS 확인 가능
• snb에서 해당하는 구역을 찾는다. Header와 Footer는 동일하지만, Body부분은 Template라는 다른 용어로 지칭된다.
• 해당 구역의 하단에 Add section을 선택 후 8번에서 설정한 name의 이름을 검색해주면 사이트가 화면에 노출된다.
• liquid에서 경로를 넣어준 태그를 클릭하게 되면 그 경로에 연결된 id값이 노출된다.
• 그 노출된 값에 텍스트를 적게 되면 페이지에서 그 텍스트가 추가로 입력된다.

🔗쇼피파이(Shopify)의 마법: Liquid 템플릿 언어