Article

<header class="container">
    <nav class="row">
        <div class="breadcrumb">
            <strong>groupmate</strong>/<span>docs</span>
        </div>

        <div id="logo">
            <a href="/">
                <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5" clip-rule="evenodd" viewBox="0 0 586 586">
                    <path id="Circle-Bottom-Arch" fill="none" d="M0 0h585.964v585.964H0z" />
                    <clipPath id="_clip1">
                        <path d="M0 0h585.964v585.964H0z" />
                    </clipPath>
                    <g clip-path="url(#_clip1)">
                        <g id="TextPath">
                            <circle id="BoundingCircle" cx="292.982" cy="292.982" r="292.982" fill="none" stroke="#ff9c11" stroke-width="2.08" />
                            <g id="Text" fill="#2d2c2b" fill-rule="nonzero">
                                <path d="m44.479 265.731 48.767-.078.012 8.067-7.241.287q4.035 1.276 6.194 3.702 2.157 2.426 2.163 5.818.012 7.15-9.152 8.997l-.184.092q4.403 1.277 6.882 3.977t2.485 6.459q.009 5.775-3.974 8.393-3.984 2.62-12.967 2.633l-32.908.053-.014-8.984 31.349-.049q5.867-.01 8.157-1.251t2.285-3.808-2.527-4.166q-2.523-1.6-8.115-1.592l-31.167.05-.014-8.8 31.35-.05q5.592-.009 8.019-1.159 2.428-1.149 2.424-3.808-.005-2.567-2.528-4.212-2.523-1.646-8.115-1.637l-31.167.049zM59.176 377.245q-2.368-6.356-1.224-12.212 1.145-5.855 5.537-10.475t11.694-7.341q7.3-2.72 13.646-2.1 6.344.62 11.042 4.299t7.065 10.035 1.223 12.212-5.537 10.476q-4.392 4.62-11.693 7.34-7.302 2.72-13.647 2.101-6.344-.62-11.041-4.299-4.696-3.68-7.065-10.036m7.989-2.976q2.144 5.756 7.521 7.322 5.377 1.567 12.85-1.217t10.514-7.488q3.041-4.703.897-10.458t-7.521-7.323-12.851 1.218q-7.473 2.784-10.514 7.487t-.896 10.459M91.966 437.525l36.954-31.822 5.563 6.46-6.549 5.881q5.076-1.832 9.609-.29 4.532 1.54 7.882 5.43 3.53 4.098 4.051 8.427t-1.442 8.44q-1.965 4.11-5.924 7.52l-23.825 20.517-6.041-7.016 22.019-18.961q9.656-8.315 3.315-15.678-3.29-3.82-8.094-4.341-4.803-.52-9.596 3.607l-21.88 18.842zM172.997 509.492q-5.931-3.294-8.865-8.488-2.935-5.195-2.597-11.561.337-6.366 4.12-13.178t9.008-10.463q5.226-3.651 11.187-3.906t11.891 3.039 8.865 8.488q2.934 5.195 2.597 11.561t-4.12 13.177-9.009 10.463-11.186 3.906q-5.961.255-11.891-3.038m4.138-7.453q5.37 2.982 10.475.679 5.106-2.302 8.978-9.274t3.128-12.523-6.114-8.533-10.475-.68q-5.105 2.303-8.978 9.275-3.871 6.972-3.127 12.523t6.113 8.533M251.071 536.142l1.811-11.963 12.326 1.865-1.811 11.964zM329.2 538.103l-19.036-45.88 9.519-1.95 13.218 35.75.105-31.462 7.723-1.582 12.468 28.886-1.904-38.067 9.519-1.95.627 49.651-10.237 2.097-11.648-26.715-.206 29.143zM427.898 502.941q-5.753 3.593-11.719 3.644t-11.372-3.327-9.534-9.987-4.79-12.949q-.664-6.34 2.001-11.679t8.417-8.931q5.754-3.594 11.72-3.645t11.372 3.327q5.406 3.38 9.533 9.988 4.128 6.608 4.791 12.949.663 6.34-2.001 11.678t-8.418 8.932m-4.515-7.231q5.208-3.253 5.668-8.835.458-5.582-3.766-12.347t-9.442-8.801q-5.217-2.038-10.426 1.215t-5.668 8.836q-.459 5.582 3.766 12.346t9.441 8.802q5.217 2.037 10.427-1.216M481.018 458.265l-6.19-4.733 7.516-9.831-26.362-20.154-7.516 9.831-6.19-4.732 11.97-15.657 7.908 5.353q-6.126-7.683-.448-15.111l6.292-8.229 6.408 4.899-6.068 7.938q-6.514 8.52 2.807 15.646l16.822 12.861 9.242-12.089 6.19 4.733zM528.117 383.295l-62.275-18.911 2.69-8.859 39.119 11.879-17.114-28.189 3.436-11.315 14.283 24.264 32.619-10.883-3.169 10.438-25.27 8.133 6.179 10.882 12.192 3.702zM546.021 276.311q.32 6.5-1.648 11.278-1.968 4.777-5.55 7.524-3.582 2.745-8.141 3.337l-1.013-9.404q3.992-.93 6.137-3.972 2.145-3.043 1.879-8.445-.243-4.944-1.749-7.577t-4.436-2.489q-1.831.09-3.022 1.066t-1.937 3.537-1.423 7.458q-.927 7.296-2.692 11.513t-4.521 6.05-6.875 2.036q-6.41.315-10.903-4.282t-4.953-13.936q-.319-6.501 1.669-10.866t5.489-6.878a19.8 19.8 0 0 1 7.682-3.361l1.013 9.404q-3.534.908-5.64 3.81t-1.881 7.481q.243 4.944 2.276 7.093t4.78 2.013q3.296-.161 4.635-2.798 1.338-2.635 2.205-9.286.916-7.479 2.547-11.643t4.299-5.902 6.697-1.935q6.591-.325 10.615 4.985 4.024 5.309 4.461 14.189" />
                            </g>
                        </g>
                        <circle id="Eye" cx="294.89" cy="289.528" r="22.859" fill="#2d2c2b" />
                        <path id="Flower" fill="#2d2c2b" d="M214.73 290.529a1.334 1.334 0 0 0-.001-2.002c-11.452-10.269-18.663-25.177-18.663-41.755 0-30.945 25.124-56.068 56.069-56.068 16.578 0 31.485 7.21 41.754 18.664a1.335 1.335 0 0 0 2.002-.001c10.269-11.453 25.177-18.663 41.755-18.663 30.945 0 56.069 25.123 56.069 56.068 0 16.578-7.211 31.486-18.664 41.754a1.338 1.338 0 0 0 0 2.003c11.453 10.269 18.664 25.176 18.664 41.755 0 30.945-25.124 56.068-56.069 56.068-16.578 0-31.486-7.21-41.754-18.664a1.338 1.338 0 0 0-2.002.001c-10.27 11.453-25.177 18.663-41.755 18.663-30.945 0-56.069-25.123-56.069-56.068 0-16.579 7.211-31.486 18.664-41.755m59.33-73.834a1.334 1.334 0 0 0 .422-2.374 39.23 39.23 0 0 0-22.347-6.951c-21.747 0-39.402 17.656-39.402 39.402a39.2 39.2 0 0 0 6.953 22.346 1.33 1.33 0 0 0 2.367-.421c7.17-25.066 26.94-44.837 52.007-52.002m93.664 52.003a1.333 1.333 0 0 0 2.373.422 39.23 39.23 0 0 0 6.951-22.348c0-21.746-17.656-39.402-39.402-39.402a39.2 39.2 0 0 0-22.346 6.954 1.33 1.33 0 0 0 .421 2.367c25.067 7.169 44.837 26.94 52.003 52.007m-52.004 93.663a1.333 1.333 0 0 0-.421 2.374 39.23 39.23 0 0 0 22.347 6.95c21.746 0 39.402-17.655 39.402-39.401a39.2 39.2 0 0 0-6.953-22.346 1.334 1.334 0 0 0-2.368.421c-7.169 25.066-26.939 44.837-52.007 52.002m-93.663-52.003a1.333 1.333 0 0 0-2.373-.422 39.22 39.22 0 0 0-6.951 22.348c0 21.746 17.655 39.401 39.402 39.401a39.2 39.2 0 0 0 22.345-6.953 1.33 1.33 0 0 0-.421-2.367c-25.066-7.169-44.836-26.94-52.002-52.007m79.549-79.524a60 60 0 0 0-6.716-.378c-2.27 0-4.511.128-6.715.378a59 59 0 0 0-4.495.686c-23.62 4.545-42.253 23.178-46.798 46.798a59.554 59.554 0 0 0 0 22.42c4.545 23.62 23.178 42.253 46.798 46.798a59.4 59.4 0 0 0 11.21 1.064q3.408-.002 6.716-.378a59 59 0 0 0 4.494-.686c23.62-4.545 42.253-23.178 46.798-46.798q.428-2.22.686-4.495c.25-2.204.378-4.445.378-6.715a59.6 59.6 0 0 0-1.064-11.21c-4.545-23.62-23.178-42.253-46.798-46.798a59 59 0 0 0-4.494-.686" />
                    </g>
                </svg>

            </a>
        </div>

        <div class="action_buttons">
            <button type="button" class="btn btn--small" popovertarget="menu" popovertargetaction="toggle">
                Menu
            </button>
        </div>
    </nav>
</header>

<div class="container">
    <div class="row --center">
        <div class="article_header d_grid-10">
            <h1 class="h1 h--short">How to add groupmate to
                <br />
                your Shopify theme
            </h1>

            <ul class="tag_list --center">
                <li><a href="#groupmate" class="tag">#groupmate</a></li>
                <li><a href="#howto" class="tag">#howto</a></li>
            </ul>

        </div>

        <div class="--no_desktop --no_smart">
            <h1 class="h1 h--long">We create Shopify-Apps that turn complicated
                workarounds into simple workflows.</h1>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="d_grid-12 m_grid-4">
            <div class="mediawrap_iframe --bleed_mobile">
                <iframe src="https://www.loom.com/embed/3fb48c3ea78f41e0a0d144d6d53c4084?sid=56cc39c9-a046-436c-8ff1-45e6b176b7bd&amp;hideEmbedTopBar=true" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row --center">
        <div class="d_grid-7">
            <div class="rte">
                <p>
                    <strong class="font--large">
                        Follow this simple step-by-step guide to integrate the groupmate
                        widget into your Shopify Theme 2.0. No coding required.
                    </strong>
                </p>

                <p>At mono.works, we built Shopify Apps that turn complicated workarronds
                    into simple workflows. I stole this headline from a newsletter from
                    <a href="https://world.hey.com/jason">Jason Fried</a>
                    and see absolutely no shame in admitting that.
                </p>

                <p>Right now, I'm working on a component libray for the new mono.work's
                    website. I stumbled over a new way to define color, OKLCH, which is
                    pretty cool.</p>

                <h2>Integration Guide for 2.0 Themes</h2>
                <ol>
                    <li>In the Shopify Admin, open the Theme Editor by clicking the
                        <em>Customize</em>
                        button in the
                        <em>Online Store</em>
                        section
                    </li>
                    <li>Navigate to a product page, ideally the one you've created a group
                        for</li>
                    <li>In the left sidebar of the editor, locate the product information
                        area and click
                        <em>Add Block</em>
                        by hovering between two existing entries
                    </li>
                    <li>Switch from
                        <em>Blocks</em>
                        to
                        <em>Apps</em>
                        and select the
                        <em>Cross-Link Swatches</em>
                        block
                    </li>
                    <li>Drag and drop the block right above the variant picker (or where you
                        want it to appear)</li>
                    <li>Save the changes on your Theme</li>
                    <li>Manually confirm the installation by clicking the
                        <em>Confirm Installation</em>
                        Button below.
                    </li>
                </ol>

            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row --center">
        <div class="d_grid-7 m_grid-4">
            <div class="feedback_card">
                <h3>Was this article helpful?</h3>
                <div class="btn_group">
                    <button type="button" class="btn btn--small" data-feedback="negative"><i class="ph-bold ph-thumbs-down"></i>No</button>
                    <button type="button" class="btn btn--small" data-feedback="positive"><i class="ph-bold ph-thumbs-up"></i>Yes</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row --center">
        <div class="d_grid-7 m_grid-4 flow--module">
            <legend>Recommended Reading:</legend>
            <ul class="article_teaser_list">
                <li class="article_teaser">
                    <a href="#article" class="card --subtle">
                        <strong class="title">Guide: groupmate full video walktrough</strong>
                        <ul class="tag_list --inline">
                            <li><span class="tag">#groupmate</span></li>
                            <li><span class="tag">#howto</span></li>
                        </ul>

                    </a>
                </li>

                <li class="article_teaser">
                    <a href="#article" class="card --subtle">
                        <strong class="title">Developer Guide: Integrate groupmate on
                            Collection Pages</strong>
                        <ul class="tag_list --inline">
                            <li><span class="tag">#groupmate</span></li>
                            <li><span class="tag">#howto</span></li>
                        </ul>

                    </a>
                </li>

                <li class="article_teaser">
                    <a href="#article" class="card --subtle">
                        <strong class="title">groupmate Setup Guide</strong>
                        <ul class="tag_list --inline">
                            <li><span class="tag">#groupmate</span></li>
                            <li><span class="tag">#howto</span></li>
                        </ul>

                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>