로그인
무료 체험 시작

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

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

맨 위로 예

이 페이지의 정보

맨 위로 코드 조각 생성

데스크톱
  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 &#x3E; coords) {
    goTopBtn.classList.remove(&#x27;hide&#x27;);
    }
    if (scrolled &#x3C; coords) {
    goTopBtn.classList.add(&#x27;hide&#x27;);
    }
}

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

var goTopBtn = document.querySelector(&#x27;.back-to-top&#x27;);

window.addEventListener(&#x27;scroll&#x27;, trackScroll);
goTopBtn.addEventListener(&#x27;click&#x27;, 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 &#x3E; coords) {
    goTopBtn.classList.remove(&#x27;hide&#x27;);
    }
    if (scrolled &#x3C; coords) {
    goTopBtn.classList.add(&#x27;hide&#x27;);
    }
}

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

var goTopBtn = document.querySelector(&#x27;.back-to-top&#x27;);

window.addEventListener(&#x27;scroll&#x27;, trackScroll);
goTopBtn.addEventListener(&#x27;click&#x27;, 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 &#x3E; coords) {
    goTopBtn.classList.remove(&#x27;hide&#x27;);
    }
    if (scrolled &#x3C; coords) {
    goTopBtn.classList.add(&#x27;hide&#x27;);
    }
}

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

var goTopBtn = document.querySelector(&#x27;.back-to-top&#x27;);

window.addEventListener(&#x27;scroll&#x27;, trackScroll);
goTopBtn.addEventListener(&#x27;click&#x27;, 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 %}

데모 스토어

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

적절한 답변을 찾을 수 없습니까? 언제든지 도와드리겠습니다.