Add Trip Advisor icon

[NZA]

Good day,

I recently made a trip advisor account and i would like to add an icon to my store beside the other social media icons on the footer

Here:

I already added the icon to my assets: trip-icon.png

The link that it should lead to is:

https://www.tripadvisor.com/Attraction_Review-g274887-d23641817-Reviews-True_To_Sole-Budapest_Centra...

Can someone help me figure out how to add the icon and make it lead to the link ?

Thank you very much in advance

[LitExtension]

Hi @NZA,

Please send me the code of sections/footer.liquid file. I will check and guide it to help you.

[NZA]

@LitExtension 

Here is the code for the footer section (footer.liquid)

{%- if template.name == 'page' or template.name == 'blog' or template == 'customers/account' or template == 'customers/order' or template == 'customers/addresses' -%}
  {%- assign add_top_margin = true -%}
{%- else -%}
  {%- assign add_top_margin = false -%}
{%- endif -%}

{%- if template == 'page.collections' -%}
  {%- assign add_top_margin = false -%}
{%- endif -%}

<footer id="section-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="footer" class="Footer {% if section.blocks.size <= 2 %}Footer--center{% endif %} {% if add_top_margin %}Footer--withMargin{% endif %}" role="contentinfo">
  <div class="Container">
    {%- if section.blocks.size > 0 -%}
      <div class="Footer__Inner">
        {%- for block in section.blocks -%}
          <div class="Footer__Block Footer__Block--{{ block.type }}" {{ block.shopify_attributes }}>
            {%- case block.type -%}
              {%- when 'text' -%}
                {%- if block.settings.title != blank -%}
                  <h2 class="Footer__Title Heading u-h6">{{ block.settings.title | escape }}</h2>
                {%- endif -%}

                {%- if block.settings.content != blank -%}
                  <div class="Footer__Content Rte">
                    {{ block.settings.content }}
                  </div>
                {%- endif -%}

                {%- if block.settings.show_social_media -%}
                  {% render 'social-media', class: 'Footer__Social', spacing: 'loose' %}
                {%- endif -%}

              {%- when 'links' -%}
                {%- assign linklist = linklists[block.settings.menu] -%}

                {%- if linklist != empty -%}
                  <h2 class="Footer__Title Heading u-h6">{{ linklist.title | escape }}</h2>

                  <ul class="Linklist">
                    {%- for link in linklist.links -%}
                      <li class="Linklist__Item">
                        <a href="{{ link.url }}" class="Link Link--primary">{{ link.title | escape }}</a>
                      </li>
                    {%- endfor -%}
                  </ul>
                {%- endif -%}
            
<!-- // Newly added Footer logo code start -->
            
<a href="https://www.sneakerbox.hu/2021/04/12/true-to-sole-velemeny-megbizhato/">
  <img class="logo_footer" src="https://cdn.shopify.com/s/files/1/2999/5106/files/Footer_Thingy.png?v=1619095439">
</a>
  
<!-- // Newly added Footer logo code end -->  

              {%- when 'newsletter' -%}
                {%- if block.settings.title != blank -%}
                  <h2 class="Footer__Title Heading u-h6">{{ block.settings.title | escape }}</h2>
                {%- endif -%}

                {%- if block.settings.content != blank -%}
                  <div class="Footer__Content Rte">
                    {{ block.settings.content }}
                  </div>
                {%- endif -%}

                {%- form 'customer', id: 'footer-newsletter', class: 'Footer__Newsletter Form' -%}
                  {%- if form.posted_successfully? -%}
                    <p class="Form__Alert Alert Alert--success">{{ 'footer.newsletter.success' | t }}</p>
                  {%- else -%}
                    {%- if form.errors -%}
                      <p class="Form__Alert Alert Alert--error">{{ form.errors.messages['email'] }}</p>
                    {%- endif -%}

                    <input type="hidden" name="contact[tags]" value="newsletter">
                    <input type="email" name="contact[email]" class="Form__Input" aria-label="{{ 'footer.newsletter.input' | t }}" placeholder="{{ 'footer.newsletter.input' | t }}" required>
                    <button type="submit" class="Form__Submit Button Button--primary">{{ 'footer.newsletter.submit' | t }}</button>
                  {%- endif -%}
                {%- endform -%}
            {%- endcase -%}
          </div>
        {%- endfor -%}
      </div>
    {%- endif -%}

    <div class="Footer__Aside">
      {%- if section.settings.show_currency_selector and shop.enabled_currencies.size > 1 -%}
        {%- assign currency_selector = true -%}
      {%- endif -%}

      {%- if section.settings.show_locale_selector and shop.published_locales.size > 1 -%}
        {%- assign locale_selector = true -%}
      {%- endif -%}

      {%- if locale_selector or currency_selector -%}
        <div class="Footer__Localization">
          {%- form 'localization', id: 'localization_form_footer', class: 'Footer__LocalizationForm' -%}
            {%- if currency_selector -%}
              <div class="Footer__LocalizationItem">
                <input type="hidden" name="currency_code" value="{{ form.current_currency.iso_code }}">
                <span class="u-visually-hidden">{{ 'footer.general.currency' | t }}</span>

                <button type="button" class="SelectButton Link Link--primary u-h8" aria-haspopup="true" aria-expanded="false" aria-controls="footer-currency-popover">
                  {{ form.current_currency.iso_code }} {% if form.current_currency.symbol %}{{ form.current_currency.symbol }}{% endif %}
                  {%- render 'icon', icon: 'select-arrow' -%}
                </button>

                <div id="footer-currency-popover" class="Popover Popover--small Popover--noWrap" aria-hidden="true">
                  <header class="Popover__Header">
                    <button type="button" class="Popover__Close Icon-Wrapper--clickable" data-action="close-popover">{% render 'icon' with 'close' %}</button>
                    <span class="Popover__Title Heading u-h4">{{ 'footer.general.currency' | t }}</span>
                  </header>

                  <div class="Popover__Content">
                    <div class="Popover__ValueList Popover__ValueList--center" data-scrollable>
                      {%- for currency in form.available_currencies -%}
                        <button type="submit" name="currency_code" class="Popover__Value {% if currency.iso_code == form.current_currency.iso_code %}is-selected{% endif %} Heading Link Link--primary u-h6"  value="{{ currency.iso_code }}" {% if currency.iso_code == form.current_currency.iso_code %}aria-current="true"{% endif %}>
                          {{ currency.iso_code }} {% if currency.symbol %}{{ currency.symbol }}{% endif %}
                        </button>
                      {%- endfor -%}
                    </div>
                  </div>
                </div>
              </div>
            {%- endif -%}

            {%- if locale_selector -%}
              <div class="Footer__LocalizationItem">
                <input type="hidden" name="locale_code" value="{{ form.current_locale.iso_code }}">
                <span class="u-visually-hidden">{{ 'footer.general.locale' | t }}</span>

                <button type="button" class="SelectButton Link Link--primary u-h8" aria-haspopup="true" aria-expanded="false" aria-controls="footer-locale-popover">
                  {{- form.current_locale.endonym_name -}}
                  {%- render 'icon', icon: 'select-arrow' -%}
                </button>

                <div id="footer-locale-popover" class="Popover Popover--small Popover--noWrap" aria-hidden="true">
                  <header class="Popover__Header">
                    <button type="button" class="Popover__Close Icon-Wrapper--clickable" data-action="close-popover">{% render 'icon' with 'close' %}</button>
                    <span class="Popover__Title Heading u-h4">{{ 'footer.general.locale' | t }}</span>
                  </header>

                  <div class="Popover__Content">
                    <div class="Popover__ValueList Popover__ValueList--center" data-scrollable>
                      {%- for locale in form.available_locales -%}
                        <button type="submit" name="locale_code" class="Popover__Value {% if locale.iso_code == form.current_locale.iso_code %}is-selected{% endif %} Heading Link Link--primary u-h6" value="{{ locale.iso_code }}" {% if locale.iso_code == form.current_locale.iso_code %}aria-current="true"{% endif %}>
                          {{- locale.endonym_name -}}
                        </button>
                      {%- endfor -%}
                    </div>
                  </div>
                </div>
              </div>
            {%- endif -%}
          {%- endform -%}
        </div>
      {%- endif -%}

      <div class="Footer__Copyright">
        <a href="{{ routes.root_url }}" class="Footer__StoreName Heading u-h7 Link Link--secondary">© {{ shop.name }}</a>
        <p class="Footer__ThemeAuthor">{{ powered_by_link }}</p>
      </div>

      {%- if section.settings.show_payment_methods -%}
        {%- capture payment_methods -%}
          {%- for type in shop.enabled_payment_types -%}
            <li class="HorizontalList__Item">{{ type | payment_type_svg_tag }}</li>
          {%- endfor -%}
        {%- endcapture -%}

        {%- if payment_methods != blank -%}
          <ul class="Footer__PaymentList HorizontalList">
            {{ payment_methods }}
          </ul>
        {%- endif -%}
      {%- endif -%}
    </div>
  </div>
</footer>

{%- if settings.footer_background == settings.background -%}
  <style>
    .Footer {
      border-top: 1px solid var(--border-color);
    }
  </style>
{%- endif -%}

{% schema %}
{
  "name": "Footer",
  "class": "shopify-section--footer",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_payment_methods",
      "label": "Show payment methods",
      "info": "Payment method icons are automatically displayed based on your Shopify payment methods.",
      "default": true
    },
    {
      "type": "header",
      "content": "Currency selector",
      "info": "To add a currency, go to your [payment settings.](/admin/settings/payments)"
    },
    {
      "type": "checkbox",
      "id": "show_currency_selector",
      "label": "Show currency selector",
      "default": true
    },
    {
      "type": "header",
      "content": "Language selector",
      "info": "To add a language, go to your [language settings.](/admin/settings/languages)"
    },
    {
      "type": "checkbox",
      "id": "show_locale_selector",
      "label": "Show language selector",
      "default": true
    }
  ],
  "blocks": [
    {
      "type": "text",
      "name": "Text / social media",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "About the shop"
        },
        {
          "type": "richtext",
          "id": "content",
          "label": "Text",
          "default": "<p>Use this text area to tell your customers about your brand and vision. You can change it in the theme settings.</p>"
        },
        {
          "type": "checkbox",
          "id": "show_social_media",
          "label": "Show social media",
          "info": "Make sure to have properly configured your social media in the theme settings.",
          "default": true
        }
      ]
    },
    {
      "type": "links",
      "name": "Links",
      "settings": [
        {
          "type": "link_list",
          "id": "menu",
          "label": "Menu",
          "info": "This menu won't show dropdown items."
        }
      ]
    },
    {
      "type": "newsletter",
      "name": "Newsletter",
      "limit": 1,
      "settings": [
        {
          "type": "paragraph",
          "content": "Customers who subscribe will have their email address added to the \"accepts marketing\" [customer list](/admin/customers?query=&accepts_marketing=1)."
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Newsletter"
        },
        {
          "type": "richtext",
          "id": "content",
          "label": "Text",
          "default": "<p>A short sentence describing what someone will receive by subscribing</p>"
        }
      ]
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "text",
        "settings": {}
      },
      {
        "type": "links",
        "settings": {
          "menu": "footer"
        }
      },
      {
        "type": "newsletter",
        "settings": {}
      }
    ]
  }
}
{% endschema %}

[LitExtension]

Hi @NZA,

Go to snippets/social-media.liquid file and add code in line 113: https://i.imgur.com/HMaSZwH.png

<li class="HorizontalList__Item">
<a href="https://www.tripadvisor.com/Attraction_Review-g274887-d23641817-Reviews-True_To_Sole-Budapest_Centra..." class="Link Link--primary" target="_blank" rel="noopener" aria-label="tripadvisor">
<span class="Icon-Wrapper--clickable">
<img class="Icon" src="{{ 'trip-icon.png' | asset_url }}" width="1em" height="1em"/>
</span>
</a>
</li>

Hope this helps.

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

[elena_t]

Hello, could I ask for your help for the same?
I could add the tripadvisor icon with the link, else I saw that getting the tripadvisor reviews directly on my shopify website is not for free, am I right?
Thank you!!!

[elena_t]

I solved 🙂

[MicheleSem]

How?? Please, help mee