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

주의

테마 스토어에서는 빈티지 테마를 사용할 수 없습니다. 빈티지 테마에는 Shopify Online Store 2.0 테마에 포함된 기능이 없으며, Shopify 무료 빈티지 테마는 보안 수정을 제외한 업데이트가 제공되지 않습니다.

참고 사항

Shopify 무료 테마를 사용하는 경우 Shopify 지원팀에 문의하여 이 튜토리얼에 대한 도움을 받을 수 있습니다. 디자인에는 15분이 소요됩니다. Shopify 디자인 정책에 대해 자세히 알아보세요.

참고 사항

이 사용자 지정은 빈티지 Shopify 테마용으로, Online Store 2.0 테마에는 적용되지 않습니다.

• 테마의 아키텍처 버전 알아보기
• Online Store 2.0 테마 사용자 지정 살펴보기

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

맨 위로 코드 조각 생성

데스크톱

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
3. 코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.
4. 코드 조각 back-to-the-top의 이름을 지정하고 코드 조각 생성을 클릭합니다. 코드 조각 파일이 코드 편집기에서 열립니다.
5. 새로 생성된 back-to-the-top 파일로 다음 코드를 붙여넣습니다.

{% comment %}
  Reduce below value if you need the back to the top button to appear higher up on the page.
  That value is in pixels.
{% endcomment %}
{% assign vertical_offset_for_trigger = 300 %}

{% comment %}
  Vertical offset from bottom of browser for the position of the button.
{% endcomment %}
{% assign position_from_bottom = '6em' %}

<a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide">
  <span>Back to the top</span> <i class="fa fa-arrow-circle-o-up fa-2x"></i>
</a>
{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
<style>
  .back-to-top {
    position: fixed;
    bottom: {{ position_from_bottom }};
    right: 0px;
    text-decoration: none;
    color: #999;
    background-color: #eee;
    font-size: 16px;
    padding: 0.3em;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    z-index: 60000;
  }
  .back-to-top i {
    vertical-align: middle;
  }
  .back-to-top span {
    padding-left: 0.5em;
  }
  .back-to-top i + span {
    padding-left: 0;
  }
  .back-to-top:hover {
    text-decoration: none;
    color: #555;
  }
  .hide {
    display: none!important;
  }
</style>
<script>
    (function() {
    function trackScroll() {
        var scrolled = window.pageYOffset;
        var coords = {{ vertical_offset_for_trigger }};

        if (scrolled > coords) {
        goTopBtn.classList.remove('hide');
        }
        if (scrolled < coords) {
        goTopBtn.classList.add('hide');
        }
    }

    function backToTop() {
        if (window.pageYOffset > 0) {
        window.scrollBy(0, -80);
        setTimeout(backToTop, 0);
        }
    }

    var goTopBtn = document.querySelector('.back-to-top');

    window.addEventListener('scroll', trackScroll);
    goTopBtn.addEventListener('click', backToTop);
    })();
</script>

1. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.
6. 코드 조각 back-to-the-top의 이름을 지정하고 코드 조각 생성을 클릭합니다. 코드 조각 파일이 코드 편집기에서 열립니다.
7. 새로 생성된 back-to-the-top 파일로 다음 코드를 붙여넣습니다.

{% comment %}
  Reduce below value if you need the back to the top button to appear higher up on the page.
  That value is in pixels.
{% endcomment %}
{% assign vertical_offset_for_trigger = 300 %}

{% comment %}
  Vertical offset from bottom of browser for the position of the button.
{% endcomment %}
{% assign position_from_bottom = '6em' %}

<a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide">
  <span>Back to the top</span> <i class="fa fa-arrow-circle-o-up fa-2x"></i>
</a>
{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
<style>
  .back-to-top {
    position: fixed;
    bottom: {{ position_from_bottom }};
    right: 0px;
    text-decoration: none;
    color: #999;
    background-color: #eee;
    font-size: 16px;
    padding: 0.3em;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    z-index: 60000;
  }
  .back-to-top i {
    vertical-align: middle;
  }
  .back-to-top span {
    padding-left: 0.5em;
  }
  .back-to-top i + span {
    padding-left: 0;
  }
  .back-to-top:hover {
    text-decoration: none;
    color: #555;
  }
  .hide {
    display: none!important;
  }
</style>
<script>
    (function() {
    function trackScroll() {
        var scrolled = window.pageYOffset;
        var coords = {{ vertical_offset_for_trigger }};

        if (scrolled > coords) {
        goTopBtn.classList.remove('hide');
        }
        if (scrolled < coords) {
        goTopBtn.classList.add('hide');
        }
    }

    function backToTop() {
        if (window.pageYOffset > 0) {
        window.scrollBy(0, -80);
        setTimeout(backToTop, 0);
        }
    }

    var goTopBtn = document.querySelector('.back-to-top');

    window.addEventListener('scroll', trackScroll);
    goTopBtn.addEventListener('click', backToTop);
    })();
</script>

1. 저장을 클릭합니다.

Android

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.
6. 코드 조각 back-to-the-top의 이름을 지정하고 코드 조각 생성을 클릭합니다. 코드 조각 파일이 코드 편집기에서 열립니다.
7. 새로 생성된 back-to-the-top 파일로 다음 코드를 붙여넣습니다.

{% comment %}
  Reduce below value if you need the back to the top button to appear higher up on the page.
  That value is in pixels.
{% endcomment %}
{% assign vertical_offset_for_trigger = 300 %}

{% comment %}
  Vertical offset from bottom of browser for the position of the button.
{% endcomment %}
{% assign position_from_bottom = '6em' %}

<a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide">
  <span>Back to the top</span> <i class="fa fa-arrow-circle-o-up fa-2x"></i>
</a>
{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
<style>
  .back-to-top {
    position: fixed;
    bottom: {{ position_from_bottom }};
    right: 0px;
    text-decoration: none;
    color: #999;
    background-color: #eee;
    font-size: 16px;
    padding: 0.3em;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    z-index: 60000;
  }
  .back-to-top i {
    vertical-align: middle;
  }
  .back-to-top span {
    padding-left: 0.5em;
  }
  .back-to-top i + span {
    padding-left: 0;
  }
  .back-to-top:hover {
    text-decoration: none;
    color: #555;
  }
  .hide {
    display: none!important;
  }
</style>
<script>
    (function() {
    function trackScroll() {
        var scrolled = window.pageYOffset;
        var coords = {{ vertical_offset_for_trigger }};

        if (scrolled > coords) {
        goTopBtn.classList.remove('hide');
        }
        if (scrolled < coords) {
        goTopBtn.classList.add('hide');
        }
    }

    function backToTop() {
        if (window.pageYOffset > 0) {
        window.scrollBy(0, -80);
        setTimeout(backToTop, 0);
        }
    }

    var goTopBtn = document.querySelector('.back-to-top');

    window.addEventListener('scroll', trackScroll);
    goTopBtn.addEventListener('click', backToTop);
    })();
</script>

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 %}

팁

vertical_offset_for_trigger 값은 단위 없이 설정되어야 하며 픽셀 값이어야 합니다.

데모 스토어

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