shopify의 Instagram 피드 액세스 토큰

Question

저는 shopify가 처음이에요. 제가 작업하고있는 웹 사이트에 Instagram 피드를 추가하고 싶었습니다. 이 웹 사이트는 Retina 테마를 사용하고 있으며 이것이 업데이트 된 테마는 아니라고 생각합니다. shopify 홈페이지에 스 테이블 어 피드 누락에 관한 here과 같은 기사를 읽었으며 액세스 토큰이 있어야한다고 말했습니다. 이제는 내 액세스 토큰을 가지고 있으므로 어떻게해야 할 지 모르겠습니다. 어디서이 토큰을 넣을 수 있니? 어떤 도움이라도 대단히 감사 할 것입니다.

Answer 1

음, 코딩 기술이 필요합니다. Shopify Apps Marketplace의 무료 Instagram 앱을 사용해보십시오. 당신은 붙여 복사 & 제외하고 아무것도 할 소스 코드가 필요하지 않습니다 항상 환영 잠재적 인 솔루션

https://apps.shopify.com/instagram-feed

https://apps.shopify.com/instagram-photos

Answer 2

{{ 'instafeed.min.js' | asset_url | script_tag }} 
{{ 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css' | stylesheet_tag }} 
<h2 class="instagram_heading" style="text-align: center;"><span style="color: #000;">Store Name</span><span style="font-weight:normal;"> On Instagram </span><a target="_blank" href="https://www.instagram.com/shopgear101/"> UserName</a></h2> 


<section class="twitter-feed footer-bottom-margin"> 
    <div id="instafeed" class="photo_list list-inline"> 
    </div> 

<script type="text/javascript"> 
    var userFeed = new Instafeed({ 
     get: 'user', 
     userId: 'userid', //Put The user id here.. 
     accessToken: 'accesstoken', //Put The access token here.. 
     limit: '10', 
     template: '<div class="twitter_img" style="background-image: url\(\{\{image\}\}\)"><div class="inner_image text-center"></div><a target="_blank" href="\{\{link\}\}"><div class="inner_image"><span class="text_like"><i class="fa fa-heart" aria-hidden="true"></i>&nbsp;\{\{likes\}\}</span></div></a></div>' 
    }); 
    userFeed.run(); 
</script> 

<style> 
    .twitter_img{ 
    float:left; 
    position: relative; 
    width: 20%; 
    padding-bottom : 20%; /* = width for a 1:1 aspect ratio */ 

    background-position:center center; 
    background-repeat:no-repeat; 
    background-size:cover; /* you change this to "contain" if you don't want the images to be cropped */ 
    } 
    .inner_image { 
    position: absolute; 
    left: 0; 
    top: 0; 
    overflow: hidden; 
    background: rgba(0, 0 , 0,.5); 
    color: #fff; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    } 
    .twitter_img:hover .inner_image{ 
    opacity: 1; 
    transition: 0.3s ease; 
    } 
    .text_like{ 
    font-size: 22px; 
    position: relative; 
    top: 47%; 
    left: 45%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
    -webkit-transform: translateX(-50%); 
    -ms-transform: translateX(-50%); 
    transform: translateX(-50%); 
    } 
    @media screen and (max-width: 420px){ 
    .twitter_img{ 
     width: 50%; 
     height: 190px !important; 
    } 
    } 
</style> 
</section>