Shopify 테마의 특정 부분에 CSS를 로드하는 방법은 무엇입니까?

Question

다른 섹션을 만들고 자산 폴더에서 CSS를 적용하려고 합니다. 하지만 CSS를 적용하려는 페이지에 {{ 'style-section-block.css' | asset url | stylesheet_tag }} 그래도 바꾸고 싶은 부분만 넣었어요.

페이지의 일부를 편집하고 싶습니다

Answer 1

특정 섹션에 CSS를 적용하려면 먼저 스타일을 지정하려는 섹션에 고유한 클래스나 ID를 추가하세요. CSS 파일에서 이 고유 클래스 또는 ID를 사용한 후 섹션 스타일을 지정할 수 있습니다. 예시는

으아악

"my-section"은 섹션의 고유한 클래스 이름입니다. 클래스 이름을 사용하여 섹션에 스타일을 추가할 수 있습니다.

으아악

Shopify 테마를 기반으로 합니다. 현재 페이지 핸들이나 페이지 템플릿을 기반으로 CSS 파일을 조건부로 사용할 수 있습니다. 내 생각에 따르면 테마의 "레이아웃" 파일에서 이 "템플릿" 또는 "page.handle" 변수를 사용할 수 있습니다. "theme.liquid" 파일을 의미합니다. "레이아웃" 파일의 "헤드" 섹션에 다음 코드를 추가할 수 있습니다.

으아악

"특정 템플릿"을 템플릿 이름으로 바꾸거나 "특정 페이지 핸들"을 페이지 핸들 이름으로 바꾸세요. 그리고 다른 섹션에서 CSS 링크를 제거하세요.