"page.sample.liquid" 파일을 열어봅시다.

다음에 적혀있는 코드를 복사하면서 페이지 구성을 하면 좋을것 같습니다.

중요한것은!!!!!!!!!!!! liquid의 assign으로 정의된 값을 sinpet으로 넘기는데, 같은 블럭을 두개 사용하게 되면 값이 중복될 수 있습니다.

IMAGE는!!!!!!!!!!! 좌측 하단 Settings > Files에 업로드해야 합니다. assets 폴더가 아님.

이미지는 자동 리사이즈이니 업로드한 파일명만 적으면 됩니다.

image => 데스크탑. 1400px 추천

mobile_image => 모바일. 800px 추천


전체적인 디자인/레이아웃은 render하는 snipet에서 일괄 수정하면 되니 별다른 스타일 지정은 필요 없습니다.








Video

그냥 영상만



모달에서 플레이

"videoButton" class로 센터 버튼 표시. "data-target"에 설정된 id와 동일한 팝업창이 뜸. id이니 theme-video-modal.liquid에 지정되는 id도 페이지당 하나만 호출해야됨.

liquid snipet은 페이지 제일 아래에 배치.

배너 이미지

'이미지 + 텍스트 타입'





'이미지 + 버튼' 타입





Caroucsel type - 개별 제품 지정

제품 리스트에는 handle을 넣어야 합니다.





제품 2개 이하, 타이틀 없는 샘플

제품 2개 이하, 타이틀 없는 샘플

TITLE!!!!!

Grid type - 개별 제품 지정

개별제품 지정으로 카로셀이 아닌 그리드 표시 템플릿입니다. 상황에따라 사용하면 좋을듯.

중간에 커스텀 타일 삽입 버전

타이틀

Grid type - 콜렉션 지정

콜렉션 지정하여 그리드 표시 템플릿입니다.

변수 지정이 조금 다르니 주의해야 합니다.

단일 제품 호출 - 핸들명으로 지정

개별 아이템 하나하나 불러오는 일이 있을거 같아 만듭니다.

제품 하나의 타일? 은 폭이 지정되어있지 않으니 반드시!!!!!!!! grid와 조합해서 사용합니다.

몇가지 패턴을 만들어 놓았으니 필요에따라 커스터마이징 하면 됩니다.

일반 버전

버튼 버전

버튼 버전

그리드 조합 버전

그리드 조합 버전

그리드 조합 버전

order 이미지, 텍스트 + 버튼 레이아웃

당신만의 디지털 캐릭터를 만들고 미스 디올의 세계에 빠져들어 보세요. 미스 디올이 탄생한 1947년 이후 지금의 그라스 꽃밭을 아우르는 여행이 시작됩니다. 아름다운 자연과 황홀한 꾸뛰르가 현실이 되는 마법과도 같은 순간을 확인해보세요.