Llama Link: Shopify

User Guide

Llama Link Shopify Installation Guide

  1. Go to https://apps.shopify.com

  2. Search by ‘APP_NAME’

  3. Click on the ‘APP_NAME’ app

  4. Click on the ‘Add App’ button and follow the steps

  5. Install the Content Llama app and review and agree to the installation terms. When you have done it, click on the ‘Install App’ button

  6. Once the application is installed, you will be redirected to a page where you must validate your contact information, this only happens if it is the first time you access the application.

  7. If you weren’t automatically redirected, in the main view of your Shopify admin panel, click on ‘Apps’ and then click on Content Llama.

  8. Once the contact information has been validated, you will be redirected to the application dashboard where you can access information related to Content Llama and the different product tutorials and guides

  • Your chosen theme should include an existing media gallery which displays your product images on the Product page.
  • Some themes may instead have a Media Gallery Block inside the Product Information Section, in this case you can go can jump to the step 2.2 of this process.
  • But most themes will implement this directly in the sections/main-product.liquid file, in this case you have to start the installation process from step 2.1.
  • Removing this gallery depends on the implementation of the theme you are using. You can check which is the case by navigating to Online Store/Themes/Customize and viewing the Products page from your Shop Dashboard.
  1. Navigate to the Products page from Online Store/Themes/Customise
  2. Find the ‘Product Information’ section on the left of the webpage
  3. Select the Media Gallery Block
  4. At the bottom of the Block configuration drawer (right side of screen by default), select ‘Remove Block’
  1. Navigate to the Themes section from the left side of the screen
  2. On the theme you wish to remove the media gallery, select ‘Actions’ and ‘Edit code’
  3. On the left folder navigation, open the Sections folder, then select the ‘main-product.liquid’ file
  4. Find the media-gallery html element and comment this code. It should look similar to the following:
<media-gallery id="MediaGallery-{{ section.id }}" role="region" {% if section.settings.enable_sticky_info %}class="product__media-gallery"{% endif %} aria-label="{{ 'products.product.media.gallery_viewer' | t }}" data-desktop-layout="{{ section.settings.gallery_layout }}">
        <div id="GalleryStatus-{{ section.id }}" class="visually-hidden" role="status"></div>
        <slider-component id="GalleryViewer-{{ section.id }}" class="slider-mobile-gutter">
          <a class="skip-to-content-link button visually-hidden quick-add-hidden" href="#ProductInfo-{{ section.id }}">
            {{ "accessibility.skip_to_product_info" | t }}
          </a>
          <ul id="Slider-Gallery-{{ section.id }}" class="product__media-list contains-media grid grid--peek list-unstyled slider slider--mobile" role="list">
            {%- liquid
              assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src'
              assign media_count = product.media.size
              if section.settings.hide_variants and media_count > 1
                assign media_count = media_count | minus: variant_images.size | plus: 1
              endif

              if section.settings.media_size == 'large'
(...)

5. Find the end of the media gallery html element further down in the file:

(...)          
                    alt="{{ media.alt | escape }}"
                    height="200"
                    width="200"
                    loading="lazy"
                  >
                </button>
              </li>
            {%- endunless -%}
          {%- endfor -%}
        </ul>
        <button type="button" class="slider-button slider-button--next{% if media_count <= 3 %} small-hide{% endif %}{% if media_count <= 4 %} medium-hide large-up-hide{% endif %}" name="next" aria-label="{{ 'general.slider.next_slide' | t }}" aria-controls="GalleryThumbnails-{{ section.id }}" data-step="3">{% render 'icon-caret' %}</button>
      </slider-component>
    {%- endif -%}
  </media-gallery>

6. Replace the element and all its contents with the following:

{%- assign gallery = section.blocks | first -%}
{% render gallery %}

7. Find the following lines in your ‘main-product.liquid’ file:

{%- when '@app' -%}
{% render block %}

8. Add the following lines:

{%- when '@app' -%}
{%- if block != gallery -%}
{% render block %}
{% endif %}
  1. In order to use the service, you must replace the gallery component that your default theme uses, to do this, click on ‘Online Store’ on the left-hand menu.

2. Make sure you are in the ‘Themes’ section that appears on the left side of the screeN.

3. In the middle, top right, click ‘Customize’ to make changes to the theme you’re using.

4. On top, in the middle of the screen, select ‘Default Product’ from the list. This will show you the product details view.

5. On the right side, expand the group called ‘Product Information’

6. At the bottom of that group list, click on ‘Add Block’

7. Select the ‘Content Llama Gallery’ from the Popup

8. On the right side, inside the ‘Product Information’ group, move the ‘Content Llama Gallery’ from the last position to the first one in that group doing drag and drop

9. Optional: On the right side you can select between two visuals skins for the Content Llama Gallery

In the mobile version, only the Image Gallery with the images at the bottom is allowed. (the component will change automatically)

10. On the top-right corner click on ‘Save’

4. Product Grid

  1. Navigate to the Themes section from the left side of the screen

  2. On the theme you wish to remove the media gallery, select ‘Actions’ and ‘Edit code’

  3. On the left folder navigation, open the Snippets folder, then select the card-product.liquid file

  4. Find all the img html elements. In this example we have two img tags:

 
<div class="card__inner {% if settings.card_style == 'standard' %}color-{{ settings.card_color_scheme }} gradient{% endif %}{% if card_product.featured_media or settings.card_style == 'standard' %} ratio{% endif %}" style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;">
        {%- if card_product.featured_media -%}
          <div class="card__media">
            <div class="media media--transparent media--hover-effect">
              {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
              <img
                srcset="{%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}
                  {{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w"
                src="{{ card_product.featured_media | image_url: width: 533 }}"
                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                alt="{{ card_product.featured_media.alt | escape }}"
                class="motion-reduce"
                {% unless lazy_load == false %}loading="lazy"{% endunless %}
                width="{{ card_product.featured_media.width }}"
                height="{{ card_product.featured_media.height }}"
              >
              {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

              {%- if card_product.media[1] != nil and show_secondary_image -%}
                <img
                  srcset="{%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
                    {%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
                    {%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
                    {%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
                    {%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
                    {%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
                    {{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w"
                  src="{{ card_product.media[1] | image_url: width: 533 }}"
                  sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                  alt=""
                  class="motion-reduce"
                  loading="lazy"
                  width="{{ card_product.media[1].width }}"
                  height="{{ card_product.media[1].height }}"
                >
              {%- endif -%}
            </div>
          </div>

5. And substitute the srcset and src with this snippet:

src="https://d3gmjr1d37mfp9.cloudfront.net/shopify/
{{card_product.selected_or_first_available_variant.barcode }}?backupsrc={{card_product.featured_media | image_url: width: 533 | url_encode }}"

Obtaining a result like this:

      <div class="card__inner {% if settings.card_style == 'standard' %}color-{{ settings.card_color_scheme }} gradient{% endif %}{% if card_product.featured_media or settings.card_style == 'standard' %} ratio{% endif %}" style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;">
        {%- if card_product.featured_media -%}
          <div class="card__media">
            <div class="media media--transparent media--hover-effect">
              {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
              <img
                src="https://d3gmjr1d37mfp9.cloudfront.net/shopify/{{ card_product.selected_or_first_available_variant.barcode }}
                ?backupsrc={{ card_product.featured_media | image_url: width: 533 | url_encode }}"
                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                alt="{{ card_product.featured_media.alt | escape }}"
                class="motion-reduce"
                {% unless lazy_load == false %}loading="lazy"{% endunless %}
                width="{{ card_product.featured_media.width }}"
                height="{{ card_product.featured_media.height }}"
              >
              {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

              {%- if card_product.media[1] != nil and show_secondary_image -%}
                <img
                  src="https://d3gmjr1d37mfp9.cloudfront.net/shopify/{{ card_product.selected_or_first_available_variant.barcode }}
                  ?backupsrc={{ card_product.featured_media | image_url: width: 533 | url_encode }}"
                  sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                  alt=""
                  class="motion-reduce"
                  loading="lazy"
                  width="{{ card_product.media[1].width }}"
                  height="{{ card_product.media[1].height }}"
                >
              {%- endif -%}
            </div>
          </div>

It is important to note that this will work in the vast majority of the cases because by default Shopify will render card-product.liquid.

In the rare case in which the theme has been previously modified changing the name of the card-product, we will have to go to the folder called Sections, find there the file main-collection-product-grid.liquid and look for the name of what is being rendered in an instruction that would look like this:

{% render 'name-of-what-is-being-rendered'}

Substituting card product for whatever name we find there on the code snippet that we use to overwrite the images sources would work in that particular case, although the normal case is that it won’t be needed.

5. Using the UPCs/ EANS

In order to use the llama content service, for each product you want to use our service you must update the field called ‘Barcode, ISBN…’ on your product page with a UPC code or EAN

If you want to test if the service is properly working, just make sure that you are using the Sample Product used for testing purposes.

Available UPCs

    • 196248029405

    • 196248029368

    • 196248029290

    • 196248029429

    • 196248029252

    • 196248029467