Instagram feed access token in shopify

Question

Ich bin neu zu shopify und ich wollte den Instagram-Feed auf der Website, an der ich arbeite, hinzufügen. Diese Website verwendet Retina-Thema und ich denke, das ist kein aktualisiertes Thema. Ich lese einige Artikel wie here über fehlende Instagram-Feed in Shopify Store Homepage und sie sagten, ich brauche ein Access-Token. Jetzt, wo ich mein Zugriffs-Token habe, weiß ich nicht, was ich damit machen soll. Ich meine, wo kann ich diesen Token einfügen? Jede Hilfe würde sehr geschätzt werden.

Answer 1

Nun, es erfordert einige Programmierkenntnisse. Versuchen Sie, kostenlose Instagram-Apps von Shopify Apps Marketplace zu verwenden. Sie werden nichts außer Kopie tun müssen & den eingebetteten Code einfügen:

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>