¡ANTES DE COMENZAR!

Shopify anunció que a partir del 31 de marzo (2020), Instagram descontinuará su API que permitía a la mayoría de las plantillas tener por defecto la función de desplegar el feed de Instagram en el home del sitio.

De todas formas, existen muchas aplicaciones que cumplen esta función, ¡hoy te enseñaremos a instalar una de ellas!

 

¡COMENCEMOS! 

1. INSTALA LA APLICACIÓN

Ingresa a tu Shopify y dirígete en la barra izquierda a ‘Aplicaciones’. Verás que se desplegarán enlistadas todas las aplicaciones que están actualmente descargadas en tu sitio. Para dirigirte a la tienda de aplicaciones haz click sobre el botón de la esquina superior derecha que dice: “Visita las Tienda de aplicaciones de Shopify”.

Tras seleccionar el botón, te dirigirá a la biblioteca de aplicaciones. Ingresa en el buscador “Instagram feed”. Cuando se cargue la búsqueda verás que existen muchas aplicaciones que logran esta función, todas con pequeñas diferencias en estilo y posibilidades al pagar por planes.

Nosotros en Haciendola, actualmente nos encontramos utilizando la app ‘Instagram Feed + Photo Gallery’.

Selecciona la aplicación y podrás leer sobre los atributos que esta posee, las diferencias entre el plan gratuito y los de paga. Si todo te parece que esta en orden oprime en “agregar aplicación”, esto te llevara directamente a tu Shopify, permitiéndote instalarla.

 

2. CAMBIA A PLAN GRATUITO

Cuando la aplicación se haya instalado, te abrirá directo al editor de la app. Te darán la bienvenida y coloca “comenzar”.

¡OJO! Fíjate que, en la esquina superior izquierda, sale que estas suscrito en el “Business plan”. Haremos click sobre el ya que debemos cambiarlo al plan gratuito.

Una vez que lo selecciones aparecerán las alternativas de paga y al final, en un recuadro menor encontrarás el “FREE Plan”.

3. CONFIGURA TU FEED

Ahora que vemos que cambio el indicador a plan gratuito, nos dirigiremos a ‘Mi primera Galería’. En ella encontraremos la opción “Agregar cuenta de Instagram”, la cual nos lleva a Facebook. Te exigirá seleccionar la cuenta de Instagram que buscas conectar, al igual que ciertos permisos. Entrega acceso a todo y acepta para vincular.

 Ahora en ‘Mi Primera Galería’ podemos ver la cuenta del Instagram que conectamos. Haz click sobre el botón “guardar cambios” para que la línea de progreso en la parte superior confirme el primer paso.

Luego seleccionaremos el paso dos, “editar post”, el cual nos desplegará todas las publicaciones recientes. En esta sección puedes conectar productos y links a las publicaciones. Existen distintas herramientas que puedes utilizar, las posibilidades dependerán del plan que poseas.

Continuaremos por la línea de progreso a la 3ra sección, para personalizar la galería. De inmediato se abrirá un pop up que nos pedirá escoger su estructura: grilla o slider.

En este caso seleccionaremos el slider de 4 imágenes, pero puedes escoger la estructura que desees. Una vez que estés seguro se debe guardar en la esquina inferior derecha. 

Al guardar nos encontraremos en una mesa de trabajo, donde se muestra desplegado como se vería la estructura que escogimos. Al lado izquierdo notarás que hay una columna de edición, aquí tomaremos las decisiones de diseño. Desde márgenes entre las imágenes, a colores y textos al hacer hover.

También es posible visualizar como se vería en el celular y personalizar cuantas publicaciones se muestran, de forma separada a escritorio. 

 

Una vez que terminamos de editar el estilo de la galería debes guardar al final de la columna de edición. Luego, haremos click sobre botón “embed to Website”. Esto hará que se abra un pop up que nos entrega un código.

Debemos copiar este código y lo guardaremos en Word, notas en el escritorio o simplemente dejando esta pestaña abierta, y lo dejaremos de lado por un momento.

¡OJO! Lo necesitaremos mas adelante.

4. CREAR LA SECCIÓN EN EL CÓDIGO

Ahora que ya tenemos el diseño del feed de Instagram, necesitamos crear la sección dentro de la plantilla de Shopify. Para ello nos dirigiremos en la columna de la izquierda a Tienda Online>Temas, y abriremos el desplegable ‘Acciones’ de la plantilla donde queremos instalar la aplicación. Dentro de las alternativas seleccionar ‘Editar el Código’.

Se abrirá una página que muestra una segunda columna a la izquierda, con carpetas e ítems dentro de ellas. Baja hasta la carpeta ‘Secciones’, despliégala y selecciona ‘Agregar una nueva Sección’.

Aparecerá un pop up donde debes indicar el nombre de la nueva sección. Para mantener el orden y asegurarnos de poder identificar en el futuro de que es este código, lo nombraremos ‘covet-pics’. Luego oprime en ‘crear sección’.

 

 

Verás que se creará una pestaña llamada ‘covet-pics.liquid’, la cual llega por defecto algunos elementos de código. Lo que haremos es seleccionar todo lo que posee esta pestaña y lo eliminaremos, y sobre el espacio en blanco debes pegar el siguiente código.

 

<div data-section-id="{{ section.id }}" data-section-type="covet-pics-feed">   {%- assign sectionHeading = section.settings.title -%}   {%- assign gallery_code = section.settings.gallery-code -%}   <section class="home-section content-area {% if sectionHeading != blank %}has-heading{% endif %}">     {% if sectionHeading != blank %}       <h2 class="section-title" style="text-align:center">{{ sectionHeading }}</h2>     {% endif %}     <div class="covet-pics-wrap">       {{ gallery_code }}     </div>   </section> </div> {% schema %} {   "name": "Covet.pics Gallery",   "settings": [     {       "type": "text",       "id": "title",       "label": "Heading",       "default": "Instagram feed"     },     {       "type": "textarea",       "id": "gallery-code",       "label": "Gallery Embed Code"     }   ],   "presets": [     {       "category": "Image",       "name": "Covet.pics gallery"     }   ] } {% endschema %}

 

Luego debes asegurarte de guardar este cambio, con el botón azul ‘guardar’ de la esquina superior derecha. Una vez que los cambios se han guardado dirígete a la opción ‘personalizar tema’ que se encuentra sobre el botón de guardado.

5. CREAR EL FEED EN EL HOME DEL SITIO

Ahora te encontrarás en el editor de diseño de tu plantilla. Nos dirigiremos al final de la columna izquierda, hasta ‘agregar sección’. Aparecerán enlistadas las diferentes secciones que tu plantilla te permite agregar al home, dentro de ellas ahora encontrarás la opción ‘covet.pics gallery’.

 

Has click sobre el y la sección te pedirá incrustar un código. ¡Es aquí donde pegaremos el código que dejamos de lado! Las imágenes no aparecerán automáticamente, no te asustes. Debes guardar, en la esquina superior derecha, y una vez que se cargue el sitio completo verás que aparecerá la galería que preparamos en la aplicación. ¡FEED DE INSTAGRAM INSTALADA EN EL HOME!

Sabemos que esta aplicación toma varios pasos e involucra ingresar al código, pero hemos tenido buenos resultados. ¡No tengas miedo! Sigue los pasos con cuidado y sabemos que podrás lograrlo. Como mencionamos al comienzo, en el caso que esta aplicación en particular no te convenza, puedes buscar otras alternativas en las Tienda de aplicaciones de Shopify.

 

INFORMACIÓN EXTRAIDA DE

• https://help.shopify.com/en/manual/using-themes/instagram-feed-changes
• https://help.spacesquirrel.co/hc/en-us/articles/115001607931-Embed-a-Gallery-into-the-Home-Page-for-a-Sectioned-theme