How to Add Featured Collection to Blog Post in Shopify

How to Add Featured Collection to Blog Post in Shopify

Shopify is a great eCommerce platform to start an online business. As a new entrepreneur, you must need a professionally designed online store and It’s easy to make your default theme more user-friendly by customizing the theme.

In this tutorial, I am going to show you ” How to Add Featured Collection to Blog Post in Shopify? ” I make this tutorial easy by sharing the video and source code.

Here is the step-by-step guideline for you. You can also follow my video tutorial on my YouTube Channel.

1: Open the Snippets Folder

2: Add a new snippet name: featured-collection-grid-item.liquid

Add the below code in this file

{% comment %}
    Renders a list of products from a collection

    Accepts:
    - collection: {Object} Collection Liquid object (required)

    Usage:
    {% include 'collection-grid-item', collection: collection %}
{% endcomment %}
{% if collection.image %}
  {%- assign collection_image = collection.image -%}
{% elsif collection.products.first and collection.products.first.media != empty %}
  {%- assign collection_image = collection.products.first.featured_media.preview_image -%}
{% else %}
  {% assign collection_image = blank %}
{% endif %}

<div class="collection-grid-item collection-promo">
  <a href="{% if collection.products == empty %}#{% else %}{{ collection.url }}{% endif %}" class="collection-grid-item__link">
    {% unless collection_image == blank %}
      <div class="collection-grid-item__overlay zoom box ratio-container lazyload js "
        data-bgset="{% include 'bgset', image: collection_image %}"
        data-sizes="auto"
        data-parent-fit="cover"
        data-image-loading-animation>
      </div>
      <noscript>
        <div class="collection-grid-item__overlay" style="background-image: url('{{ collection_image | img_url: '1024x1024' }}')"></div>
      </noscript>
    {% else %}
      {% if collection == empty %}
        <div class="collection-grid-item__overlay">
          {% capture current %}{% cycle 1, 2, 3 %}{% endcapture %}
          {{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        </div>
      {% else %}
        <div class="collection-grid-item__overlay" style="background-image: url('{{ collection_image | img_url: '1024x1024' }}')"></div>
      {% endif %}
    {% endunless %}

    <div class="collection-grid-item__title-wrapper">
      <div class="collection-grid-item__title h3">
        {% if collection.title == blank %}
          {{ 'homepage.onboarding.collection_title' | t }}
        {% else %}
          {{ collection.title }}
        {% endif %}
      </div>
    </div>
  </a>
</div>

3: Open Sections Folder

4: Create a file name: blog-collections-template.liquid

<div class="page-width return-link-wrapper">
  
    <div class="section-header text-center">
      <h2>All Collection</h2>
    </div>

  {%- assign blocks = section.blocks | sort: 'collection.all_products_count' -%}

  {% case section.settings.grid %}
    {% when 2 %}
      {%- assign grid_item_width = 'medium-up--one-half' -%}
      {%- assign image_size = '530x' -%}
    {% when 3 %}
      {%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
      {%- assign image_size = '350x' -%}
    {% when 4 %}
      {%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
      {%- assign image_size = '250x' -%}
    {% when 5 %}
      {%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
      {%- assign image_size = '225x' -%}
  {% endcase %}

  <ul class="grid grid--uniform">
    {% if section.settings.display_type == 'all' %}
      {% case section.settings.sort %}
        {% when 'products_high' or 'products_low' %}
          {%- assign collections = collections | sort: 'all_products_count' -%}
        {% when 'date' or 'date_reversed' %}
          {%- assign collections = collections | sort: 'published_at' -%}
      {% endcase %}
      {% if section.settings.sort == 'products_low' or section.settings.sort == 'date' or section.settings.sort == 'alphabetical' %}
        {% for collection in collections %}
          <li class="grid__item {{ grid_item_width }}">
            {% include 'featured-collection-grid-item', collection: collection %}
          </li>
        {% endfor %}
      {% else %}
        {% for collection in collections reversed %}
          <li class="grid__item {{ grid_item_width }}">
            {% include 'featured-collection-grid-item', collection: collection %}
          </li>
        {% endfor %}
      {% endif %}
    {% else %}
      {% for block in section.blocks %}
        <li class="grid__item {{ grid_item_width }}">
          {%- assign collection = collections[block.settings.collection] -%}
          {% include 'featured-collection-grid-item', collection: collection %}
        </li>
      {% endfor %}
    {% endif %}
  </ul>
</div>



{% schema %}
{
  "name": {
    "cs": "Stránka se seznamem kolekcí",
    "da": "Siden Kollektionsliste",
    "de": "Kategorien-Liste Seite",
    "en": "Collections list page",
    "es": "Lista de colecciones",
    "fi": "Kokoelmaluettelosivu",
    "fr": "Liste des collections",
    "it": "Elenco collezioni",
    "ja": "コレクションリストのページ",
    "ko": "컬렉션 목록 페이지",
    "nb": "Samlingsliste-side",
    "nl": "Pagina Collectielijst",
    "pl": "Strona listy kolekcji",
    "pt-BR": "Lista de coleções",
    "pt-PT": "Página da lista de coleções",
    "sv": "Kollektionslistsida",
    "th": "หน้ารายการคอลเลกชัน",
    "tr": "Koleksiyonlar listesi sayfası",
    "vi": "Trang danh sách bộ sưu tập",
    "zh-CN": "产品系列列表页面",
    "zh-TW": "商品系列清單頁面"
  },
  "settings": [
    {
      "type": "paragraph",
      "content": {
        "cs": "Seznam ve výchozím nastavení obsahuje všechny vaše kolekce. Pokud ho chcete přizpůsobit, zvolte možnost Vybrané a přidejte požadované kolekce.",
        "da": "Alle dine kollektioner vises som standard. Hvis du vil tilpasse din liste, skal du vælge \"Valgte\" og tilføje kollektioner.",
        "de": "Alle Kategorien sind automatisch gelistet. Zum Ändern der Liste wählen Sie 'Ausgewählt' und fügen Sie Kategorien hinzu.",
        "en": "All of your collections are listed by default. To customize your list, choose 'Selected' and add collections.",
        "es": "Todas tus colecciones están enlistadas por defecto. Para personalizar tu lista, elige 'Seleccionadas' y agrega colecciones.",
        "fi": "Kaikki kokoelmasi näkyvät oletuksena. Voit mukauttaa luetteloa napauttamalla \"Valittu\" ja lisäämällä kokoelmia.",
        "fr": "Toutes vos collections sont listées par défaut. Pour personaliser votre liste, cliquez sur « Sélection » et ajoutez des collections.",
        "it": "Tutte le tue collezioni vengono elencate per impostazione predefinita. Per personalizzare il tuo elenco, scegli \"Selezionato\" e aggiungi delle collezioni.",
        "ja": "すべてのコレクションがデフォルトで一覧表示されます。一覧をカスタマイズするには、「選択済み」を選択してコレクションを追加します。",
        "ko": "모든 콜렉션이 기본으로 나열됩니다. 목록을 사용자 지정하려면 '선택'을 선택하고 컬렉션을 추가하십시오.",
        "nb": "Alle samlingene dine vises som standard. For å tilpasse listen, velg «Valgte» og legg til samlinger.",
        "nl": "Standaard worden al je collecties weergegeven. Kies Geselecteerd en voeg collecties toe om de lijst aan te passen.",
        "pl": "Domyślnie wyświetlana jest lista wszystkich Twoich kolekcji. Aby dostosować listę, wybierz opcję „Wybrane" i dodaj kolekcje.",
        "pt-BR": "Todas as suas coleções são listadas por padrão. Para personalizar sua lista, escolha \"Selecionado\" e adicione coleções.",
        "pt-PT": "Todas as suas coleções são listadas por predefinição. Para personalizar a sua lista, escolha \"Selecionado\" e adicione coleções.",
        "sv": "Alla dina kollektioner är listade som standard. För att anpassa din lista väljer du \"Vald\" och lägger till kollektioner.",
        "th": "มีการระบุคอลเลกชันทั้งหมดของคุณไว้เป็นค่าเริ่มต้น หากต้องการปรับแต่งรายการของคุณ ให้เลือก 'ที่เลือก' แล้วเพิ่มคอลเลกชัน",
        "tr": "Varsayılan olarak koleksiyonlarınızın tümü gösterilir. Listenizi özelleştirmek için \"Seçilen\" seçeneğini belirleyin ve koleksiyonlarınızı ekleyin.",
        "vi": "Tất cả bộ sưu tập của bạn được liệt kê theo mặc định. Để tùy chỉnh danh sách, chọn \"Đã chọn\" và thêm bộ sưu tập.",
        "zh-CN": "默认情况下列出您的所有产品系列。若要自定义列表,请选择"已选择"并添加产品系列。",
        "zh-TW": "系統預設會將您所有的商品系列都列入清單。如果想自訂清單,請點選「已選取」並新增商品系列。"
      }
    },
    {
      "type": "radio",
      "id": "display_type",
      "label": {
        "cs": "Vyberte kolekce, které chcete zobrazit",
        "da": "Vælg de kollektioner, der skal vises",
        "de": "Kategorien auswählen, die angezeigt werden sollen",
        "en": "Select collections to show",
        "es": "Selecciona colecciones para mostrar",
        "fi": "Valitse näytettävät kokoelmat",
        "fr": "Sélectionner les collections à afficher",
        "it": "Seleziona le collezioni da mostrare",
        "ja": "表示するコレクションを選択する",
        "ko": "표시할 컬렉션 선택",
        "nb": "Velg samlinger som skal vises",
        "nl": "Collecties selecteren om weer te geven",
        "pl": "Wybierz kolekcje do pokazania",
        "pt-BR": "Selecione coleções para exibir",
        "pt-PT": "Selecionar coleções para mostrar",
        "sv": "Välj kollektioner som ska visas",
        "th": "เลือกคอลเลกชันที่จะแสดง",
        "tr": "Gösterilecek koleksiyonları seçin",
        "vi": "Chọn bộ sưu tập muốn hiển thị",
        "zh-CN": "选择要显示的产品系列",
        "zh-TW": "選取欲顯示的商品系列"
      },
      "default": "all",
      "options": [
        {
          "value": "all",
          "label": {
            "cs": "Všechny",
            "da": "Alle",
            "de": "Alle",
            "en": "All",
            "es": "Todos",
            "fi": "Kaikki",
            "fr": "Toutes",
            "it": "Tutte",
            "ja": "すべて",
            "ko": "모두",
            "nb": "Alle",
            "nl": "Alle",
            "pl": "Wszystkie",
            "pt-BR": "Tudo",
            "pt-PT": "Tudo",
            "sv": "Alla",
            "th": "ทั้งหมด",
            "tr": "Tümü",
            "vi": "Tất cả",
            "zh-CN": "所有",
            "zh-TW": "全部"
          }
        },
        {
          "value": "selected",
          "label": {
            "cs": "Vybrané",
            "da": "Valgt",
            "de": "Ausgewählt",
            "en": "Selected",
            "es": "Seleccionadas",
            "fi": "Valittu",
            "fr": "Sélection",
            "it": "Selezionato",
            "ja": "選択済み",
            "ko": "선택됨",
            "nb": "Valgt",
            "nl": "Geselecteerd",
            "pl": "Wybrane",
            "pt-BR": "Selecionado",
            "pt-PT": "Selecionado",
            "sv": "Valt",
            "th": "เลือกแล้ว",
            "tr": "Seçildi",
            "vi": "Đã chọn",
            "zh-CN": "已选",
            "zh-TW": "已選取"
          }
        }
      ]
    },
    {
      "type": "select",
      "id": "sort",
      "label": {
        "cs": "Seřadit kolekce:",
        "da": "Sortér kollektioner efter:",
        "de": "Kategorien sortieren nach:",
        "en": "Sort collections by:",
        "es": "Ordenar colecciones por:",
        "fi": "Lajittele kokoelmat seuraavasti:",
        "fr": "Trier les collections par:",
        "it": "Ordina le collezioni per:",
        "ja": "コレクションの並べ替え方法:",
        "ko": "컬렉션 정렬 기준:",
        "nb": "Sorter samlinger etter:",
        "nl": "Collecties sorteren op:",
        "pl": "Sortuj kolekcje według:",
        "pt-BR": "Organizar coleções por:",
        "pt-PT": "Ordenar coleções por:",
        "sv": "Sortera kollektioner efter:",
        "th": "จัดเรียงคอลเลกชันตาม:",
        "tr": "Koleksiyonları sıralama ölçütü:",
        "vi": "Sắp xếp bộ sưu tập theo:",
        "zh-CN": "产品系列排序依据:",
        "zh-TW": "以下列方式排序商品系列:"
      },
      "info": {
        "cs": "Řazení je možné použít jen v případě, že je vybrána možnost Všechny",
        "da": "Sortering gælder kun, når \"Alle\" er valgt",
        "de": "Sortieren funktioniert nur, wenn 'Alle' ausgewählt ist",
        "en": "Sorting only applies when 'All' is selected",
        "es": "La función ordenar solo se aplica cuando se selecciona \"Todas\"",
        "fi": "Lajittelua sovelletaan vain, kun valintana on \"Kaikki\"",
        "fr": "Le tri ne s'applique que lorsque "Toutes" est sélectionné",
        "it": "L'ordinamento viene applicato solo quanto è selezionato \"Tutto\"",
        "ja": "「すべて」が選択されている場合にのみ並べ替えを適用する",
        "ko": "정렬은 '모두'를 선택한 경우에만 적용됩니다.",
        "nb": "Sortering gjelder bare når «Alle» er valgt",
        "nl": "Sorteren is alleen van toepassing als Alles is geselecteerd",
        "pl": "Sortowanie można wykonać tylko po wybraniu opcji „Wszystkie"",
        "pt-BR": "A organização só se aplica quando \"Tudo\" está selecionado",
        "pt-PT": "A ordenação só se aplica quando \"Tudo\" está selecionado",
        "sv": "Sortering gäller endast när \"Alla\" är markerat",
        "th": "การจัดเรียงจะใช้ได้เมื่อเลือก 'ทั้งหมด' เท่านั้น",
        "tr": "Sıralama yalnızca \"Tümü\" seçildiğinde uygulanır",
        "vi": "Sắp xếp chỉ áp dụng khi chọn \"Tất cả\"",
        "zh-CN": "仅在选择"全部"时应用排序",
        "zh-TW": "只有在選擇「全部」的時候才能排序"
      },
      "default": "alphabetical",
      "options": [
        {
          "value": "products_high",
          "label": {
            "cs": "Od nejvyššího počtu produktů po nejnižší",
            "da": "Produktantal, høj til lav",
            "de": "Produktanzahl, hoch zu niedrig",
            "en": "Product count, high to low",
            "es": "Recuento de productos, de mayor a menor",
            "fi": "Tuotteiden määrä suurimmasta pienimpään",
            "fr": "Nombre de produits, ordre décroissant",
            "it": "Conteggio decrescente prodotti",
            "ja": "商品数の多い順",
            "ko": "제품 개수, 높은 개수부터",
            "nb": "Produktantall, høy til lav",
            "nl": "Aantal producten, van hoog naar laag",
            "pl": "Liczba produktów, od najwyższej do najniższej",
            "pt-BR": "Contagem de produtos, alta para baixa",
            "pt-PT": "Contagem de produtos, alta para baixa",
            "sv": "Produktantal, högt till lågt",
            "th": "จำนวนสินค้า จากสูงไปต่ำ",
            "tr": "Ürün sayısı, yüksekten düşüğe",
            "vi": "Số lượng sản phẩm (từ cao xuống thấp)",
            "zh-CN": "产品数量,从高到低",
            "zh-TW": "產品數量,從高到低"
          }
        },
        {
          "value": "products_low",
          "label": {
            "cs": "Od nejnižšího počtu produktů po nejvyšší",
            "da": "Produktantal, lav til høj",
            "de": "Produktanzahl, niedrig zu hoch",
            "en": "Product count, low to high",
            "es": "Recuento de productos, de menor a mayor",
            "fi": "Tuotteiden määrä pienimmästä suurimpaan",
            "fr": "Nombre de produits, ordre croissant",
            "it": "Conteggio crescente prodotti",
            "ja": "商品数の少ない順",
            "ko": "제품 개수, 낮은 개수부터",
            "nb": "Produktantall, lav til høy",
            "nl": "Aantal producten, van laag naar hoog",
            "pl": "Liczba produktów, od najniższej do najwyższej",
            "pt-BR": "Contagem de produtos, baixa para alta",
            "pt-PT": "Contagem de produtos, baixa para alta",
            "sv": "Produktantal, lågt till högt",
            "th": "รูปแบบรูปภาพ จากต่ำไปสูง",
            "tr": "Ürün sayısı, düşükten yükseğe",
            "vi": "Số lượng sản phẩm (từ thấp lên cao)",
            "zh-CN": "产品数量,从低到高",
            "zh-TW": "產品數量,從低到高"
          }
        },
        {
          "value": "alphabetical",
          "label": {
            "cs": "Abecedně: A–Z",
            "da": "Alfabetisk, A-Å",
            "de": "Alphabetisch, A-Z",
            "en": "Alphabetically, A-Z",
            "es": "Alfabéticamente, A-Z",
            "fi": "Aakkosjärjestyksessä A–Z",
            "fr": "Alphabétique, A-Z",
            "it": "In ordine alfabetico, A - Z",
            "ja": "アルファベット順、 A-Z",
            "ko": "알파벳순, A-Z",
            "nb": "Alfabetisk, A–Å",
            "nl": "Alfabetisch: A-Z",
            "pl": "Alfabetycznie, A-Z",
            "pt-BR": "Ordem alfabética, A–Z",
            "pt-PT": "Alfabeticamente, A-Z",
            "sv": "Alfabetiskt, A–Ö",
            "th": "เรียงตามตัวอักษร A-Z",
            "tr": "Alfabetik olarak, A-Z",
            "vi": "Thứ tự bảng chữ cái (từ A-Z)",
            "zh-CN": "按字母顺序排序,A-Z",
            "zh-TW": "依字母順序 A 到 Z"
          }
        },
        {
          "value": "alphabetical_reversed",
          "label": {
            "cs": "Abecedně: Z–A",
            "da": "Alfabetisk, Å-A",
            "de": "Alphabetisch, Z-A",
            "en": "Alphabetically, Z-A",
            "es": "Alfabéticamente, Z-A",
            "fi": "Aakkosjärjestyksessä Z–A",
            "fr": "Alphabétique, Z-A",
            "it": "In ordine alfabetico, Z - A",
            "ja": "アルファベット順、 Z-A",
            "ko": "알파벳순, Z-A",
            "nb": "Alfabetisk, Å–A",
            "nl": "Alfabetisch: Z-A",
            "pl": "Alfabetycznie, Z-A",
            "pt-BR": "Ordem alfabética, Z–A",
            "pt-PT": "Alfabeticamente, Z-A",
            "sv": "Alfabetiskt, Ö–A",
            "th": "เรียงตามตัวอักษร Z-A",
            "tr": "Alfabetik olarak, Z-A",
            "vi": "Thứ tự bảng chữ cái (từ Z-A)",
            "zh-CN": "按字母顺序排序,Z-A",
            "zh-TW": "依字母順序 Z 到 A"
          }
        },
        {
          "value": "date",
          "label": {
            "cs": "Od nejstaršího data po nejnovější",
            "da": "Dato, ældre til nyere",
            "de": "Datum, alt zu neu",
            "en": "Date, old to new",
            "es": "Fecha: antiguo(a) a reciente",
            "fi": "Päivämäärä vanhimmasta uusimpaan",
            "fr": "Date, anciennes à récentes",
            "it": "Data, dal più vecchio al più recente",
            "ja": "古い商品順",
            "ko": "날짜(오래된 날짜부터)",
            "nb": "Dato, gammelt til nytt",
            "nl": "Datum: oud naar nieuw",
            "pl": "Data, od najwcześniejszej do najpóźniejszej",
            "pt-BR": "Data, mais antiga primeiro",
            "pt-PT": "Data, mais antigos",
            "sv": "Datum, gammalt till nytt",
            "th": "วันที่ จากเก่าไปใหม่",
            "tr": "Tarih, eskiden yeniye",
            "vi": "Ngày (từ cũ đến mới)",
            "zh-CN": "日期从旧到新",
            "zh-TW": "日期 (從舊到新)"
          }
        },
        {
          "value": "date_reversed",
          "label": {
            "cs": "Od nejnovějšího data po nejstarší",
            "da": "Dato, nyere til ældre",
            "de": "Datum, neu zu alt",
            "en": "Date, new to old",
            "es": "Fecha: reciente a antiguo(a)",
            "fi": "Päivämäärä uusimmasta vanhimpaan",
            "fr": "Date, récentes à anciennes",
            "it": "Data, dal più recente al più vecchio",
            "ja": "新着順",
            "ko": "날짜(최신 날짜부터)",
            "nb": "Dato, nytt til gammelt",
            "nl": "Datum: nieuw naar oud",
            "pl": "Data, od najpóźniejszej do najwcześniejszej",
            "pt-BR": "Data, mais recente primeiro",
            "pt-PT": "Data, mais recentes",
            "sv": "Datum, nytt till gammalt",
            "th": "วันที่ จากใหม่ไปเก่า",
            "tr": "Tarih, yeniden eskiye",
            "vi": "Ngày (từ mới đến cũ)",
            "zh-CN": "日期从新到旧",
            "zh-TW": "日期 (從新到舊)"
          }
        }
      ]
    },
    {
      "type": "range",
      "id": "grid",
      "label": {
        "cs": "Počet kolekcí na řádek",
        "da": "Kollektioner pr. række",
        "de": "Kategorien per Reihe",
        "en": "Collections per row",
        "es": "Colecciones por fila",
        "fi": "Kokoelmia per rivi",
        "fr": "Collections par rangée",
        "it": "Collezioni per riga",
        "ja": "行あたりのコレクション数",
        "ko": "열 별 컬렉션",
        "nb": "Samlinger per rad",
        "nl": "Collecties per rij",
        "pl": "Liczba kolekcji na wiersz",
        "pt-BR": "Coleções por linha",
        "pt-PT": "Coleções por linha",
        "sv": "Produktserier per rad",
        "th": "คอลเลกชันต่อแถว",
        "tr": "Satır başına koleksiyon",
        "vi": "Số bộ sưu tập trên mỗi hàng",
        "zh-CN": "每行产品系列数",
        "zh-TW": "每列商品系列數"
      },
      "default": 3,
      "min": 2,
      "max": 5,
      "step": 1
    }
  ],
  "blocks": [
    {
      "type": "collection",
      "name": {
        "cs": "Kolekce",
        "da": "Kollektion",
        "de": "Kategorie",
        "en": "Collection",
        "es": "Colección",
        "fi": "Kokoelma",
        "fr": "Collection",
        "it": "Collezione",
        "ja": "コレクション",
        "ko": "컬렉션",
        "nb": "Samling",
        "nl": "Collectie",
        "pl": "Kolekcja",
        "pt-BR": "Coleção",
        "pt-PT": "Coleção",
        "sv": "Produktserie",
        "th": "คอลเลกชัน",
        "tr": "Koleksiyon",
        "vi": "Bộ sưu tập",
        "zh-CN": "收藏",
        "zh-TW": "商品系列"
      },
      "settings": [
        {
          "label": {
            "cs": "Kolekce",
            "da": "Kollektion",
            "de": "Kategorie",
            "en": "Collection",
            "es": "Colección",
            "fi": "Kokoelma",
            "fr": "Collection",
            "it": "Collezione",
            "ja": "コレクション",
            "ko": "컬렉션",
            "nb": "Samling",
            "nl": "Collectie",
            "pl": "Kolekcja",
            "pt-BR": "Coleção",
            "pt-PT": "Coleção",
            "sv": "Produktserie",
            "th": "คอลเลกชัน",
            "tr": "Koleksiyon",
            "vi": "Bộ sưu tập",
            "zh-CN": "收藏",
            "zh-TW": "商品系列"
          },
          "id": "collection",
          "type": "collection"
        }
      ]
    }
  ]
}
{% endschema %}

5: Open the Templates Folder

6: Open article.liquid file and add below code:

{% section ‘blog-collections-template’ %}

DONE!

Wait 🙂

Add below css code in css file.

/********************************** Featured Collection  *********************************/

.collection-grid-item.collection-promo {
    overflow: hidden;
    box-shadow: 0px 10px 46px 0px rgb(1 7 39 / 30%);
    border: 5px solid #f7f7f7;
}

.collection-grid-item__title-wrapper{transition: all 200ms ease;}
.collection-grid-item__title-wrapper:hover{opacity:0;transition: all 200ms ease;}


.zoom {
  animation: scale 6s linear infinite;
}
  

@keyframes scale {
  50% {
    -webkit-transform:scale(1.2);
    -moz-transform:scale(1.2);
    -ms-transform:scale(1.2);
    -o-transform:scale(1.2);
    transform:scale(1.2);
  }
}




@-webkit-keyframes zoomeffect{
		0%{
			background-position:center;
		  transform:scale(1,0.2);
		}
		50%{
			background-position:center;
		  transform:scale(1,0.5);
		}
		100%{
			background-position:center;
		  transform:scale(1,0.8);
		}
}
@keyframes zoomeffect{
		0%{
			background-position:center;
		  transform:scale(1,1);
		}
		50%{
			background-position:center;
		  transform:scale(1,1.2);
		}
		100%{
			background-position:center;
		  transform:scale(1,1.5);
		}
}

For more support: Contact us Now or Hire me on Upwork

Bonus: Benefit of adding a blog to Shopify website

  1. Boost Search Engine Optimization (SEO): Adding a blog to your Shopify website can help improve your search engine rankings. By creating high-quality content and incorporating relevant keywords, you can attract more organic traffic to your website and improve your visibility in search engine results pages (SERPs).
  2. Build Brand Awareness: A blog can help you build brand awareness by providing a platform to showcase your expertise and share your company’s story. By creating informative and engaging content that resonates with your target audience, you can establish yourself as a thought leader in your industry and increase brand recognition.
  3. Increase Customer Engagement: A blog can help you connect with your customers on a deeper level by creating a two-way conversation. By encouraging comments and feedback, you can build a community around your brand and engage with your customers in a more personal way.
  4. Drive Traffic to Your Shopify Store: By promoting your products and services through your blog content, you can drive more traffic to your Shopify store and increase your chances of making a sale. By including relevant links and calls to action in your blog posts, you can guide your readers towards your products and services.
  5. Provide Value to Your Customers: By creating high-quality and informative content that is relevant to your target audience, you can provide value to your customers beyond just selling products. This can help build trust and loyalty, and create a long-term relationship with your customers.

Leave a Reply