Skip to content

Logo

The logo module is used to render a single logo on the page.

Configuration parameters

customTitle

string (optional) A string containing the title of an image. If not provided, the logo will use the website's name as a title.

image

  • image represents an object with the following properties:
    • width float type, represents the width of the image
    • height float type, represents the height of the image
    • file_name string type, represents the name of the image file
    • uploaded_file string type, represents the name of the uploaded image file

Module source code

{% from "@macros/image.twig" import image %}

{% set shopInfo = ObjectApi.getShopInfo() %}
{% set shopUrls = ObjectApi.getShopUrls() %}

{% if moduleConfig.image %}
    <figure class="logo">
        <a href="{{ shopUrls.mainPageUrl }}">
            {{
                image({
                    img: {
                        src: moduleConfig.image.paths.original,
                        width: moduleConfig.image.width,
                        height: moduleConfig.image.height,
                        alt: moduleConfig.customTitle ?: "",
                        title: moduleConfig.customTitle ?: shopInfo.name,
                        class: 'logo',
                        fetchpriority: 'high'
                    }
                },
                [
                    {
                        src: moduleConfig.image.paths.original,
                        type: moduleConfig.image.format
                    }
                ]
            )}}
        </a>
    </figure>
{% else %}
    <a href="{{ shopUrls.mainPageUrl }}" class="logo-text">
        {{ moduleConfig.customTitle }}
    </a>
{% endif %}

<script type="application/ld+json">
    {
        "@context": [
            "http://schema.org/",
            { "@base": "{{ shopUrls.mainPageUrl.absolute }}" }
        ],
        "@type": "OnlineStore",
        "@id": "{{ shopInfo.id }}",
        "name": "{{ shopInfo.name }}",
        "legalName": "{{ shopInfo.name }}",
        "logo": "{{ moduleConfig.image.paths.original }}",
        "url": "{{ shopUrls.mainPageUrl.absolute }}"
    }
</script>

Macros reference

Used Object Api methods

Module configuration schema

[
  {
    "state": "unfolded",
    "label": "General settings",
    "elements": [
      {
        "type" : "imageUpload",
        "name" : "image",
        "label" : "Graphic logo",
        "options": {
          "requireImageSize" : true,
          "allowedExtensions" : ["webp", "svg", "jpeg", "jpg", "png", "gif"]
        }
      },
      {
        "type": "text",
        "name": "customTitle",
        "label": "Text logo",
        "isRequired" : true,
        "supportsTranslations" : true,
        "defaultValue": "Shoper demo no logo",
        "labelDescription": "The text will appear when the graphic logo is not added. It will also be used as an \"alt\" tag.",
        "hint" : "The name of your shop, which can be displayed instead of a graphic logo. This text will also be used as \"alt\" tag: read by software for the blind and analyzed when search engines index the page."
      }
    ]
  }
]