<header class="container">
<nav class="row">
<div class="breadcrumb">
<strong>groupmate</strong>/<span>docs</span>
</div>
<div id="logo">
<a href="/">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="28px" height="28px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<rect id="Artboard1" x="0" y="0" width="28" height="28" style="fill:none;" />
<clipPath id="_clip1">
<rect id="Artboard11" serif:id="Artboard1" x="0" y="0" width="28" height="28" />
</clipPath>
<g clip-path="url(#_clip1)">
<g transform="matrix(0.488056,0,0,0.488056,-662.642,-422.158)">
<circle id="eye" cx="1386.4" cy="893.664" r="6.635" />
</g>
<g transform="matrix(0.590274,0,0,0.590274,-886.378,-447.579)">
<path d="M1505.55,782.75C1505.76,782.546 1505.88,782.267 1505.88,781.975C1505.88,781.683 1505.76,781.403 1505.55,781.2C1503.13,778.765 1501.64,775.412 1501.64,771.713C1501.64,764.286 1507.67,758.256 1515.1,758.256C1518.79,758.256 1522.15,759.753 1524.58,762.172C1524.78,762.382 1525.06,762.5 1525.36,762.499C1525.65,762.499 1525.93,762.381 1526.13,762.171C1528.57,759.753 1531.92,758.256 1535.62,758.256C1543.04,758.256 1549.07,764.286 1549.07,771.713C1549.07,775.412 1547.58,778.765 1545.16,781.199C1544.95,781.402 1544.83,781.682 1544.83,781.974C1544.83,782.266 1544.95,782.545 1545.16,782.748C1547.58,785.183 1549.07,788.536 1549.07,792.236C1549.07,799.662 1543.04,805.692 1535.62,805.692C1531.92,805.692 1528.57,804.196 1526.13,801.776C1525.93,801.567 1525.65,801.449 1525.36,801.449C1525.07,801.449 1524.79,801.568 1524.58,801.777C1522.15,804.196 1518.79,805.692 1515.1,805.692C1507.67,805.692 1501.64,799.662 1501.64,792.236C1501.64,788.536 1503.13,785.183 1505.55,782.75ZM1518.79,765.02C1519.2,764.874 1519.49,764.492 1519.5,764.055C1519.52,763.618 1519.27,763.215 1518.87,763.035C1517.71,762.536 1516.44,762.256 1515.1,762.256C1509.88,762.256 1505.64,766.494 1505.64,771.713C1505.64,773.055 1505.92,774.332 1506.42,775.488C1506.6,775.883 1507,776.13 1507.44,776.112C1507.87,776.094 1508.25,775.815 1508.39,775.407C1510.25,770.654 1514.04,766.865 1518.79,765.02ZM1542.31,775.41C1542.46,775.822 1542.84,776.103 1543.28,776.121C1543.71,776.139 1544.12,775.89 1544.3,775.491C1544.79,774.332 1545.07,773.055 1545.07,771.713C1545.07,766.494 1540.84,762.256 1535.62,762.256C1534.28,762.256 1533,762.536 1531.84,763.041C1531.45,763.22 1531.2,763.621 1531.22,764.054C1531.24,764.488 1531.52,764.867 1531.92,765.013C1536.68,766.865 1540.47,770.654 1542.31,775.41ZM1531.92,798.928C1531.51,799.074 1531.23,799.457 1531.21,799.893C1531.19,800.33 1531.44,800.734 1531.84,800.913C1533,801.412 1534.28,801.692 1535.62,801.692C1540.84,801.692 1545.07,797.455 1545.07,792.236C1545.07,790.894 1544.79,789.617 1544.29,788.46C1544.11,788.065 1543.71,787.819 1543.28,787.836C1542.84,787.854 1542.46,788.133 1542.32,788.541C1540.47,793.294 1536.68,797.083 1531.92,798.928ZM1508.4,788.539C1508.26,788.127 1507.87,787.845 1507.44,787.827C1507,787.809 1506.6,788.059 1506.42,788.457C1505.92,789.617 1505.64,790.894 1505.64,792.236C1505.64,797.455 1509.88,801.692 1515.1,801.692C1516.44,801.692 1517.71,801.412 1518.87,800.907C1519.27,800.728 1519.51,800.327 1519.49,799.894C1519.48,799.461 1519.2,799.082 1518.79,798.936C1514.04,797.083 1510.25,793.294 1508.4,788.539ZM1526.97,767.888C1526.44,767.828 1525.9,767.797 1525.36,767.797C1524.81,767.797 1524.27,767.828 1523.75,767.888C1523.38,767.929 1523.02,767.984 1522.67,768.052C1517,769.143 1512.53,773.615 1511.43,779.284C1511.37,779.639 1511.31,779.999 1511.27,780.363C1511.21,780.892 1511.18,781.429 1511.18,781.974C1511.18,782.519 1511.21,783.057 1511.27,783.586C1511.31,783.95 1511.37,784.31 1511.43,784.665C1512.53,790.333 1517,794.805 1522.67,795.896C1523.02,795.964 1523.38,796.019 1523.75,796.061C1524.27,796.121 1524.81,796.151 1525.36,796.151C1525.9,796.151 1526.44,796.121 1526.97,796.061C1527.33,796.019 1527.69,795.964 1528.05,795.896C1533.72,794.805 1538.19,790.333 1539.28,784.665C1539.35,784.31 1539.4,783.95 1539.44,783.586C1539.5,783.057 1539.53,782.519 1539.53,781.974C1539.53,781.429 1539.5,780.892 1539.44,780.363C1539.4,779.999 1539.35,779.639 1539.28,779.284C1538.19,773.615 1533.72,769.143 1528.05,768.052C1527.69,767.984 1527.33,767.929 1526.97,767.888Z" />
</g>
</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&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>
{{> @header}}
<div class="container">
<div class="row --center">
{{> @article_header}}
</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&hideEmbedTopBar=true" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row --center">
<div class="d_grid-7">
{{> @rte}}
</div>
</div>
</div>
<div class="container">
<div class="row --center">
<div class="d_grid-7 m_grid-4">
{{> @feedback_card}}
</div>
</div>
</div>
<div class="container">
<div class="row --center">
<div class="d_grid-7 m_grid-4 flow--module">
{{> @legend}}
{{> @article_teaser_list}}
</div>
</div>
</div>
{
"preview": "templates"
}
No notes defined.