긴 페이지에서 맨 위로 버튼 추가

페이지가 길고 스크롤을 많이 해야 하는 경우 테마에 맨 위로 버튼을 추가할 수 있습니다.

맨 위로 예

맨 위로 코드 조각 생성

  1. 코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.

  2. 코드 조각 back-to-the-top의 이름을 지정하고 코드 조각 생성을 클릭합니다. 코드 조각 파일이 코드 편집기에서 열립니다.

  3. 새로 생성된 back-to-the-top 파일로 다음 코드를 붙여넣습니다.

    ```html {% comment %} 페이지에서 맨 위로 버튼이 더 높게 나타나도록 하려면 아래 값을 줄이십시오. 이 값은 픽셀 단위입니다. {% endcomment %} {% assign vertical_offset_for_trigger = 300 %}

    {% comment %} 버튼 위치에 대한 브라우저 하단의 수직 상쇄입니다. {% endcomment %} {% assign position_from_bottom = '6em' %}

    맨 위로 {{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}```

    1. 저장을 클릭합니다.

    코드 조각 포함

    1. 레이아웃 폴더에서 theme.liquid 파일을 엽니다.

    2. 파일 맨 아래로 스크롤합니다. 닫는 </body> 태그 바로 위쪽에 이 코드를 붙여넣습니다.

    {% render 'back-to-the-top' %}

    코드는 다음과 같이 보여야 합니다.

    맨 위로 코드 조각 포함
    ]

    1. 저장을 클릭합니다.

    맨 위로 버튼 구성(선택 사항)

    맨 위로 버튼을 사용자 지정하려면 여기를 클릭하고 코드 조각의 첫 행을 확인합니다.

    • 브라우저 하단을 기준으로 버튼 위치를 변경하려면 position_from_bottom 값을 편집합니다.
    {% assign position_from_bottom = '4em' %}
    • 버튼이 표시되기 전에 고객이 스크롤해야 하는 범위를 변경하려면 vertical_offset_for_trigger 값을 편집합니다.
    {% assign vertical_offset_for_trigger = 300 %}

    데모 스토어

    데모 스토어를 방문하여 이러한 사용자 지정의 예를 확인할 수 있습니다.

Shopify와 함께 사업을 시작할 준비가 되셨습니까?

무료 체험