Mgroup Brand Kit

Everything you need to show the Mgroup mark correctly: the logo in any colour as SVG or PNG, the “Design and development by Mgroup Shopify Agency” footer credit for Liquid, HTML, React and WordPress, and the story of why a monkey became the letter M.

Live preview

How the credit renders on a dark and a light footer

Colours of the text are inherited from the site footer; the mark keeps its brand indigo. The mark scales with the footer font size.

Pick your stack

Every install variant, self-contained, one click to copy

Each block includes the mark and the styles it needs. The link is the same in all of them: https://mgroupweb.com/, followed, no UTM. Change the wording or language once — the preview above and every block below update.

Language of “Design and development by”

Default wording. All code blocks below use it.

Shopify Liquid snippet

snippets/mgroup-credit.liquidliquid

Full snippet with parameters. Paste as a new snippet, then render it from the footer section.

{%- comment -%}
  snippets/mgroup-credit.liquid — footer credit for sites built by Mgroup.
  Install: Edit code → Snippets → Add a new snippet → "mgroup-credit" → paste this file.
  Then in sections/footer.liquid, right after the copyright line:  {% render 'mgroup-credit' %}
  Options: {% render 'mgroup-credit', text: 'Designed and built by', anchor: 'Mgroup Shopify Agency', size: '0.8rem' %}
  SEO: <a> wraps only the anchor phrase · dofollow (no rel=nofollow/sponsored) · no UTM · one per page · never hidden.
{%- endcomment -%}
{%- liquid
  assign credit_text = text | default: 'Design and development by'
  assign credit_anchor = anchor | default: 'Mgroup Shopify Agency'
  assign credit_size = size | default: '0.875rem'
  assign credit_url = 'https://mgroupweb.com/'
-%}
<style>
.mg-credit{display:inline-flex;align-items:center;gap:.45em;font:inherit;font-size:{{ credit_size }};line-height:1;color:inherit;opacity:.85;margin:0}
.mg-credit__link{display:inline-flex;align-items:center;gap:.35em;color:inherit;text-decoration:none;font-weight:600;transition:opacity .2s}
.mg-credit__link:hover,.mg-credit__link:focus-visible{opacity:.75;text-decoration:underline}
.mg-credit__mark{width:1.25em;height:1.25em;flex:0 0 auto;display:block;border-radius:50%}
</style>
<p class="mg-credit">
  <span>{{ credit_text }}</span>
  <a class="mg-credit__link" href="{{ credit_url }}" title="Mgroup — Shopify development agency">
    <svg class="mg-credit__mark" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 540 540" fill="none"><circle cx="270" cy="270" r="270" fill="#5A58E2"/><path d="M68.7148 184.633C79.1855 159.812 94.6438 137.419 114.127 118.847C134.158 100.05 157.642 85.334 183.274 75.516C239.693 54.828 301.599 54.828 358.018 75.5161C383.736 85.306 407.305 100.024 427.408 118.847C446.741 137.495 462.106 159.873 472.577 184.633C483.302 211.093 488.535 239.465 487.957 268.019C488.452 296.549 483.136 324.881 472.335 351.283C461.979 376.082 446.693 398.506 427.408 417.19C407.338 436.056 383.76 450.779 358.018 460.521C347.342 464.745 336.322 468.034 325.08 470.353L325.08 469.382C308.731 436.974 289.961 414.763 298.68 395.707C304.13 383.569 326.654 361.478 320.599 362.207C214.638 373.131 188.36 295.935 192.719 291.808C197.079 287.682 222.267 330.163 273.976 340.359C316.966 349.219 385.266 309.894 385.266 309.894C381.511 272.146 341.67 257.095 320.841 240.102C274.461 202.111 294.321 166.305 369.281 158.659C374.609 158.052 357.171 126.251 327.744 124.673C284.754 122.125 172.012 111.686 142.706 181.842C130.596 210.851 145.854 222.867 131.686 259.401C120.666 287.682 104.439 332.227 74.0432 362.449C72.1056 358.808 70.289 355.045 68.5936 351.04C57.4899 324.785 51.8448 296.535 52.0032 268.019C51.8472 239.373 57.5342 210.997 68.7148 184.633ZM347.241 179.293C257.628 199.927 353.296 236.097 369.886 255.638C382.194 268.308 390.855 284.076 394.953 301.276C400.106 297.765 404.426 293.162 407.607 287.793C410.788 282.423 412.752 276.418 413.36 270.204C414.813 230.756 383.086 220.925 373.64 212.914C362.863 203.419 353.916 192.023 347.241 179.293Z" fill="white"/><path d="M235.579 268.514C228.17 264.61 222.19 258.447 218.504 250.914C215.63 244.057 214.748 236.525 215.961 229.188C216.922 222.069 220.25 215.484 225.407 210.496C231.891 205.009 239.701 201.325 248.052 199.815C243.457 197.546 238.386 196.417 233.265 196.522C228.144 196.628 223.123 197.965 218.625 200.422C213.818 203.148 209.694 206.938 206.567 211.502C203.441 216.066 201.394 221.284 200.582 226.76C199.701 232.138 199.935 237.64 201.268 242.923C202.601 248.206 205.006 253.157 208.332 257.469C211.501 261.551 215.69 264.723 220.474 266.662C225.259 268.602 230.469 269.24 235.579 268.514Z" fill="white"/></svg>
    <span>{{ credit_anchor }}</span>
  </a>
</p>

Shopify: render call

sections/footer.liquidliquid

Add right after the copyright line. Second line shows the optional parameters.

{% render 'mgroup-credit' %}

{% render 'mgroup-credit', text: 'Designed and built by', anchor: 'Mgroup Shopify Agency', size: '0.8rem' %}

Plain HTML (inline SVG)

footer templatehtml

Any platform: Webflow embed, static site, Squarespace code block, Shopify without a snippet. Styles included.

<!-- Mgroup footer credit: paste once into the footer, next to the copyright. -->
<style>
.mg-credit{display:inline-flex;align-items:center;gap:.45em;font:inherit;font-size:.875rem;line-height:1;color:inherit;opacity:.85;margin:0}
.mg-credit__link{display:inline-flex;align-items:center;gap:.35em;color:inherit;text-decoration:none;font-weight:600;transition:opacity .2s}
.mg-credit__link:hover,.mg-credit__link:focus-visible{opacity:.75;text-decoration:underline}
.mg-credit__mark{width:1.25em;height:1.25em;flex:0 0 auto;display:block;border-radius:50%}
</style>
<p class="mg-credit">
  <span>Design and development by</span>
  <a class="mg-credit__link" href="https://mgroupweb.com/" title="Mgroup — Shopify development agency">
    <svg class="mg-credit__mark" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 540 540" fill="none"><circle cx="270" cy="270" r="270" fill="#5A58E2"/><path d="M68.7148 184.633C79.1855 159.812 94.6438 137.419 114.127 118.847C134.158 100.05 157.642 85.334 183.274 75.516C239.693 54.828 301.599 54.828 358.018 75.5161C383.736 85.306 407.305 100.024 427.408 118.847C446.741 137.495 462.106 159.873 472.577 184.633C483.302 211.093 488.535 239.465 487.957 268.019C488.452 296.549 483.136 324.881 472.335 351.283C461.979 376.082 446.693 398.506 427.408 417.19C407.338 436.056 383.76 450.779 358.018 460.521C347.342 464.745 336.322 468.034 325.08 470.353L325.08 469.382C308.731 436.974 289.961 414.763 298.68 395.707C304.13 383.569 326.654 361.478 320.599 362.207C214.638 373.131 188.36 295.935 192.719 291.808C197.079 287.682 222.267 330.163 273.976 340.359C316.966 349.219 385.266 309.894 385.266 309.894C381.511 272.146 341.67 257.095 320.841 240.102C274.461 202.111 294.321 166.305 369.281 158.659C374.609 158.052 357.171 126.251 327.744 124.673C284.754 122.125 172.012 111.686 142.706 181.842C130.596 210.851 145.854 222.867 131.686 259.401C120.666 287.682 104.439 332.227 74.0432 362.449C72.1056 358.808 70.289 355.045 68.5936 351.04C57.4899 324.785 51.8448 296.535 52.0032 268.019C51.8472 239.373 57.5342 210.997 68.7148 184.633ZM347.241 179.293C257.628 199.927 353.296 236.097 369.886 255.638C382.194 268.308 390.855 284.076 394.953 301.276C400.106 297.765 404.426 293.162 407.607 287.793C410.788 282.423 412.752 276.418 413.36 270.204C414.813 230.756 383.086 220.925 373.64 212.914C362.863 203.419 353.916 192.023 347.241 179.293Z" fill="white"/><path d="M235.579 268.514C228.17 264.61 222.19 258.447 218.504 250.914C215.63 244.057 214.748 236.525 215.961 229.188C216.922 222.069 220.25 215.484 225.407 210.496C231.891 205.009 239.701 201.325 248.052 199.815C243.457 197.546 238.386 196.417 233.265 196.522C228.144 196.628 223.123 197.965 218.625 200.422C213.818 203.148 209.694 206.938 206.567 211.502C203.441 216.066 201.394 221.284 200.582 226.76C199.701 232.138 199.935 237.64 201.268 242.923C202.601 248.206 205.006 253.157 208.332 257.469C211.501 261.551 215.69 264.723 220.474 266.662C225.259 268.602 230.469 269.24 235.579 268.514Z" fill="white"/></svg>
    <span>Mgroup Shopify Agency</span>
  </a>
</p>

HTML with

footer template + assetshtml

If inline SVG is not allowed. Download the mark below and adjust the src path.

<!-- Upload mgroup-mark.svg to your assets, then: -->
<p class="mg-credit" style="display:inline-flex;align-items:center;gap:.45em;font-size:.875rem;line-height:1;opacity:.85;margin:0">
  <span>Design and development by</span>
  <a href="https://mgroupweb.com/" title="Mgroup — Shopify development agency" style="display:inline-flex;align-items:center;gap:.35em;color:inherit;text-decoration:none;font-weight:600">
    <img src="/assets/mgroup-mark.svg" alt="" width="18" height="18" loading="lazy" style="width:1.25em;height:1.25em;border-radius:50%">
    <span>Mgroup Shopify Agency</span>
  </a>
</p>

React / Next.js / Hydrogen

components/MgroupCredit.jsxjsx

Component with props; styles from the CSS block.

// components/MgroupCredit.jsx — Next.js / React / Remix (Hydrogen too)
export default function MgroupCredit({ text = "Design and development by", anchor = "Mgroup Shopify Agency" }) {
  return (
    <p className="mg-credit">
      <span>{text}</span>
      <a className="mg-credit__link" href="https://mgroupweb.com/" title="Mgroup — Shopify development agency">
        <svg className="mg-credit__mark" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 540 540" fill="none">
          
          <circle cx="270" cy="270" r="270" fill="#5A58E2"/>
          <path d="M68.7148 184.633C79.1855 159.812 94.6438 137.419 114.127 118.847C134.158 100.05 157.642 85.334 183.274 75.516C239.693 54.828 301.599 54.828 358.018 75.5161C383.736 85.306 407.305 100.024 427.408 118.847C446.741 137.495 462.106 159.873 472.577 184.633C483.302 211.093 488.535 239.465 487.957 268.019C488.452 296.549 483.136 324.881 472.335 351.283C461.979 376.082 446.693 398.506 427.408 417.19C407.338 436.056 383.76 450.779 358.018 460.521C347.342 464.745 336.322 468.034 325.08 470.353L325.08 469.382C308.731 436.974 289.961 414.763 298.68 395.707C304.13 383.569 326.654 361.478 320.599 362.207C214.638 373.131 188.36 295.935 192.719 291.808C197.079 287.682 222.267 330.163 273.976 340.359C316.966 349.219 385.266 309.894 385.266 309.894C381.511 272.146 341.67 257.095 320.841 240.102C274.461 202.111 294.321 166.305 369.281 158.659C374.609 158.052 357.171 126.251 327.744 124.673C284.754 122.125 172.012 111.686 142.706 181.842C130.596 210.851 145.854 222.867 131.686 259.401C120.666 287.682 104.439 332.227 74.0432 362.449C72.1056 358.808 70.289 355.045 68.5936 351.04C57.4899 324.785 51.8448 296.535 52.0032 268.019C51.8472 239.373 57.5342 210.997 68.7148 184.633ZM347.241 179.293C257.628 199.927 353.296 236.097 369.886 255.638C382.194 268.308 390.855 284.076 394.953 301.276C400.106 297.765 404.426 293.162 407.607 287.793C410.788 282.423 412.752 276.418 413.36 270.204C414.813 230.756 383.086 220.925 373.64 212.914C362.863 203.419 353.916 192.023 347.241 179.293Z" fill="white"/>
          <path d="M235.579 268.514C228.17 264.61 222.19 258.447 218.504 250.914C215.63 244.057 214.748 236.525 215.961 229.188C216.922 222.069 220.25 215.484 225.407 210.496C231.891 205.009 239.701 201.325 248.052 199.815C243.457 197.546 238.386 196.417 233.265 196.522C228.144 196.628 223.123 197.965 218.625 200.422C213.818 203.148 209.694 206.938 206.567 211.502C203.441 216.066 201.394 221.284 200.582 226.76C199.701 232.138 199.935 237.64 201.268 242.923C202.601 248.206 205.006 253.157 208.332 257.469C211.501 261.551 215.69 264.723 220.474 266.662C225.259 268.602 230.469 269.24 235.579 268.514Z" fill="white"/>
        </svg>
        <span>{anchor}</span>
      </a>
    </p>
  );
}
// CSS (global or module): see the "CSS only" block below.

WordPress (functions.php)

child theme functions.phpphp

Prints the credit via wp_footer. In block themes you can instead paste the HTML variant into a Custom HTML block in the Footer template part.

<?php
// functions.php of the child theme — prints the credit after the theme's footer copyright.
// If the theme has a "footer credits" hook use it; otherwise wp_footer is a safe fallback (renders at the end of <body>).
add_action( 'wp_footer', function () {
    echo <<<HTML
<style>
.mg-credit{display:inline-flex;align-items:center;gap:.45em;font:inherit;font-size:.875rem;line-height:1;color:inherit;opacity:.85;margin:0}
.mg-credit__link{display:inline-flex;align-items:center;gap:.35em;color:inherit;text-decoration:none;font-weight:600;transition:opacity .2s}
.mg-credit__link:hover,.mg-credit__link:focus-visible{opacity:.75;text-decoration:underline}
.mg-credit__mark{width:1.25em;height:1.25em;flex:0 0 auto;display:block;border-radius:50%}
</style>
<p class="mg-credit">
  <span>Design and development by</span>
  <a class="mg-credit__link" href="https://mgroupweb.com/" title="Mgroup — Shopify development agency">
    <svg class="mg-credit__mark" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 540 540" fill="none"><circle cx="270" cy="270" r="270" fill="#5A58E2"/><path d="M68.7148 184.633C79.1855 159.812 94.6438 137.419 114.127 118.847C134.158 100.05 157.642 85.334 183.274 75.516C239.693 54.828 301.599 54.828 358.018 75.5161C383.736 85.306 407.305 100.024 427.408 118.847C446.741 137.495 462.106 159.873 472.577 184.633C483.302 211.093 488.535 239.465 487.957 268.019C488.452 296.549 483.136 324.881 472.335 351.283C461.979 376.082 446.693 398.506 427.408 417.19C407.338 436.056 383.76 450.779 358.018 460.521C347.342 464.745 336.322 468.034 325.08 470.353L325.08 469.382C308.731 436.974 289.961 414.763 298.68 395.707C304.13 383.569 326.654 361.478 320.599 362.207C214.638 373.131 188.36 295.935 192.719 291.808C197.079 287.682 222.267 330.163 273.976 340.359C316.966 349.219 385.266 309.894 385.266 309.894C381.511 272.146 341.67 257.095 320.841 240.102C274.461 202.111 294.321 166.305 369.281 158.659C374.609 158.052 357.171 126.251 327.744 124.673C284.754 122.125 172.012 111.686 142.706 181.842C130.596 210.851 145.854 222.867 131.686 259.401C120.666 287.682 104.439 332.227 74.0432 362.449C72.1056 358.808 70.289 355.045 68.5936 351.04C57.4899 324.785 51.8448 296.535 52.0032 268.019C51.8472 239.373 57.5342 210.997 68.7148 184.633ZM347.241 179.293C257.628 199.927 353.296 236.097 369.886 255.638C382.194 268.308 390.855 284.076 394.953 301.276C400.106 297.765 404.426 293.162 407.607 287.793C410.788 282.423 412.752 276.418 413.36 270.204C414.813 230.756 383.086 220.925 373.64 212.914C362.863 203.419 353.916 192.023 347.241 179.293Z" fill="white"/><path d="M235.579 268.514C228.17 264.61 222.19 258.447 218.504 250.914C215.63 244.057 214.748 236.525 215.961 229.188C216.922 222.069 220.25 215.484 225.407 210.496C231.891 205.009 239.701 201.325 248.052 199.815C243.457 197.546 238.386 196.417 233.265 196.522C228.144 196.628 223.123 197.965 218.625 200.422C213.818 203.148 209.694 206.938 206.567 211.502C203.441 216.066 201.394 221.284 200.582 226.76C199.701 232.138 199.935 237.64 201.268 242.923C202.601 248.206 205.006 253.157 208.332 257.469C211.501 261.551 215.69 264.723 220.474 266.662C225.259 268.602 230.469 269.24 235.579 268.514Z" fill="white"/></svg>
    <span>Mgroup Shopify Agency</span>
  </a>
</p>
HTML;
}, 5 );

CSS only

your stylesheetcss

The four rules used by every variant, if you prefer to keep styles out of the markup.

.mg-credit{display:inline-flex;align-items:center;gap:.45em;font:inherit;font-size:.875rem;line-height:1;color:inherit;opacity:.85;margin:0}
.mg-credit__link{display:inline-flex;align-items:center;gap:.35em;color:inherit;text-decoration:none;font-weight:600;transition:opacity .2s}
.mg-credit__link:hover,.mg-credit__link:focus-visible{opacity:.75;text-decoration:underline}
.mg-credit__mark{width:1.25em;height:1.25em;flex:0 0 auto;display:block;border-radius:50%}

Need the mark as a file? Download mgroup-mark.svg (540×540, indigo #5A58E2).

Brand assets

Download the Mgroup logo in any colour

Pick a brand colour or type your own HEX, check the preview, download SVG or PNG. Marks come as a filled badge (colour background, contrasting M) or as a mono glyph (transparent, M in the chosen colour).

Wordmark

Full “mgroup” logotype, 232×56. Use on light or dark surfaces in a colour with enough contrast.

Round mark

Circle badge with the M, 540×540. Favicon, social avatar, footer credit.

Square mark

Square badge with the M, 500×500. App icons, tiles, sharp-corner layouts.

Brand colours: Indigo #5A58E2, Cyan #40D0FF, Navy #1F2544. Keep clear space around the mark of at least the M’s stroke width; do not stretch, rotate or add effects. Wordmark and marks are also available as originals: wordmark, round, square.

Brand story

The story behind the mark

Why a monkey, why the M, and what the mark in a footer means. Short version in nine languages; the full story in English and Ukrainian.

In the beginning there was a monkey. Every evolution starts with one: the first to try something different. In 2015, in Zhytomyr, Ukraine, a team called Monkey Group began building stores on Shopify while everyone else was on WordPress and Magento. A Shopify partner a year later, a Select Partner after that. The odd choice turned out to be the next step.

The mark is the moment of transition. A monkey standing up into the letter M. We kept it when Monkey Group shortened to Mgroup, because that is the work: moving stores up to the next step so nothing dies on the way — not a product, not a customer, not a ranking.

The adaptable survive. Not the biggest budget or the most expensive theme, but the store that changes faster than the market. So we build for cheap change. 500+ stores carry this mark in their footer. More than $100M in sales has passed through them since 2016.

Read the full story

In the beginning there was a monkey

Every story of evolution begins with a monkey. Not because it was the strongest or the fastest, but because it was the first to try something different: pick up a stone, climb down from the tree, walk where nobody had walked.

Ours began the same way, in Zhytomyr, Ukraine, in 2015. A few developers called themselves Monkey Group and took on what almost nobody in the country was doing: building stores on Shopify while everyone around them was assembling sites on WordPress and Magento. It looked like an odd choice. A year later we were a Shopify partner. A few years later, a Shopify Select Partner. The odd choice turned out to be the next step.

The letter a monkey stands up into

Look closely at the mark. It is not just a monkey. It is a monkey becoming the letter M: the head, the outstretched arm, the tail that has almost straightened into a line. The moment between what you were and what you are becoming. We kept that moment in the mark when Monkey Group shortened to Mgroup, because that moment is our work.

A store that comes to us is always at the edge of a step. It has outgrown WooCommerce. It is suffocating on a Magento 1 that has not seen an update in six years. It needs B2B and the platform cannot do it. It has to survive Black Friday and the theme falls over at the ten-thousandth visitor. We do not build stores from scratch for the beauty of it. We move them up to the next step so that nothing dies on the way: not a product, not a customer, not a ranking.

It is not the strongest that survives

The idea most often attributed to Darwin is the one we repeat to clients without the quotation marks: it is the most adaptable that survives. Not the biggest budget, not the most expensive theme, not the loudest launch. The store that can change faster than the market.

So we build for cheap change. Sections instead of hard-coded layouts, so marketing changes a page without a developer. Metafields instead of specs pasted into descriptions, so data outlives a redesign. Queues instead of direct integrations, so an order spike does not take down the ERP. Every decision passes one question: will this store be able to evolve next time without us? If yes, we did the job right.

We evolve too

In ten years commerce has gone through several steps, and we went through them with it. Liquid themes to Online Store 2.0. Checkout scripts to Checkout Extensibility and Functions. Monolithic stores to Hydrogen and headless where it earns its cost. Search on Google to answers in ChatGPT, and stores that have to be readable by agents as well as by people. Three apps in the Shopify App Store grew out of problems we solved for clients and are now used by stores we have never met.

We do not know what commerce will look like in five years. We only know it will change, and that the mark in the footer of our sites will mean the same thing: a team that moves businesses up to the next step was here.

The mark in the footer

When you see the small monkey in a circle at the bottom of a store, it is not an agency advert. It is a stage marker. This store went through an evolution and survived. 500+ stores carry the mark. More than $100 million in sales has passed through them since 2016.

We are Mgroup. The monkey as the evolution of intelligence. We grow your business from primitive to perfected.

FAQ

Footer credit FAQ

Is the Mgroup footer credit dofollow?

Yes, and it must stay that way: no rel="nofollow", "sponsored" or "ugc" on the link. It is a standard designer credit, the same kind every agency and theme vendor places, and it passes authority to mgroupweb.com only when it is a plain followed link.

Where exactly should the credit go in a Shopify theme?

In the footer section next to the copyright line, so it renders on every page. In Dawn and its children that is sections/footer.liquid, the footer__content-bottom block. Add {% render 'mgroup-credit' %} right after the copyright <small> element.

Can I change the wording?

Yes. The Liquid snippet takes text, anchor and size parameters. Keep the brand in the anchor ("Mgroup Shopify Agency") and keep "Design and development by" outside the link; the link should wrap only the anchor phrase.

Does the credit slow the page down?

No. The round mark is a 2.3 KB inline SVG, there are four CSS rules and no JavaScript. Nothing is fetched from another domain.

Why is the SVG marked aria-hidden?

So screen readers and search engines read the link text once, as "Mgroup Shopify Agency". Without aria-hidden an accessible name on the SVG would duplicate the brand inside the anchor.

Built by Mgroup

Need a store that deserves the credit?

Mgroup designs, builds and migrates Shopify and Shopify Plus stores — theme development, apps, integrations and SEO — and stays on after launch.