브루클린 테마 shopify

Question

저는 현재 Shopify에 가입 중이며 "Brooklyn"테마를 사용하고 있습니다. 필자는 기본적으로 제품 페이지에 나타나는 이미지를 슬라이드 쇼 형식으로 표시하는 대신 모든 이미지가 지루할 수 있음을 알기 위해 아래로 스크롤 한 후에 이미지를 슬라이드 쇼 형식으로 표시하려고합니다. 누구든지 저에게 손을 줄 수있는이 주제에 대한 경험이 있습니까? 대단히 감사하겠습니다.

Answer 1

달성하려는 목표는이 링크의 "도움이되는 인간"의 대답에 설명되어 있습니다. https://ecommerce.shopify.com/c/ecommerce-design/t/change-product-photos-to-thumbnails-under-main-image-in-brooklyn-theme-272292

제품을 수정하기 위해 브루클린 테마를 수정했습니다. 특정 수정이 이루어져야합니다.

1. 상점 관리자로부터 클래식 테마를 설치 (게시하지 않음).
2. 클래식 테마 드롭 다운 메뉴에서 테마> HTML 편집을 클릭하십시오.
3. 자산 폴더를 열고 timber.js.liquid 파일을 클릭하십시오.
4. 별도의 탭에서 브루클린 테마의 HTML/CSS를 엽니 다. (시도하기 전에 백업 해 두십시오.) 브루클린 테마의 'theme.js.liquid'파일을 편집하십시오.
5. 클래스 테마 timber.js에서 timber.productImageSwitch() 코드가있는 행을 볼 수 있습니다. init 함수에서. 이것이 우리가 필요로하는 기능입니다. 이 줄을 복사하여 theme.js 파일의 동일한 timber.init 함수에 붙여 넣으십시오.
6. 또한 파일 아래에있는 실제 기능 코드를 복사해야합니다 (175-270 행). 올바른 코드를 가져 오려면 productImageSwitch 페이지 (cmd + F)를 검색하면 관련 기능과 switchImage 기능이 표시됩니다. 이 두 함수를 모두 theme.js에 복사하여 지나치십시오. theme.js 파일 (브루클린 테마)에서 이제
, Shopify.Image.switchImage(newImg, el, timber.switchImage);
1. JS의 마지막 부분은 정액과 함께이 라인을 교체 라인

   Shopify.Image.switchImage(newImg, el, theme.showVariantImage);

을 찾을 수 복사하려는 제품은 timber.cache의 Product Page 주석 아래에 23 번과 27 번 라인 주위에 있습니다. 아래의 두 줄을 timber.js (클래식)에서 theme.js (브루클린)로 복사하십시오. $productImageWrap: $('#ProductPhoto'), $thumbImages: $('#ProductThumbs').find('a.product-single__thumbnail'), 참고 : 뒤에 오는 쉼표를 유의하십시오.

8. 마지막으로 미리보기 이미지와 관련된 product.liquid 템플릿에서 마크 업을 복사하려고합니다. 이것은 "{% if product.images.size> 1 %}"및 관련 "{% endif %}"문으로 시작됩니다.
9. 그게 전부입니다. 원하는 마크 업 스타일을 지정할 수 있지만 이미지를 클릭하면 페이지를 새로 고치지 않고도 추천 이미지를 바꿔야합니다. 작동하지 않으면 브라우저의 콘솔에서 오류를 확인하십시오. 코드 복사 및 붙여 넣기 기능을 사용하면 전체 기능을 손상시킬 수있는 필수 쉼표 또는 종료 태그를 놓칠 수 있습니다. 이를 위해서는 세심한주의가 필요합니다.

추가 도움이 필요하면 도움을받을 수있는 상점에 대한 링크를 제공하십시오.