쇼피파이는 컬렉션마다 대표 이미지를 입력할 수 있습니다.
이 대표 이미지는 보통 컬렉션 목록 페이지나 메인 페이지의 컬렉션 목록 섹션의 썸네일로 사용이 됩니다.
가끔씩 컬렉션 페이지 상단 타이틀 영역에 이 이미지가 노출될 수 있도록 커스텀 작업을 요청해 주시는 분들이 있습니다.
이런 경우 페이지 상단 타이틀 영역 이미지 노출을 지원하는 테마를 선택해서 이용할 수도 있고,
그렇지 않은 테마인 경우 컬렉션 템플릿 파일에 몇 줄의 코드만 넣어주면 됩니다.
컬렉션 마다 다른 이미지가 나오면, 좀더 디자인 요소를 더할 수 있습니다.
작업은 보통 코드 편집기에서 collection-template.liquid 파일을 수정해 주면 됩니다.
컬렉션 객체의 image 를 넣어주면 됩니다.
https://shopify.dev/docs/themes/liquid/reference/objects/collection
{% if collection.image %}{{ collection.image | img_url: ‘medium’ }}{% endif %}
img_url 필터를 이용해서 이미지 사이즈를 조정할 수가 있는데, 원본은 ‘medium’ 대신 ‘master’ 를 입력해주면됩니다.
사이즈 조정, 크롭, 스케일, 포맷 조정은 다음 링크를 참고하면 됩니다.
https://shopify.dev/docs/themes/liquid/reference/filters/url-filters#img_url
