Go to Online store > Themes > Current theme > Customize and select at the top dropdown the product template. A product page on a Shopify store is a dedicated web page that provides detailed information about a specific product available for sale. It

Product page

Tag. Purpose. badge-xxx. badge-new. badge-limitededition. To add a label or badge to your product, apply this specific tag. It's crucial to remember that you should also input the actual text for the label in the theme settings. For more details, ref

<div data-layout="default" id="isPasted" style="margin: 0 auto var(--ds-space-200, 16px); padding: 0px; position: relative; box-sizing: border-box; clear: both; z-index: 0; transition: all 0.1s linear 0s; display: flex; 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-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; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; width: 760px;"><div style="margin: 0px; padding: 0px; overflow-x: auto; display: flex;"><br><table data-number-column="false" data-table-width="760" data-testid="renderer-table" style="margin-top: ; margin-right: 0px; margin-bottom: ; margin-left: 0px; border-collapse: collapse; width: 760px; border: 1px solid var(--ds-background-accent-gray-subtler, #C1C7D0); table-layout: fixed; font-size: 1em; height: 1px;"><thead><tr style="box-sizing: border-box; height: 47.4219px;"><th colspan="1" data-colwidth="280" rowspan="1" style="border-top-width: ; border-right-width: 0px; border-bottom-width: 0px; border-left-width: ; border-top-style: ; border-right-style: ; border-bottom-style: ; border-left-style: ; border-top-color: ; border-right-color: ; border-bottom-color: ; border-left-color: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; padding: 0px; text-align: left; vertical-align: top; box-sizing: border-box; min-width: 48px; font-weight: normal; background-clip: padding-box; background-color: var(--ds-background-accent-gray-subtlest, #F4F5F7); position: relative;"><div style="margin: 0px; padding: 8px; box-sizing: border-box; width: 278.367px; height: 46.4219px; border-width: 1.5px; border-style: solid; border-color: transparent;"><p data-renderer-start-pos="45311" style="margin: 0px; padding: 0px; font-size: 1em; line-height: 1.714; font-weight: normal; letter-spacing: -0.005em; box-sizing: border-box;"><strong data-renderer-mark="true" style="box-sizing: border-box;">Tag</strong></p><figure style="display: block; box-sizing: border-box; margin: 0px;"><div style="margin: 0px; padding: 0px; box-sizing: border-box;"><div style="margin: var(--ds-space-075, 6px); padding: 0px; position: absolute; display: flex; height: 28px; width: 28px; right: 0px; top: 0px; border: 2px solid var(--ds-border, #fff); border-radius: var(--ds-border-radius-100, 4px); background-color: var(--ds-surface-overlay, #F4F5F7); -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; cursor: pointer; box-sizing: border-box; opacity: 0; transition: opacity 0.2s ease-in-out 0s;" tabindex="0"><div style="margin: 0px; padding: 0px; width: 8px; height: 12px; transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1) 0s; transform-origin: 50% 50%; display: flex; -webkit-box-pack: center; justify-content: center; opacity: 0.7; box-sizing: border-box;"><div style="margin: 0px; padding: 0px; height: 12px; width: 2px; border-radius: 50px; background: var(--ds-icon, #42526E); box-sizing: border-box;"><br></div></div></div></div></figure></div></th><th colspan="1" data-colwidth="480" rowspan="1" style="border-top-width: ; border-right-width: 0px; border-bottom-width: 0px; border-left-width: ; border-top-style: ; border-right-style: ; border-bottom-style: ; border-left-style: ; border-top-color: ; border-right-color: ; border-bottom-color: ; border-left-color: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; padding: 0px; text-align: left; vertical-align: top; box-sizing: border-box; min-width: 48px; font-weight: normal; background-clip: padding-box; background-color: var(--ds-background-accent-gray-subtlest, #F4F5F7); position: relative;"><div style="margin: 0px; padding: 8px; box-sizing: border-box; width: 478.633px; height: 46.4219px; border-width: 1.5px; border-style: solid; border-color: transparent;"><p data-renderer-start-pos="45318" style="margin: 0px; padding: 0px; font-size: 1em; line-height: 1.714; font-weight: normal; letter-spacing: -0.005em; box-sizing: border-box;"><strong data-renderer-mark="true" style="box-sizing: border-box;">Purpose</strong></p><figure style="display: block; box-sizing: border-box; margin: 0px;"><div style="margin: 0px; padding: 0px; box-sizing: border-box;"><div style="margin: var(--ds-space-075, 6px); padding: 0px; position: absolute; display: flex; height: 28px; width: 28px; right: 0px; top: 0px; border: 2px solid var(--ds-border, #fff); border-radius: var(--ds-border-radius-100, 4px); background-color: var(--ds-surface-overlay, #F4F5F7); -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; cursor: pointer; box-sizing: border-box; opacity: 0; transition: opacity 0.2s ease-in-out 0s;" tabindex="0"><div style="margin: 0px; padding: 0px; width: 8px; height: 12px; transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1) 0s; transform-origin: 50% 50%; display: flex; -webkit-box-pack: center; justify-content: center; opacity: 0.7; box-sizing: border-box;"><div style="margin: 0px; padding: 0px; height: 12px; width: 2px; border-radius: 50px; background: var(--ds-icon, #42526E); box-sizing: border-box;"><br></div></div></div></div></figure></div></th></tr></thead><tbody style="border-bottom: none; box-sizing: border-box;"><tr style="box-sizing: border-box;"><td colspan="1" data-colwidth="280" rowspan="1" style="border-top-width: ; border-right-width: 0px; border-bottom-width: 0px; border-left-width: ; border-top-style: ; border-right-style: ; border-bottom-style: ; border-left-style: ; border-top-color: ; border-right-color: ; border-bottom-color: ; border-left-color: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; padding: var(--ds-space-100, 8px); text-align: left; box-sizing: border-box; min-width: 48px; font-weight: normal; vertical-align: top; background-clip: padding-box;"><p data-renderer-start-pos="45331" style="margin: 0px; padding: 0px; font-size: 1em; line-height: 1.714; font-weight: normal; letter-spacing: -0.005em; box-sizing: border-box;"><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)); box-sizing: border-box;">badge-xxx</code></p><p data-renderer-start-pos="45342" style="margin: 0.75rem 0px 0px; padding: 0px; font-size: 1em; line-height: 1.714; font-weight: normal; letter-spacing: -0.005em; box-sizing: border-box;"><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)); box-sizing: border-box;">badge-new</code></p><p data-renderer-start-pos="45353" style="margin: 0.75rem 0px 0px; padding: 0px; font-size: 1em; line-height: 1.714; font-weight: normal; letter-spacing: -0.005em; box-sizing: border-box;"><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)); box-sizing: border-box;">badge-limitededition</code></p></td><td colspan="1" data-colwidth="480" rowspan="1" style="border-top-width: ; border-right-width: 0px; border-bottom-width: 0px; border-left-width: ; border-top-style: ; border-right-style: ; border-bottom-style: ; border-left-style: ; border-top-color: ; border-right-color: ; border-bottom-color: ; border-left-color: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; padding: var(--ds-space-100, 8px); text-align: left; box-sizing: border-box; min-width: 48px; font-weight: normal; vertical-align: top; background-clip: padding-box;"><p data-renderer-start-pos="45377" style="margin: 0px; padding: 0px; font-size: 1em; line-height: 1.714; font-weight: normal; letter-spacing: -0.005em; box-sizing: border-box;">To add a label or badge to your product, apply this specific tag. It&apos;s crucial to remember that you should also input the actual text for the label in the theme settings. For more details, refer to the topic <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)); box-sizing: border-box;">Product Badges/Labels</code> in the documentation.</p></td></tr><tr style="box-sizing: border-box;"><td colspan="1" data-colwidth="280" rowspan="1" style="border-top-width: ; border-right-width: 0px; border-bottom-width: 0px; border-left-width: ; border-top-style: ; border-right-style: ; border-bottom-style: ; border-left-style: ; border-top-color: ; border-right-color: ; border-bottom-color: ; border-left-color: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; padding: var(--ds-space-100, 8px); text-align: left; box-sizing: border-box; min-width: 48px; font-weight: normal; vertical-align: top; background-clip: padding-box;"><p data-renderer-start-pos="45634" style="margin: 0px; padding: 0px; font-size: 1em; line-height: 1.714; font-weight: normal; letter-spacing: -0.005em; box-sizing: border-box;"><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)); box-sizing: border-box;">XXX</code></p></td><td colspan="1" data-colwidth="480" rowspan="1" style="border-top-width: ; border-right-width: 0px; border-bottom-width: 0px; border-left-width: ; border-top-style: ; border-right-style: ; border-bottom-style: ; border-left-style: ; border-top-color: ; border-right-color: ; border-bottom-color: ; border-left-color: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; padding: var(--ds-space-100, 8px); text-align: left; box-sizing: border-box; min-width: 48px; font-weight: normal; vertical-align: top; background-clip: padding-box;"><p data-renderer-start-pos="45641" style="margin: 0px; padding: 0px; font-size: 1em; line-height: 1.714; font-weight: normal; letter-spacing: -0.005em; box-sizing: border-box;">XXX</p></td></tr></tbody></table><div style="margin: 0px; padding: 0px; height: calc(100% - 24px); width: 0px; min-width: 0px;"><br></div></div></div>

Product tags

Go to Online store > Themes > Current theme > Customize and select at the top dropdown the product template. You can choose to enable or disable the sticky add-to-cart bar. On desktop, this bar will be visible when the add-to-cart button is not in vi

<p data-renderer-start-pos="45694" 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;">Go to <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));">Online store &gt; Themes &gt; Current theme &gt; Customize</code> and select at the top dropdown the product template<strong data-renderer-mark="true">.</strong></p><p data-renderer-start-pos="45804" 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;">You can choose to enable or disable the sticky add-to-cart bar. On desktop, this bar will be visible when the add-to-cart button is not in view, while on mobile, it will appear when you start scrolling and the content below the product images becomes visible. The bar will disappear on both desktop and mobile when it reaches the footer.</p><div data-layout="center" data-node-type="mediaSingle" data-width-type="percentage" style="margin: 24px auto; padding: 0px; width: 760px; max-width: 100%; float: none; transition: width 100ms ease-in 0s; clear: both; 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-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; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div style="margin: 0px; padding: 0px; position: relative;"><div data-alt data-collection="contentId-655163434" data-context-id="655163434" data-file-mime-type="image/png" data-file-name="image-20230829-070458.png" data-file-size="400149" data-height="1058" data-id="01235408-9f97-440a-98ab-9bc9b79edd6e" data-node-type="media" data-type="file" data-width="1775" style="margin: 0px; padding: 0px; position: static !important; height: 0px; width: 760px;"><div data-testid="media-card-view" style="margin: 0px; padding: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; position: absolute; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen, Ubuntu, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif; width: 1118px; max-width: 100%; height: 453px; max-height: 100%; border-radius: 3px; cursor: pointer; font-size: 14px; line-height: 22px;"><div data-test-media-name="image-20230829-070458.png" data-test-progress="1" data-test-status="complete" data-testid="media-file-card-view" style="margin: 0px; padding: 0px; display: flex; position: relative; max-width: 100%; width: 760px; height: 453px; max-height: 100%; overflow: hidden; border-radius: 3px; box-sizing: border-box;"><img data-fr-image-pasted="true" data-testid="media-image" draggable="false" alt="image-20230829-070458.png" src="blob:https://radikal-io.atlassian.net/832ccd2e-4f61-4923-ba14-699a8eab54d2#media-blob-url=true&amp;id=01235408-9f97-440a-98ab-9bc9b79edd6e&amp;collection=contentId-655163434&amp;contextId=655163434&amp;height=1058&amp;width=1775&amp;alt=" style="padding: 0px; border: 0px; box-sizing: border-box; left: 380px; top: 226.5px; object-fit: contain; image-orientation: none; transform: translate(-50%, -50%); height: 453px;" class="fr-fil fr-dib"></div></div></div></div></div><p data-renderer-start-pos="46146" 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>

Product action bar (sticky add-to-cart bar)

Breadcrumb is automatically generated by the collection in the URL when the product URL looks like this /collections/hoodies-sweaters/products/rosegarden-hoodie-hoodie-black. This URL structure will be used when you click on a product within a collec

<p data-renderer-start-pos="47108" 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;">Breadcrumb is automatically generated by the collection in the URL when the product URL looks like this <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));">/collections/hoodies-sweaters/products/rosegarden-hoodie-hoodie-black</code>. This URL structure will be used when you click on a product within a collection.</p>

Breadcrumbs

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,"

<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>

Color swatches

Go to Online store > Themes > Current theme > Customize and select at the top dropdown the product template. Within the product template, you have the option to add various blocks, including an information tab. This tab allows you to add a title and

<p data-renderer-start-pos="48333" 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;">Go to <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));">Online store &gt; Themes &gt; Current theme &gt; Customize</code> and select at the top dropdown the product template<strong data-renderer-mark="true">.</strong></p><p data-renderer-start-pos="48443" 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;">Within the product template, you have the option to add various blocks, including an information tab. This tab allows you to add a title and description, which will be visible on every product detail page. You can use this block to provide general information about shipping, returns, payment, and other relevant details.</p><div data-layout="center" data-node-type="mediaSingle" data-width-type="percentage" style="margin: 24px auto; padding: 0px; width: 760px; max-width: 100%; float: none; transition: width 100ms ease-in 0s; clear: both; 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-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; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div style="margin: 0px; padding: 0px; position: relative;"><div data-alt data-collection="contentId-655163434" data-context-id="655163434" data-file-mime-type="image/png" data-file-name="image-20230829-070819.png" data-file-size="383340" data-height="1056" data-id="96e8aafe-cfa6-471a-829d-4e6a3c237ac2" data-node-type="media" data-type="file" data-width="1773" style="margin: 0px; padding: 0px; position: static !important; height: 0px; width: 760px;"><div data-testid="media-card-view" style="margin: 0px; padding: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; position: absolute; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen, Ubuntu, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif; width: 1118px; max-width: 100%; height: 452.648px; max-height: 100%; border-radius: 3px; cursor: pointer; font-size: 14px; line-height: 22px;"><div data-test-media-name="image-20230829-070819.png" data-test-progress="1" data-test-status="complete" data-testid="media-file-card-view" style="margin: 0px; padding: 0px; display: flex; position: relative; max-width: 100%; width: 760px; height: 452.648px; max-height: 100%; overflow: hidden; border-radius: 3px; box-sizing: border-box;"><img data-fr-image-pasted="true" data-testid="media-image" draggable="false" alt="image-20230829-070819.png" src="blob:https://radikal-io.atlassian.net/8688215c-c88c-4b11-89c7-2898022e105e#media-blob-url=true&amp;id=96e8aafe-cfa6-471a-829d-4e6a3c237ac2&amp;collection=contentId-655163434&amp;contextId=655163434&amp;height=1056&amp;width=1773&amp;alt=" style="padding: 0px; border: 0px; box-sizing: border-box; left: 380px; top: 226.32px; object-fit: contain; image-orientation: none; transform: translate(-50%, -50%); height: 452.648px;" class="fr-fil fr-dib"></div></div></div></div></div><p data-renderer-start-pos="48769" 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;">You&#x2019;re also able to link a metafield to a tab, which means that each product detail page will have different content within the tab. The tab is added as a dynamic source. To include this information on your product detail pages, you&apos;ll need to replace any hardcoded text with a dynamic source in the theme editor. Click on the dynamic source button and select the metafield to display unique content for each product. In these tabs the description can also be added by checking the checkbox.</p><p data-renderer-start-pos="49262" 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;">When the &#x2018;show tab uncollapsed&#x2019; checkbox is checked, the tab will be shown uncollapsed by default.</p><p data-renderer-start-pos="49362" 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;">When the &#x2018;Show Care Description with Image&#x2019; checkbox is checked, the tab will automatically show the care description and matching images which are added on the product.</p>

Information tabs

Go to Online store > Themes > Current theme > Customize and select at the top dropdown the product template. You have the option to enhance your product detail page by adding unique selling points (USPs) using an icon and text. These USPs will be con

<p data-renderer-start-pos="49543" 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;">Go to <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));">Online store &gt; Themes &gt; Current theme &gt; Customize</code> and select at the top dropdown the product template<strong data-renderer-mark="true">.</strong></p><p data-renderer-start-pos="49653" 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;">You have the option to enhance your product detail page by adding unique selling points (USPs) using an icon and text. These USPs will be consistent across all product detail pages.</p><div data-layout="center" data-node-type="mediaSingle" data-width-type="percentage" style="margin: 24px auto; padding: 0px; width: 760px; max-width: 100%; float: none; transition: width 100ms ease-in 0s; clear: both; 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-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; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div style="margin: 0px; padding: 0px; position: relative;"><div data-alt data-collection="contentId-655163434" data-context-id="655163434" data-file-mime-type="image/png" data-file-name="image-20230829-071118.png" data-file-size="267445" data-height="1049" data-id="82b1158b-2669-4229-8da7-2b9b28aad8e6" data-node-type="media" data-type="file" data-width="1775" style="margin: 0px; padding: 0px; position: static !important; height: 0px; width: 760px;"><div data-testid="media-card-view" style="margin: 0px; padding: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; position: absolute; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen, Ubuntu, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif; width: 1118px; max-width: 100%; height: 449.148px; max-height: 100%; border-radius: 3px; cursor: pointer; font-size: 14px; line-height: 22px;"><div data-test-media-name="image-20230829-071118.png" data-test-progress="1" data-test-status="complete" data-testid="media-file-card-view" style="margin: 0px; padding: 0px; display: flex; position: relative; max-width: 100%; width: 760px; height: 449.148px; max-height: 100%; overflow: hidden; border-radius: 3px; box-sizing: border-box;"><img data-fr-image-pasted="true" data-testid="media-image" draggable="false" alt="image-20230829-071118.png" src="blob:https://radikal-io.atlassian.net/2d746ec9-0120-4d9f-b280-dda4285de80c#media-blob-url=true&amp;id=82b1158b-2669-4229-8da7-2b9b28aad8e6&amp;collection=contentId-655163434&amp;contextId=655163434&amp;height=1049&amp;width=1775&amp;alt=" style="padding: 0px; border: 0px; box-sizing: border-box; left: 380px; top: 224.57px; object-fit: contain; image-orientation: none; transform: translate(-50%, -50%); height: 449.148px;" class="fr-fil fr-dib"></div></div></div></div></div><p><br></p>

USP’s

Go to Online store > Themes > Current theme > Customize and select at the top dropdown the product template and select on the left Product recommendations. Dynamic recommendations use order and product information to change and improve over time. Lea