Instagram訂閱令牌在shopify

Question

我是shopify的新手，我想在我正在處理的網站上添加Instagram feed。這個網站使用Retina主題，我認爲這不是一個更新的主題。我閱讀了一些文章，如here關於在shopify商店主頁中缺少instagram feed，他們說我需要有一個訪問令牌。現在我有我的訪問令牌，我不知道該如何處理它。我的意思是，我可以在哪裏插入這個令牌？任何幫助將非常感激。

Answer 1

那麼，它需要一些編碼技巧。嘗試使用Shopify Apps Marketplace免費的Instagram應用程序。您不需要做任何事，除了複製粘貼&嵌入代碼：

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

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>