Avatar Builder – Mr Potato Mode</n <style>
body {margin:0;padding-top:80px;font-family:sans-serif;background:transparent;}
#builder-container {display:flex;max-width:1400px;margin:0 auto;background:#fff;padding:20px;}
.main {flex:1;background:#fff;}
.tabs {display:flex;gap:10px;margin-bottom:10px;padding:5px;border-bottom:1px solid #ccc;background:#fff;}
.tab {padding:6px 10px;background:#eee;border:1px solid #ccc;border-bottom:none;cursor:pointer;user-select:none;color:#000;}
.tab.active {background:#fff;font-weight:bold;border-bottom:2px solid #fff;}
.thumbs {display:grid;grid-template-columns:repeat(auto-fill,80px);gap:8px;padding:8px;border:1px solid #ccc;margin-bottom:10px;background:#fff;}
.thumbs img {width:60px;height:60px;object-fit:contain;cursor:pointer;user-select:none;-webkit-user-drag:none;}
#stage {position:relative;width:800px;height:800px;background:#fff;border:1px solid #ccc;margin-bottom:10px;overflow:visible;}
.stage-item {position:absolute;overflow:visible;cursor:move;}
.stage-item img {display:block;user-select:none;-webkit-user-drag:none;pointer-events:none;}
.delete-btn {position:absolute;top:-10px;right:-10px;width:24px;height:24px;background:#e74c3c;color:#fff;border:none;border-radius:50%;font-size:16px;line-height:24px;text-align:center;cursor:pointer;z-index:1000;display:flex;align-items:center;justify-content:center;pointer-events:auto;}
#layers-panel {width:200px;background:#f9f9f9;border:1px solid #ccc;padding:10px;margin-left:20px;}
#layers-panel h2 {margin-top:0;font-size:16px;}
#layers-list {list-style:none;padding:0;margin:0;max-height:840px;overflow-y:auto;}
#layers-list li {display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;background:#fff;border:1px solid #ddd;padding:4px;cursor:pointer;}
#layers-list li.selected {background:#e0f7fa;}
#save-btn {padding:8px 16px;}
</style>
</head>
<body>
<div id="builder-container">
<div class="main">
<div class="tabs"></div>
<div class="thumbs"></div>
<div id="stage"></div>
<button id="save-btn">Save as PNG</button>
<canvas id="exportCanvas" width="800" height="800" style="display:none;"></canvas>
</div>
<div id="layers-panel">
<h2>Layers</h2>
<ul id="layers-list"></ul>
</div>
</div>
<script>
const layersData = { head:['head1.png','head2.png'], hair:['hair1.png','hair2.png'], hat:['hat1.png','hat2.png'], bottom:['bottom1.png','bottom2.png'], sneaker:['sneaker1.png','sneaker2.png'], accessories:['accessories1.png','accessories2.png'], pattern:['pattern1.png','pattern2.png'], top:['top1.png','top2.png'] };
const imageBase = 'https://fullermoe.github.io/hypeheads-builder-assets/';
const tabsEl = document.querySelector('.tabs');
const thumbsEl = document.querySelector('.thumbs');
const stage = document.getElementById('stage');
const layersList = document.getElementById('layers-list');
const exportCanvas = document.getElementById('exportCanvas');
const exportCtx = exportCanvas.getContext('2d');
let currentCat = Object.keys(layersData)[0];
let dragInfo = null;
const placed = [];
// Initialize tabs
Object.keys(layersData).forEach((cat, i) => {
const tab = document.createElement('div');
tab.textContent = cat;
tab.className = 'tab' + (i ? '' : ' active');
tab.onclick = () => selectCat(cat, tab);
tabsEl.append(tab);
});
selectCat(currentCat, tabsEl.firstChild);
function selectCat(cat, tabEl) {
currentCat = cat;
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
tabEl.classList.add('active');
thumbsEl.innerHTML = '';
layersData[cat].forEach(fn => {
const img = document.createElement('img');
img.src = imageBase + cat + '/' + fn;
img.onclick = () => addToStage(cat, fn);
thumbsEl.append(img);
});
}
function addToStage(cat, fn) {
const wrapper = document.createElement('div');
wrapper.className = 'stage-item';
wrapper.style.left = '0px';
wrapper.style.top = '0px';
wrapper.style.zIndex = placed.length;
// Image
const img = document.createElement('img');
img.src = imageBase + cat + '/' + fn;
img.width = 200;
img.height = 200;
wrapper.appendChild(img);
// Delete button
const del = document.createElement('button');
del.className = 'delete-btn';
del.innerText = '×';
del.onclick = e => { e.stopPropagation(); removeItem(wrapper); };
wrapper.appendChild(del);
// Drag handlers
wrapper.onmousedown = e => startDrag(e, wrapper);
stage.appendChild(wrapper);
placed.push(wrapper);
updateZ();
addLayerItem(wrapper, cat + '/' + fn);
}
function removeItem(wrapper) {
const idx = placed.indexOf(wrapper);
if (idx > -1) {
stage.removeChild(wrapper);
const liIndex = placed.length - 1 - idx;
layersList.removeChild(layersList.children[liIndex]);
placed.splice(idx, 1);
updateZ();
}
}
function addLayerItem(wrapper, label) {
const li = document.createElement('li');
li.textContent = label.split('/')[0];
li.onclick = () => selectLayer(wrapper, li);
layersList.prepend(li);
selectLayer(wrapper, li);
}
function selectLayer(wrapper, li) {
document.querySelectorAll('#layers-list li').forEach(x => x.classList.remove('selected'));
li.classList.add('selected');
placed.forEach(x => x.style.outline = '');
wrapper.style.outline = '2px solid #4caf50';
}
function updateZ() {
placed.forEach((el, i) => el.style.zIndex = i);
}
function startDrag(e, wrapper) {
e.preventDefault();
const ox = parseInt(wrapper.style.left), oy = parseInt(wrapper.style.top);
dragInfo = { wrapper, x: e.clientX, y: e.clientY, ox, oy };
window.addEventListener('mousemove', onDrag);
window.addEventListener('mouseup', endDrag);
}
function onDrag(e) {
if (!dragInfo) return;
const d = dragInfo;
d.wrapper.style.left = (d.ox + e.clientX - d.x) + 'px';
d.wrapper.style.top = (d.oy + e.clientY - d.y) + 'px';
}
function endDrag() {
window.removeEventListener('mousemove', onDrag);
window.removeEventListener('mouseup', endDrag);
dragInfo = null;
}
// Delete with keyboard
window.addEventListener('keydown', e => {
if (e.key === 'Delete') {
const selIdx = Array.from(layersList.children).findIndex(li => li.classList.contains('selected'));
if (selIdx > -1) {
const wrapperIdx = placed.length - 1 - selIdx;
removeItem(placed[wrapperIdx]);
}
}
});
document.getElementById('save-btn').onclick = () => {
exportCtx.clearRect(0, 0, 800, 800);
placed.forEach(wrapper => {
const img = wrapper.querySelector('img');
const x = parseInt(wrapper.style.left), y = parseInt(wrapper.style.top);
exportCtx.drawImage(img, x, y, img.width, img.height);
});
const a = document.createElement('a');
a.href = exportCanvas.toDataURL();
a.download = 'avatar.png';
a.click();
};
</script>
<style> .fab-marquee img {max-width: inherit;} </style>
<div id="shopify-block-AWFF2YUttaTZXMTFKR__477467645007963971" class="shopify-block shopify-app-block">
</div><div id="shopify-block-AakNoTzR0N0NkN3Z2W__11532412952436166569" class="shopify-block shopify-app-block"><script async src="https://loox.io/widget/E1WDceVLh_/loox.1591559255769.js?shop=fullermoe.myshopify.com"></script>
<script>var loox_global_hash = '1757738684415';</script><style>.loox-reviews-default { max-width: 1200px; margin: 0 auto; }.loox-rating .loox-icon { color:#DCEF6F; }
:root { --lxs-rating-icon-color: #DCEF6F; }</style><svg xmlns="http://www.w3.org/2000/svg" style="display: none" id="loox-rating-icon-svg-store">
<defs>
<clipPath id="looxicons-rating-icon-fill_star-pointy-fill__a">
<path d="M0 0h24v24H0z" />
</clipPath>
<clipPath id="looxicons-rating-icon-line_star-pointy-line__a">
<path d="M0 0h24v24H0z" />
</clipPath>
</defs>
<symbol id="looxicons-rating-icon-fill" viewBox="0 0 24 24" fill="currentcolor">
<g clip-path="url(#star-pointy-fill__a)">
<path
d="m12 19.261-7.416 4.151 1.656-8.335L0 9.306l8.44-1.002L12 .588l3.56 7.717L24 9.306l-6.24 5.77 1.656 8.336L12 19.262Z"
/>
</g>
</symbol>
<symbol id="looxicons-rating-icon-line" viewBox="0 0 24 24" fill="currentcolor">
<g clip-path="url(#star-pointy-line__a)">
<path
d="m12 19.261-7.416 4.151 1.656-8.335L0 9.306l8.44-1.002L12 .588l3.56 7.717L24 9.306l-6.24 5.77 1.656 8.336L12 19.262Zm0-2.41 4.465 2.5-.997-5.019 3.756-3.475-5.081-.602L12 5.608l-2.143 4.648-5.081.601 3.756 3.475-.997 5.019L12 16.85Z"
/>
</g>
</symbol>
<defs>
<style>
.lx-icon-fill {
--lx-fill-width: calc(100% - var(--lx-rating-percent, 0%));
clip-path: inset(0 var(--lx-fill-width, 0) 0 0);
}
.lx-icon-line {
clip-path: inset(0 0 0 var(--lx-rating-percent, 0%));
}
[data-lx-fill='empty'] {
--lx-rating-percent: 0%;
}
[data-lx-fill='half'] {
--lx-rating-percent: 50%;
}
[data-lx-fill='full'] {
--lx-rating-percent: 100%;
}
</style>
<g id="looxicons-rating-icon">
<use href="#looxicons-rating-icon-line" class="lx-icon-line"></use>
<use href="#looxicons-rating-icon-fill" class="lx-icon-fill"></use>
</g>
</defs>
</svg>
</div><div id="shopify-block-AM05QbkZpaG5MWU93V__18228966181090706294" class="shopify-block shopify-app-block">
<script type="module" src="https://cdn.shopify.com/extensions/5abec6c3-8201-4cd0-bcbf-194c9e75ad63/selleasy-170/assets/lb-upsell.js" defer></script>
<script type="module" src="https://cdn.shopify.com/extensions/5abec6c3-8201-4cd0-bcbf-194c9e75ad63/selleasy-170/assets/lb-upsell-components.esm.js" defer></script>
<script type="module" src="https://cdn.shopify.com/extensions/5abec6c3-8201-4cd0-bcbf-194c9e75ad63/selleasy-170/assets/lb-utils.js" defer></script>
</div><div id="shopify-block-AUUdNUGQ4MTBOeHBYR__7231527610335159538" class="shopify-block shopify-app-block"><script> window.globalCoursesSubstriptionButtonName = "Manage subscriptions"; </script>
</div><div id="shopify-block-AcjNPOTVFb0dUSjdJR__7430214966741109568" class="shopify-block shopify-app-block"><!-- End Start Code -->
<script defer src="https://cdn.marquee.fabapps.co/js/app.js"></script>
<script defer src="https://cdn.marquee.fabapps.co/config/fullermoe.myshopify.com.config.js"></script>
<style>
.fab-marquee-mouse:hover .fab-marquee-content {
animation-play-state: paused !important;
}
@keyframes scrolling-reverse {
0% {
transform: translatex(-100%)
}
to {
transform: translateX(0)
}
}
@keyframes scrolling {
0% {
transform: translateX(0)
}
to {
transform: translatex(-100%)
}
}
@keyframes scrolling-reverse-leading {
0% {
transform: translateX(-100%);
}
to {
transform: translateX(100%);
}
}
@keyframes scrolling-reverse-lagging {
0% {
transform: translateX(-200%);
}
to {
transform: translateX(0%);
}
}
@keyframes scrolling-leading {
0% {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
@keyframes scrolling-lagging {
0% {
transform: translateX(0%);
}
to {
transform: translateX(-200%);
}
}
</style>
<!-- End Marquee Code -->
</div><div id="shopify-block-Aa2FoK2l5NWZBWXJ1a__12643349056429947648" class="shopify-block shopify-app-block"><script src="https://cdn.shopify.com/extensions/193ca65c-00b8-4a82-be7d-10cca2bb2b9d/sticky-add-to-cart-booster-pro-5/assets/satcb.min.js" async defer></script>
</div></body>
</html>
</div>
</div>
</div>
</gp-row>
</section>
</section><script data-locksmith>
var load = function () {
if (document.querySelectorAll('.locksmith-manual-trigger').length > 0) {
Locksmith.ping();
}
Locksmith.util.on('submit', 'locksmith-resource-form', function (event) {
event.preventDefault();
var data = Locksmith.util.serializeForm(event.target);
Locksmith.postResource(data, { spinner: false, container: 'locksmith-content' });
});
Locksmith.util.on('click', 'locksmith-manual-trigger', function (event) {
event.preventDefault();
Locksmith.postResource({}, { spinner: true, container: document });
});
Locksmith.submitPasscode = function (passcode) {
Locksmith.postResource(
{ passcode: passcode },
{ spinner: false, container: 'locksmith-content' }
);
};
};
if (typeof Locksmith !== 'undefined') {
load();
} else {
window.addEventListener('load', load);
}
</script> <div id="bss-lock-suspension-notice" style="display: none;"> <div> <span>Your free trial with BSS B2B Lock has ended - <b>All locks in paid plan will be disabled!</b> </span> <a href="/admin/apps/login-to-access-pages/" target="_blank" >Start a subscription or continue with our free plan.<i></i ></a> </div> <div> <span><small>Only you can see this notice.</small></span> <div class="close-bss-banner-container"> <button id="btn-close-bss-banner" style=" position: absolute; top: 8px; right: 10px; background: none; border: none; font-size: 26px; cursor: pointer; color: #fff; ">×</button> </div> </div> </div> <style type="text/css"> #bss-lock-suspension-notice { box-sizing: border-box; min-height: 48px; position: fixed; top: 0; left: 0; right: 0; background: #8C0B0B; color: #fff; padding: 8px 10px; z-index: 2147483647; font-family: inherit; font-size: 14px; line-height: 15px; -webkit-font-smoothing: subpixel-antialiased; display: flex; } #bss-lock-suspension-notice > div { flex-grow: 2; } #bss-lock-suspension-notice > div:last-child { text-align: right; flex-grow: 1; } #bss-lock-suspension-notice small { opacity: 0.8; font-size: 13px; display: block; padding-top: 4px; margin-right: 26px; } #bss-lock-suspension-notice span, #bss-lock-suspension-notice a { display: inline-block; margin: 4px 10px; } #bss-lock-suspension-notice a { margin-left: 0px !important; } #bss-lock-suspension-notice a { background: #fff; color: #a00; font-weight: bold; border-radius: 10px; padding: 6px 10px 6px; white-space: nowrap; transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; display: inline-block; will-change: transform !important; } #bss-lock-suspension-notice a:hover { transform: translate3d(0, -2px, 0); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } #bss-lock-suspension-notice a i { margin-left: 3px; position: relative; bottom: 1px; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 3.5px 0 3.5px 3px; border-color: transparent transparent transparent #a00; } </style> <script type="text/javascript"> const bssBannerTrail = localStorage.getItem('BSS_LOCK_SHOW_BANNER') document.addEventListener('DOMContentLoaded', function () { if (document.getElementById('admin-bar-iframe')) { if (bssBannerTrail !== 'false') { document.getElementById('bss-lock-suspension-notice').style.display = 'flex'; } } const banner = document.getElementById("bss-lock-suspension-notice"); const closeBtn = document.getElementById("btn-close-bss-banner"); closeBtn.addEventListener("click", function () { banner.style.display = "none"; localStorage.setItem('BSS_LOCK_SHOW_BANNER', 'false') fetch("https://login-api-v2.bsscommerce.com/upload-content/banner-trail-expried", { method: "POST", headers: { "Content-Type": "application/json", 'Authentication': 'Bearer 141f6c6cd324872d75fe7d3118b3a4a464d091d7a4336090bae01156a65906f3' }, body: JSON.stringify({ domain: window.Shopify.shop, ruleId: 1, }) }).then(response => response.json()) .then(data => console.log("Upload success:", data)) .catch(error => console.error("Upload failed:", error)); }); }); </script>
<script>
class SHTCarouselWrapper extends HTMLElement{constructor(){super(),this.$=this.querySelectorAll.bind(this),this.carousels=this.$(".js-carousel-item"),this.container=this.$(".js-carousel-items"),this.onlyEnableMobile=this.dataset.onMobileOnly||"false","true"==this.onlyEnableMobile&&this.prepare()}prepare(){let t=this.dataset.cssClassOnContainer.split(" "),e=this.dataset.cssClassOnItem.split(" ");window.matchMedia("(max-width: 768px)").matches?(this.toggleClass(this.container,t,!0),this.toggleClass(this.carousels,e,!0)):(this.toggleClass(this.container,t,!1),this.toggleClass(this.carousels,e,!1)),new ResizeObserver(s=>{window.matchMedia("(max-width: 768px)").matches?(this.toggleClass(this.container,t,!0),this.toggleClass(this.carousels,e,!0)):(this.toggleClass(this.container,t,!1),this.toggleClass(this.carousels,e,!1))}).observe(document.body)}toggleClass(s,t,e){e&&s.forEach(s=>{s.classList.add(...t)}),e||s.forEach(s=>{s.classList.remove(...t)})}setCarouselVisibility(s,t){s.forEach(s=>{s.setAttribute("tabindex",""+t)})}}customElements.define("sht-carousel-wrapper",SHTCarouselWrapper);
</script>
</main><!-- BEGIN sections: footer-group -->
<section id="shopify-section-sections--17486412283973__gp_global_section_579779988576797444_YrUk9B" class="shopify-section shopify-section-group-footer-group gps-579779988576797444 gps gpsil">
<style >.gps-579779988576797444.gps.gpsil [style*="--bg:"]{background:var(--bg)}.gps-579779988576797444.gps.gpsil [style*="--bga:"]{background-attachment:var(--bga)}.gps-579779988576797444.gps.gpsil [style*="--bgc:"]{background-color:var(--bgc)}.gps-579779988576797444.gps.gpsil [style*="--bgi:"]{background-image:var(--bgi)}.gps-579779988576797444.gps.gpsil [style*="--bgp:"]{background-position:var(--bgp)}.gps-579779988576797444.gps.gpsil [style*="--bgr:"]{background-repeat:var(--bgr)}.gps-579779988576797444.gps.gpsil [style*="--bgs:"]{background-size:var(--bgs)}.gps-579779988576797444.gps.gpsil [style*="--b:"]{border:var(--b)}.gps-579779988576797444.gps.gpsil [style*="--bb:"]{border-bottom:var(--bb)}.gps-579779988576797444.gps.gpsil [style*="--bc:"]{border-color:var(--bc)}.gps-579779988576797444.gps.gpsil [style*="--bblr:"]{border-bottom-left-radius:var(--bblr)}.gps-579779988576797444.gps.gpsil [style*="--bbrr:"]{border-bottom-right-radius:var(--bbrr)}.gps-579779988576797444.gps.gpsil [style*="--bs:"]{border-style:var(--bs)}.gps-579779988576797444.gps.gpsil [style*="--bt:"]{border-top:var(--bt)}.gps-579779988576797444.gps.gpsil [style*="--btlr:"]{border-top-left-radius:var(--btlr)}.gps-579779988576797444.gps.gpsil [style*="--btrr:"]{border-top-right-radius:var(--btrr)}.gps-579779988576797444.gps.gpsil [style*="--bw:"]{border-width:var(--bw)}.gps-579779988576797444.gps.gpsil [style*="--shadow:"]{box-shadow:var(--shadow)}.gps-579779988576797444.gps.gpsil [style*="--c:"]{color:var(--c)}.gps-579779988576797444.gps.gpsil [style*="--cg:"]{-moz-column-gap:var(--cg);column-gap:var(--cg)}.gps-579779988576797444.gps.gpsil [style*="--gtc:"]{grid-template-columns:var(--gtc)}.gps-579779988576797444.gps.gpsil [style*="--jc:"]{justify-content:var(--jc)}.gps-579779988576797444.gps.gpsil [style*="--op:"]{opacity:var(--op)}.gps-579779988576797444.gps.gpsil [style*="--o:"]{order:var(--o)}.gps-579779988576797444.gps.gpsil [style*="--pc:"]{place-content:var(--pc)}.gps-579779988576797444.gps.gpsil [style*="--p:"]{padding:var(--p)}.gps-579779988576797444.gps.gpsil [style*="--pb:"]{padding-bottom:var(--pb)}.gps-579779988576797444.gps.gpsil [style*="--pt:"]{padding-top:var(--pt)}.gps-579779988576797444.gps.gpsil [style*="--w:"]{width:var(--w)}@media only screen and (max-width:1024px){.gps-579779988576797444.gps.gpsil [style*="--w-tablet:"]{width:var(--w-tablet)}}@media only screen and (max-width:767px){.gps-579779988576797444.gps.gpsil [style*="--w-mobile:"]{width:var(--w-mobile)}}.gps-579779988576797444 .gp-relative{position:relative}.gps-579779988576797444 .gp-mx-auto{margin-left:auto;margin-right:auto}.gps-579779988576797444 .gp-mb-0{margin-bottom:0}.gps-579779988576797444 .gp-flex{display:flex}.gps-579779988576797444 .gp-grid{display:grid}.gps-579779988576797444 .\!gp-hidden{display:none!important}.gps-579779988576797444 .gp-hidden{display:none}.gps-579779988576797444 .gp-max-w-full{max-width:100%}.gps-579779988576797444 .gp-grid-rows-\[1fr\]{grid-template-rows:1fr}.gps-579779988576797444 .gp-flex-col{flex-direction:column}.gps-579779988576797444 .gp-transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.gps-579779988576797444 .gp-duration-200{transition-duration:.2s}.gps-579779988576797444 .gp-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (max-width:1024px){.gps-579779988576797444 .tablet\:\!gp-hidden{display:none!important}.gps-579779988576797444 .tablet\:gp-hidden{display:none}}@media (max-width:767px){.gps-579779988576797444 .mobile\:\!gp-hidden{display:none!important}.gps-579779988576797444 .mobile\:gp-hidden{display:none}}.gps-579779988576797444 .\[\&_\*\]\:gp-max-w-full *{max-width:100%}</style>
<section
class="gp-mx-auto gp-max-w-full [&_*]:gp-max-w-full "
style="--w:calc(var(--g-ct-w, 1200px) + 2 * var(--g-ct-p, 15px));--w-tablet:calc(var(--g-ct-w, 100%) + 2 * var(--g-ct-p, 15px));--w-mobile:calc(var(--g-ct-w, 100%) + 2 * var(--g-ct-p, 15px))"
>
<gp-row gp-data='{"background":{"desktop":{"type":"color","color":"transparent","image":{"src":"","width":0,"height":0},"size":"cover","position":{"x":50,"y":50},"repeat":"no-repeat","attachment":"scroll"}},"uid":"gBhVouwntj"}' data-id="gBhVouwntj" id="gBhVouwntj" data-same-height-subgrid-container class="gBhVouwntj gp-relative gp-mx-auto gp-mb-0 gp-grid gp-max-w-full gp-transition-colors gp-duration-200 gp-ease-in-out [&_*]:gp-max-w-full gp-grid-rows-[1fr]" style="--pt:var(--g-s-2xl);--pb:var(--g-s-2xl);--d:grid;--d-tablet:grid;--d-mobile:grid;--bs:solid;--bw:0px;--bc:#121212;--bblr:0px;--bbrr:0px;--btlr:0px;--btrr:0px;--shadow:none;--op:100%;--cg:32px;--gtc:minmax(0, 12fr);--bgc:transparent;--bgi:url();--bgp:50% 50%;--bgs:cover;--bgr:no-repeat;--bga:scroll;--pc:start">
<div
data-same-height-display-contents
style="--jc:start;--d-mobile:none"
class="g_pdF0ZZOJ gp-relative gp-flex gp-flex-col"
>
</div>
</gp-row>
</section>
</section><div id="shopify-section-sections--17486412283973__footer" class="shopify-section shopify-section-group-footer-group"><footer id="section-footer" class=" section footer js-footer section--solid color-scheme-5" data-ui-component="Section Footer">
<div class="footer__wrapper ctnr background">
<div class="" style="--w-xs: 12;">
<button onclick="SHTHelper.qde.scrollTo({top: 0, behavior: `smooth`});" class="mb-64 pt-lg-12 pb-lg-12 btn btn-link btn-small padding--start js-back-to-top-btn ">
Volver arriba
<svg class="ml-8" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.2071 7.62131L5.91421 12.9142L4.5 11.5L12.2071 3.79288L19.9142 11.5L18.5 12.9142L13.2071 7.62131L13.2071 20.2071L11.2071 20.2071L11.2071 7.62131Z"/>
</svg>
</button>
<div class="rw"><div class="store-information clm fg-1 fs-0" style="--w-xs: 12;">
<h2 class="menu__heading fw-700 pt-8 pb-8 m-zero d-block hide-empty">©2025 GFXWRLD</h2>
<div class="footer__logo d-block mt-24 mb-24" style="--logo-width: 40px"><img
srcset="//gfxwrld.com/cdn/shop/files/GFXWRLD-Green.svg?v=1736613678&width=40 1x, //gfxwrld.com/cdn/shop/files/GFXWRLD-Green.svg?v=1736613678&width=80 2x"
src="//gfxwrld.com/cdn/shop/files/GFXWRLD-Green.svg?v=1736613678&width=40" loading="lazy"
class="logo" width="180" height="180"
alt="GFXWRLD®">
</div>
<div class="text-block pt-12 hide-empty"></div>
</div><div class="clm fg-1 fs-0 maw-100" style="--w-xs: 12; --w-lg: 3;">
<h2 class="menu__heading fw-700 pt-8 pb-8 m-zero d-block hide-empty">Contact us</h2>
<div class="contact__wrapper footer__contact pt-4 wb-break-word">
<span class="d-block h5 m-zero d-none-important">Contacta con nosotros</span>
<div class="contact__list d-flex fd-column r-gap-16"><a href="mailto:help@gfxwrld.us" class="contact__item d-flex middle-xs ">
<span class="icon mr-8 fs-0 bs-none"><svg class="" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 7H4V17H20V7ZM2 5V19H22V5H2Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.47855 7.85328L3.52145 6.14672L12 11.3281L20.4785 6.14672L21.5215 7.85328L12 13.6719L2.47855 7.85328Z"/>
</svg>
</span>help@gfxwrld.us</a></div>
</div>
</div><div class="clm hide-empty clm fg-1 fs-0 maw-100" style="--w-xs: 12; --w-lg: 3;"><div class="footer__socials maw-lg-100 m-auto">
<span class="menu__heading fw-700 pt-8 pb-8 m-zero d-block ta-left hide-empty">Follow GFXWRLD</span>
<ul class="mt-16 start-xs gap-16 ls-none d-flex fw-wrap hide-empty"><li>
<a href="http://instagram.com/gfxwrld" rel="noopener" title="Instagram" aria-label="Instagram"
class="btn btn-icon btn-large btn-primary js-social-btn">
<svg class="" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.49995 12C7.49995 9.51473 9.51467 7.50001 12 7.50001C14.4852 7.50001 16.5 9.51473 16.5 12C16.5 14.4853 14.4852 16.5 12 16.5C9.51467 16.5 7.49995 14.4853 7.49995 12ZM12 9.30001C10.5088 9.30001 9.29995 10.5088 9.29995 12C9.29995 13.4912 10.5088 14.7 12 14.7C13.4911 14.7 14.7 13.4912 14.7 12C14.7 10.5088 13.4911 9.30001 12 9.30001Z" />
<path d="M16.8 8.40001C17.4627 8.40001 18 7.86275 18 7.20001C18 6.53727 17.4627 6.00001 16.8 6.00001C16.1372 6.00001 15.6 6.53727 15.6 7.20001C15.6 7.86275 16.1372 8.40001 16.8 8.40001Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.69995 7.20001C2.69995 4.71473 4.71467 2.70001 7.19995 2.70001H16.8C19.2852 2.70001 21.3 4.71473 21.3 7.20001V16.8C21.3 19.2853 19.2852 21.3 16.8 21.3H7.19995C4.71467 21.3 2.69995 19.2853 2.69995 16.8V7.20001ZM7.19995 4.50001C5.70878 4.50001 4.49995 5.70884 4.49995 7.20001V16.8C4.49995 18.2912 5.70878 19.5 7.19995 19.5H16.8C18.2911 19.5 19.5 18.2912 19.5 16.8V7.20001C19.5 5.70884 18.2911 4.50001 16.8 4.50001H7.19995Z" />
</svg>
</a>
</li></ul>
</div></div>
<div class="menu-group fw-wrap d-flex w-100 r-gap-32" style="--w-lg: 6">
<div class="clm" style="--w-xs: 12; --w-sm: 6; --w-lg: 6;">
<div class="c-gap r-gap-lg-24"><a href="/es" class="menu__link menu__link-lv1 menu__heading fw-700 m-zero d-block ">
<span class="d-block link__title">Hogar</span>
</a></div>
</div>
<div class="clm" style="--w-xs: 12; --w-sm: 6; --w-lg: 6;">
<div class="c-gap r-gap-lg-24"><a href="/es/pages/installation-usage-videos" class="menu__link menu__link-lv1 menu__heading fw-700 m-zero d-block ">
<span class="d-block link__title">Installation & Usage Videos</span>
</a></div>
</div>
<div class="clm" style="--w-xs: 12; --w-sm: 6; --w-lg: 6;">
<div class="c-gap r-gap-lg-24"><a href="/es/pages/faqs" class="menu__link menu__link-lv1 menu__heading fw-700 m-zero d-block ">
<span class="d-block link__title">FAQs</span>
</a></div>
</div>
<div class="clm" style="--w-xs: 12; --w-sm: 6; --w-lg: 6;">
<div class="c-gap r-gap-lg-24"><a href="/es/policies/refund-policy" class="menu__link menu__link-lv1 menu__heading fw-700 m-zero d-block ">
<span class="d-block link__title">Politica de reembolso</span>
</a></div>
</div>
<div class="clm" style="--w-xs: 12; --w-sm: 6; --w-lg: 6;">
<div class="c-gap r-gap-lg-24"><a href="/es/policies/privacy-policy" class="menu__link menu__link-lv1 menu__heading fw-700 m-zero d-block ">
<span class="d-block link__title">política de privacidad</span>
</a></div>
</div>
<div class="clm" style="--w-xs: 12; --w-sm: 6; --w-lg: 6;">
<div class="c-gap r-gap-lg-24"><a href="/es/policies/terms-of-service" class="menu__link menu__link-lv1 menu__heading fw-700 m-zero d-block ">
<span class="d-block link__title">Términos de servicio</span>
</a></div>
</div>
<div class="clm" style="--w-xs: 12; --w-sm: 6; --w-lg: 6;">
<div class="c-gap r-gap-lg-24"><a href="/es/pages/affiliate-program" class="menu__link menu__link-lv1 menu__heading fw-700 m-zero d-block ">
<span class="d-block link__title">Become An Affiliate</span>
</a></div>
</div>
</div>
</div>
<div class="footer__content__bottom m-auto d-flex center-xs fd-column middle-xs fd-row-lg between-lg mt-64 gap-24 c-gap-lg-48 r-gap-lg-4">
<div class="d-flex fd-column center-xs middle-xs fd-row-lg w-100 w-sm-auto fw-wrap r-gap-lg-24 start-md" style=" --w-lg: 7;">
<div class="footer-localization p-relative-lg d-flex fw-wrap fw-nowrap-md hide-empty mb-64 mb-lg-0 pr-lg-48 gap-16 r-gap-24"><sht-localization class="d-flex fg-1" data-js-file-id="component-language-switcher-js-file"
data-js-file="//gfxwrld.com/cdn/shop/t/47/assets/component-language-switcher.js?v=29174795681782628481749326515"
data-section-id="shopify-section-language-switcher"
data-url="/es?section_id=language-switcher">
<button type="button"
class="js-language-switcher-btn btn-localization fs-body d-flex between-xs middle-xs w-100 ta-left field__text field--focus field--hover c-pointer">
Español
<svg class="" width="20px" height="20px" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.7071 9.00421L18.2929 7.59L12 13.8829L5.70712 7.59L4.29291 9.00421L12 16.7113L19.7071 9.00421Z"/>
</svg>
</button>
</sht-localization></div></div>
<div class="d-flex fd-column fd-row-lg r-gap-24 r-gap-lg-12 fw-wrap end-md" style=" --w-lg: 5;">
<div class="color-light subtext pt-lg-12 pb-lg-12 ta-center ta-right-lg pl-lg-48">
<small class="subtext">© <a href="/es" title="">GFXWRLD®</a> • </small>
<small class="subtext"><a target="_blank" rel="nofollow" href="https://www.shopify.com?utm_campaign=poweredby&utm_medium=shopify&utm_source=onlinestore">Tecnología de Shopify</a></small>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
<!-- END sections: footer-group --><div id="shopify-section-popup" class="shopify-section"></div><sht-dialog-quickshop class="sht-dialog dialog__quickshop color-scheme-3 no-focus-visible middle-md bottom-xs center-xs p-fixed left-0 top-0 h-100 w-100 o-auto zi-9" id="dialogQuickShop" hidden tabindex="-1">
<div class="dialog js-dialog-container disable-scrollbars oy-scroll h-100" role="dialog" aria-labelledby="dialogQuickShopTitle" aria-modal="true">
<div class="p-sticky top-0 zi-2">
<div class="dialog__header d-flex between-xs middle-xs p-absolute top-0 right-0 bg-transparent">
<button type="button" aria-label="Cerrar Modal" class="dialog__btn js-dialog-close-btn btn btn-icon btn-small icon btn-secondary"><svg class="" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.6569 19.0711L4.92893 6.34314L6.34315 4.92892L19.0711 17.6568L17.6569 19.0711Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.92893 17.6568L17.6569 4.92892L19.0711 6.34314L6.34315 19.0711L4.92893 17.6568Z"/>
</svg>
</button>
</div>
</div>
<div class="dialog__content d-flex fd-column h-100 p-relative">
<div class="dialog__body js-dialog-body p-relative">
</div>
</div>
</div>
</sht-dialog-quickshop>
<sht-dialog-quickbuy class="sht-dialog dialog__quickbuy bg-transparent color-scheme-3 d-flex no-focus-visible end-sm bottom-xs center-xs p-fixed left-0 top-0 h-100 w-100 o-auto zi-9" id="dialogQuickBuy" hidden tabindex="-1">
<div class="dialog js-dialog-container disable-scrollbars oy-scroll" role="dialog" aria-labelledby="dialogQuickBuyTitle" aria-modal="true">
<div class="dialog__header d-flex between-xs middle-xs p-sticky top-0">
<h3 class="h5 m-zero">
Selector de variantes
</h3>
<button type="button" aria-label="Cerrar Modal" class="dialog__btn js-dialog-close-btn btn btn-icon btn-small icon btn-secondary"><svg class="" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.6569 19.0711L4.92893 6.34314L6.34315 4.92892L19.0711 17.6568L17.6569 19.0711Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.92893 17.6568L17.6569 4.92892L19.0711 6.34314L6.34315 19.0711L4.92893 17.6568Z"/>
</svg>
</button>
</div>
<div class="dialog__body js-dialog-body">
</div>
</div>
</sht-dialog-quickbuy>
<ul hidden><li id="a11y-refresh-page-message">Al seleccionar una opción, se actualiza toda la página.</li><li id="a11y-new-window-message">Abre una nueva ventana.</li></ul>
<script src="//gfxwrld.com/cdn/shop/t/47/assets/theme.js?v=58056035068109033901749326515" defer="defer"></script><link rel="stylesheet" href="//gfxwrld.com/cdn/shop/t/47/assets/animation.css?v=549300214328544041749326515" media="print" onload="this.media='all'">
<section id="shopify-section-upsell_popup" class="shopify-section"><!-- Start of Shopioso Upsell -->
<!-- End of Shopioso Upsell -->
</section>
<style> .fab-marquee img {max-width: inherit;} </style>
</body>
</html>
