Please feel free to reach out to our Support Team via email anytime!

Privacy policy

Support terms

Contact us

Main website

Customizations

Help center

RAD Theme by Radikal

<p data-renderer-start-pos="47381" id="isPasted" style="margin: 0.75rem 0px 0px; padding: 0px; font-size: 16px; line-height: 1.714; font-weight: 400; letter-spacing: -0.005em; color: rgb(23, 43, 77); font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, Roboto, Oxygen, Ubuntu, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre-wrap; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">If the color metafield is filled in for a product, we&apos;ll retrieve the corresponding swatch image from the files uploaded in Shopify using that value.</p><p data-renderer-start-pos="47532" style="margin: 0.75rem 0px 0px; padding: 0px; font-size: 16px; line-height: 1.714; font-weight: 400; letter-spacing: -0.005em; color: rgb(23, 43, 77); font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, Roboto, Oxygen, Ubuntu, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre-wrap; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">To create the correct swatch image, use the product&apos;s chosen color, such as &quot;grey&quot; or &quot;bright pink,&quot; and size it to <strong data-renderer-mark="true">50x50 pixels</strong>. The file should be named using the color name in lowercase and hyphenated if there are spaces and prefix it with <strong data-renderer-mark="true">swatch-</strong>, like <code data-renderer-mark="true" style="font-family: SFMono-Medium, &quot;SF Mono&quot;, &quot;Segoe UI Mono&quot;, &quot;Roboto Mono&quot;, &quot;Ubuntu Mono&quot;, Menlo, Consolas, Courier, monospace; font-size: 0.875em; font-weight: normal; background-color: var(--ds--code--bg-color,var(--ds-background-neutral, #F4F5F7)); color: var(--ds-text, #172B4D); border-style: none; border-radius: var(--ds-border-radius, 3px); display: inline; padding: 2px 0.5ch; -webkit-box-decoration-break: clone; overflow: auto; overflow-wrap: break-word; white-space: pre-wrap; --ds--code--bg-color: var(--ds-background-neutral, rgba(9, 30, 66, 0.08));">swatch-grey.png</code> or <code data-renderer-mark="true" style="font-family: SFMono-Medium, &quot;SF Mono&quot;, &quot;Segoe UI Mono&quot;, &quot;Roboto Mono&quot;, &quot;Ubuntu Mono&quot;, Menlo, Consolas, Courier, monospace; font-size: 0.875em; font-weight: normal; background-color: var(--ds--code--bg-color,var(--ds-background-neutral, #F4F5F7)); color: var(--ds-text, #172B4D); border-style: none; border-radius: var(--ds-border-radius, 3px); display: inline; padding: 2px 0.5ch; -webkit-box-decoration-break: clone; overflow: auto; overflow-wrap: break-word; white-space: pre-wrap; --ds--code--bg-color: var(--ds-background-neutral, rgba(9, 30, 66, 0.08));">swatch-bright-pink.png</code>.</p><p data-renderer-start-pos="47833" style="margin: 0.75rem 0px 0px; padding: 0px; font-size: 16px; line-height: 1.714; font-weight: 400; letter-spacing: -0.005em; color: rgb(23, 43, 77); font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, Roboto, Oxygen, Ubuntu, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre-wrap; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">These swatch images should then be uploaded to Shopify under <code data-renderer-mark="true" style="font-family: SFMono-Medium, &quot;SF Mono&quot;, &quot;Segoe UI Mono&quot;, &quot;Roboto Mono&quot;, &quot;Ubuntu Mono&quot;, Menlo, Consolas, Courier, monospace; font-size: 0.875em; font-weight: normal; background-color: var(--ds--code--bg-color,var(--ds-background-neutral, #F4F5F7)); color: var(--ds-text, #172B4D); border-style: none; border-radius: var(--ds-border-radius, 3px); display: inline; padding: 2px 0.5ch; -webkit-box-decoration-break: clone; overflow: auto; overflow-wrap: break-word; white-space: pre-wrap; --ds--code--bg-color: var(--ds-background-neutral, rgba(9, 30, 66, 0.08));">Content &gt; Files</code>.</p><p data-renderer-start-pos="47833" style="margin: 0.75rem 0px 0px; padding: 0px; font-size: 16px; line-height: 1.714; font-weight: 400; letter-spacing: -0.005em; color: rgb(23, 43, 77); font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, Roboto, Oxygen, Ubuntu, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre-wrap; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><br></p><div data-panel-type="warning" style="margin: 0.75rem 0px 0px; padding: var(--ds-space-100, 8px); border-radius: var(--ds-border-radius, 3px); min-width: 48px; display: flex; position: relative; align-items: normal; word-break: break-word; background-color: var(--ds-background-accent-yellow-subtlest, #FFFAE6); color: rgb(23, 43, 77); clear: both; font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, Roboto, Oxygen, Ubuntu, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre-wrap; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div style="margin: 0.1em 0px 0px; padding-top: 0px; padding-right: var(--ds-space-100, 8px); padding-bottom: 0px; padding-left: 0px; flex-shrink: 0; height: var(--ds-space-300, 24px); width: var(--ds-space-300, 24px); box-sizing: content-box; text-align: center; user-select: none; color: var(--ds-icon-warning, #FF991F);"><br></div><div style="margin: 1px 0px; padding: 0px; flex: 1 0 0px; min-width: 0px;"><p data-renderer-start-pos="47996" style="margin: 0px; padding: 0px; font-size: 1em; line-height: 1.714; font-weight: normal; letter-spacing: -0.005em;">Important to know! When you have multiple languages you will need to upload the translated swatch images as well. For example if the swatch image is named as <strong data-renderer-mark="true">swatch-blauw.png</strong> &amp; you have an additional language such as English then you will need to upload also a new swatch image for the translation so <strong data-renderer-mark="true">swatch-blue.png</strong></p></div></div>

If the color metafield is filled in for a product, we'll retrieve the corresponding swatch image from the files uploaded in Shopify using that value. To create the correct swatch image, use the product's chosen color, such as "grey" or "bright pink,"

Color swatchesUpdated 5 months ago