SEEKING ANY SUPPORT!! - Adding Flag Icons to Testimonials? - Any Help Will Be Appreciated!

TumaDor
Excursionist
12 2 2

Hi Shopify Community,

I am looking to add custom icons, specifically flags of countries, to the testimonials section of my website. The default icons given are a quote icon and stars icon, however, that is not what I am looking for so I would like to replace them with flags. I tried to add emojis by editing this line of code and replacing the star icons with emojis. However, the issue is that I am unable to add flag icons as they become letters as shown below when I added the flag of the United States. 

TumaDor_1-1632347612167.png

TumaDor_2-1632347739320.png

The current icons and what I specifically mean by the quote and stars icon is shown below. I am just hoping if anyone can provide me a solution to how I would add flag icons instead of the stars and quote icons. 

TumaDor_3-1632347865045.png

Many thanks, and thank you in advance! Please let me know if any more specification is required. My store URL and password is attached below, store theme btw is Motion

Store URL:

zurainelx.myshopify.com

Store Password:

ilyaga

 

0 Likes
TumaDor
Excursionist
12 2 2

Hi again Shopify Community,

So, I actually changed my mind and was wondering if it was possible to add PNG or JPG images to replace the quote and star icons. Also with about the same sizing as the current icons shown on the website. Please let me know of any solutions at your earliest convenience, thanks! 

 

0 Likes
TumaDor
Excursionist
12 2 2

So I figured it partly out, my only issue now is that there is a restriction to the image size, or it just won't allow me to insert the full size of the image. 

TumaDor_2-1632375964988.png

 

TumaDor_0-1632375691833.png

I tried to make the background-size as small as possible, and made sure the image had the same px, but the issue was still there. Lastly, here is my testimonials.liquid file code. Any help will be much appreciated! !

 

{%- style -%}
  .testimonials-{{ section.id }} {
    background-color: {{ section.settings.color_background }};
    color: {{ section.settings.color_text }};
  }
}
{%- endstyle -%}

<div
  class="text-center testimonials-section testimonials-{{ section.id }}{% if section.settings.color_background == settings.color_body_bg %} testimonials-section--with-divider{% endif %}"
  data-section-id="{{ section.id }}"
  data-section-type="testimonials"
  data-aos>
  {%- if section.settings.title != blank -%}
    <div class="page-width">
      <div class="section-header">
        <h2>{{ section.settings.title | escape }}</h2>
      </div>
    </div>
  {%- endif -%}

  {%- if section.blocks.size > 0 -%}
    <div class="slideshow-wrapper">
      <div class="testimonials-slider" id="Testimonials-{{ section.id }}" data-count="{{ section.blocks.size }}">
        {%- for block in section.blocks -%}
          <div
            class="testimonials-slide testimonials-slide--{{ block.id }}"
            data-index="{{ forloop.index0 }}"
            {{ block.shopify_attributes }}>
            <blockquote class="testimonials-slider__text">

              {%- if block.settings.icon == 'quote' -%}
                <span class="quote-icon"><svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-quote" viewBox="0 0 41 35"><path d="M10.208 17.711h6.124v16.332H0V21.684C0 8.184 5.444.956 16.332 0v6.125c-4.083 1.14-6.124 4.414-6.124 9.82v1.766zm24.498 0h6.124v16.332H24.498V21.684C24.498 8.184 29.942.956 40.83 0v6.125c-4.083 1.14-6.124 4.414-6.124 9.82v1.766z" fill="#000" fill-rule="evenodd"/></svg></span>
              {%- elsif block.settings.icon == '5-stars' -%}
                <span class="testimonial-stars">★★★★★</span>
              {%- elsif block.settings.icon == '4-stars' -%}
                <span class="testimonial-stars">‎</span>
              {%- elsif block.settings.icon == '3-stars' -%}
                <span class="testimonial-stars">★★★</span>
              {%- elsif block.settings.icon == '2-stars' -%}
                <span class="testimonial-stars">★★</span>
              {%- elsif block.settings.icon == '1-star' -%}
                <span class="testimonial-stars">★</span>
              {%- endif -%}

              {%- if block.settings.testimonial != blank -%}
                <div class="rte-setting text-spacing">{{ block.settings.testimonial }}</div>
              {%- endif -%}

              {%- if block.settings.image != blank or block.settings.author != blank or block.settings.author_info != blank -%}
                <div class="testimonial-meta">
                {%- if block.settings.image != blank -%}
                  <div
                    class="image-wrap testimonail-image{% if section.settings.round_images %} testimonail-image--round{% endif %}">
                    {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                    <img class="lazyload"
                        data-src="{{ img_url }}"
                        data-widths="[180, 360, 540, 720, 900, 1080]"
                        data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                        data-sizes="auto"
                        alt="{{ block.settings.image.alt }}">
                  </div>
                {%- endif -%}
                {%- if block.settings.author != blank -%}
                  <cite>{{ block.settings.author | escape }}</cite>
                {%- endif -%}
                {%- if block.settings.author_info != blank -%}
                  <p>{{ block.settings.author_info | escape }}</p>
                {%- endif -%}
              {%- endif -%}

            </blockquote>
          </div>
        {%- endfor -%}
      </div>
    </div>
  {%- endif -%}
</div>

{% schema %}
  {
    "name": "Customer testimonials",
    "max_blocks": 9,
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Don't take our word for it"
      },
      {
        "type": "checkbox",
        "id": "round_images",
        "label": "Circular images",
        "default": true
      },
      {
        "type": "color",
        "id": "color_background",
        "label": "Background",
        "default": "#f9f9f9"
      },
      {
        "type": "color",
        "id": "color_text",
        "label": "Text",
        "default": "#1c1d1d"
      }
    ],
    "blocks": [
      {
        "type": "testimonial",
        "name": "Testimonial",
        "settings": [
          {
            "type": "select",
            "id": "icon",
            "label": "Icon",
            "default": "5-stars",
            "options": [
              {
                "value": "none",
                "label": "None"
              },
              {
                "value": "quote",
                "label": "Quote"
              },
              {
                "value": "5-stars",
                "label": "5 stars"
              },
              {
                "value": "4-stars",
                "label": "4 stars"
              },
              {
                "value": "3-stars",
                "label": "3 stars"
              },
              {
                "value": "2-stars",
                "label": "2 stars"
              },
              {
                "value": "1-star",
                "label": "1 star"
              }
            ]
          },
          {
            "type": "richtext",
            "id": "testimonial",
            "label": "Text",
            "default": "<p>Add customer reviews and testimonials to showcase your store’s happy customers.</p>"
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Author's image"
          },
          {
            "type": "text",
            "id": "author",
            "label": "Author",
            "default": "Author name"
          },
          {
            "type": "text",
            "id": "author_info",
            "label": "Author info",
            "default": "Los Angeles, CA"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Customer testimonials",
        "category": "Text",
        "blocks": [
          {
            "type": "testimonial"
          },
          {
            "type": "testimonial"
          },
          {
            "type": "testimonial"
          },
          {
            "type": "testimonial"
          },
          {
            "type": "testimonial"
          }
        ]
      }
    ]
  }
{% endschema %}

 

 

0 Likes