![\"CODESTAL](\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/codestal-desktop-mobile.jpg\")
The project frames the brand around roots and passing things to a future generation. Its desktop hero and mobile product page both give the metal texture and the photography room to speak.<\/p>\n
1. Four design decisions in the CODESTAL project<\/h2>\n1.1 Four grayscale colors leave room for the metal<\/h3>\n
The project’s palette<\/a> specifies four interface colors.<\/p>\n Oxidized silver gets much of its character from the contrast between dark recesses and highlights on hammered surfaces. A grayscale interface leaves that contrast visible. Use the same principle for other materials that carry visual character, such as titanium and hand-finished leather.<\/p>\n CODESTAL moves product identifiers out of the fine print. The project shows identifiers on product cards, and selected items, the quick view, and the shopping bag show weight where it is relevant to the purchase.<\/p>\n Examples of archive-style item numbers include The desktop header puts Hammer marks, natural patina, and changes in an oxidized finish can lead to questions after a purchase. Top-level links let customers find care, delivery, and returns before ordering. The product detail uses Specifications<\/strong> and Warranty<\/strong> as separate tabs. Specifications can describe the metal and finish, while the warranty tab can explain the merchant’s actual coverage and care instructions.<\/p>\n SKU and weight are native Shopify variant data. The storefront can read them through Liquid. Use product metafields to keep the material and care descriptions consistent across products when the theme is connected to those fields.<\/p>\n Save the sample as Choose a real product for each block. The example’s preset values illustrate the design. Clear or replace the preset item number and weight before showing a real product, and check the selected variant’s measurement unit. The example takes material and warranty from the block settings. Connect the corresponding metafields when adapting it to a store. The sample’s purchase buttons link to the product page. Direct add to cart requires the theme’s product form or cart integration.<\/p>\n\n
#000000<\/code>)<\/strong> anchors dark areas and purchase buttons such as ADD TO BAG<\/code> and COMPLETE PURCHASE<\/code>.<\/li>\n#1A1A1A<\/code>)<\/strong> creates a separate layer for dark brand-story areas and the footer.<\/li>\n#383838<\/code>)<\/strong> works for secondary text, rules, inactive filters, and table borders.<\/li>\n#FFFFFF<\/code>)<\/strong> gives product lists and detail panels a clean background and high contrast on dark sections.<\/li>\n<\/ul>\n![\"Black,](\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/codestal-palette.jpg\")
1.2 Put the item number and weight where shoppers can see them<\/h3>\n
UGS28\\36\\2023\\1<\/code> for forged-metal silver earrings, UG52\/40\/243\/1<\/code> for hand-forged silver earrings, and CODE048<\/code> for the Boldness design. Example weights in the study include 4.10 g<\/code>, 6.58 g<\/code>, and 1.50 g<\/code>.<\/p>\n![\"Quick](\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/codestal-product-detail.jpg\")
\n
4.10 g<\/code> helps them judge the weight of an earring or ear cuff without handling it. The material and hallmark belong in the specifications.<\/li>\nUGS28\\36\\2023\\1<\/code> when that pattern fits the catalog. Repeating the same identifier in the product view and shopping bag keeps the item easy to recognize. A label such as \\ YOUR BAG \\<\/code> continues the visual language.<\/li>\n<\/ul>\n1.3 Make product care easy to find before checkout<\/h3>\n
COLLECTION +<\/code>, OUR STORY<\/code>, and PRODUCT CARE<\/code> on the left. The CODESTAL wordmark sits in the middle. RETURNS & REFUNDS<\/code>, SHIPPING<\/code>, and the account, wishlist, and bag icons sit on the right.<\/p>\n![\"Desktop](\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/codestal-desktop.jpg\")
1.4 Use the grid and shopping bag to make decisions clear<\/h3>\n
![\"The](\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/codestal-cart.jpg\")
\n\n
\n \nDesign element<\/th>\n CODESTAL reference<\/th>\n Shopify application<\/th>\n<\/tr>\n<\/thead>\n \n Desktop and mobile grid<\/strong><\/td>\n Desktop 1920 \u00d7 1080<\/code>, 12 columns, 60px<\/code> margins, 20px<\/code> gutters. Mobile 375 \u00d7 812<\/code>, four columns, 20px<\/code> margins and gutters.<\/td>\nMake the four material or style shortcuts horizontally accessible on mobile: MINIMAL<\/code>, TEXTURED<\/code>, FASHION<\/code>, and EAR CUFF<\/code>.<\/td>\n<\/tr>\n\n Type hierarchy<\/strong><\/td>\n Audiowide<\/code> display type. 68px<\/code> semibold, 48px<\/code> regular, 24px<\/code> regular, and 16px<\/code> light, with 120%<\/code> line height.<\/td>\nUse Audiowide<\/code> for headings and a legible geometric sans such as Inter<\/code> or Space Grotesk<\/code> for item numbers, weights, prices, and specifications.<\/td>\n<\/tr>\n\n Shopping bag<\/strong><\/td>\n A product image and price sit beside item identifiers and weights such as UGS28\\36\\2023\\1<\/code> and 4.10 g<\/code>. The order summary shows free shipping and a sample 20% VAT<\/code> breakdown, an APPLY<\/code> field, and purchase controls.<\/td>\nIn the Shopify cart drawer, use item.variant.sku<\/code> and item.variant.weight | weight_with_unit<\/code>. Use the store’s real shipping and tax calculations. Present supported express payment options and the checkout action together.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n2. Implement the product details in Shopify<\/h2>\n
2.1 Map native fields and three optional metafields<\/h3>\n
\n\n
\n \nStorefront field<\/th>\n Reference value<\/th>\n Shopify source<\/th>\n Liquid expression<\/th>\n<\/tr>\n<\/thead>\n \n Archive item number<\/strong><\/td>\n UGS28\\36\\2023\\1<\/code> or CODE048<\/code><\/td>\nVariant SKU under Inventory<\/strong><\/td>\n {{ product.selected_or_first_available_variant.sku }}<\/code><\/td>\n<\/tr>\n\n Exact item weight<\/strong><\/td>\n 4.10 g<\/code> or 6.58 g<\/code><\/td>\nVariant weight under Shipping<\/strong>. Select grams when using a literal g<\/code> suffix.<\/td>\n{{ product.selected_or_first_available_variant.weight_in_unit }} g<\/code><\/td>\n<\/tr>\n\n Collection or texture<\/strong><\/td>\n FORGED METAL<\/code> or NEW SCALE<\/code><\/td>\nProduct metafield jewelry.collection_line<\/code>, single-line text<\/td>\n{{ product.metafields.jewelry.collection_line.value }}<\/code><\/td>\n<\/tr>\n\n Metal and finish<\/strong><\/td>\n 925 Silver Forged Metal - Oxidized Finish<\/code><\/td>\nProduct metafield jewelry.material_finish<\/code>, single-line text<\/td>\n{{ product.metafields.jewelry.material_finish.value }}<\/code><\/td>\n<\/tr>\n\n Warranty and care<\/strong><\/td>\n Example copy about polishing and reoxidation, with a note that hand-forged textures vary<\/td>\n Product metafield jewelry.warranty_care<\/code>, multi-line text<\/td>\n{{ product.metafields.jewelry.warranty_care.value }}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n2.2 Complete Liquid reference section<\/h3>\n
sections\/codestal-jewelry-showcase.liquid<\/code> and add the section in the theme editor. It uses the four grayscale colors, Audiowide headings, five filter choices, product metadata, and a Specifications \/ Warranty<\/strong> modal opened by SPECS +<\/code>.<\/p>\n{%- comment -%}\n \u6587\u4ef6\uff1asections\/codestal-jewelry-showcase.liquid\n \u8bbe\u8ba1\u53c2\u8003\uff1aHeritage: Men's Jewelry Brand Identity - CODESTAL (by Yana Potapova)\n \u529f\u80fd\uff1a\u65e0\u5f69\u8272\u7c97\u91ce\u4e3b\u4e49\u94f6\u9970\u9648\u5217\u67dc\uff0c\u652f\u6301\u808c\u7406\/\u6b3e\u5f0f\u7b5b\u9009\u3001\u8d27\u53f7\u4e0e\u514b\u91cd\u5916\u9732\u3001\u4ee5\u53ca Specifications \/ Warranty \u53cc\u6807\u7b7e\u5feb\u8d2d\u5f39\u7a97\n{%- endcomment -%}\n\n<link rel="preconnect" href="https:\/\/fonts.googleapis.com">\n<link rel="preconnect" href="https:\/\/fonts.gstatic.com" crossorigin>\n<link href="https:\/\/fonts.googleapis.com\/css2?family=Audiowide&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">\n\n<style>\n .codestal-sec-{{ section.id }} {\n --c-black: #000000;\n --c-charcoal: #1A1A1A;\n --c-slate: #383838;\n --c-white: #FFFFFF;\n --c-border: #2B2B2B;\n --c-font-title: 'Audiowide', sans-serif;\n --c-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n\n background-color: var(--c-black);\n color: var(--c-white);\n font-family: var(--c-font-body);\n padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;\n }\n\n \/* \u9075\u5faa\u539f\u6848 1920px \u684c\u9762 60px \u8fb9\u8ddd \/ 375px \u624b\u673a 20px \u8fb9\u8ddd\u89c4\u8303 *\/\n .codestal-container {\n max-width: 1440px;\n margin: 0 auto;\n padding: 0 60px;\n }\n @media screen and (max-width: 768px) {\n .codestal-container {\n padding: 0 20px;\n }\n }\n\n \/* \u9876\u90e8\u5ba3\u8a00\u4e0e\u659c\u6760\u526f\u6807\u9898 *\/\n .codestal-header {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: flex-end;\n gap: 24px;\n padding-bottom: 32px;\n border-bottom: 1px solid var(--c-slate);\n margin-bottom: 32px;\n }\n .codestal-slash-tag {\n font-size: 1rem;\n font-weight: 300;\n line-height: 1.2;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--c-white);\n opacity: 0.75;\n margin-bottom: 12px;\n }\n .codestal-main-title {\n font-family: var(--c-font-title);\n font-size: clamp(2rem, 3.8vw, 4.25rem); \/* \u6700\u5927\u5bf9\u5e94\u539f\u6848 68px *\/\n font-weight: 400;\n line-height: 1.2;\n text-transform: uppercase;\n color: var(--c-white);\n margin: 0;\n max-width: 820px;\n }\n .codestal-manifesto {\n max-width: 360px;\n font-size: 1rem; \/* \u539f\u6848 16px Light *\/\n font-weight: 300;\n line-height: 1.2;\n color: #CCCCCC;\n margin: 0;\n }\n\n \/* \u6b3e\u5f0f\u4e0e\u808c\u7406\u7b5b\u9009\u6761\uff1aMINIMAL \/ TEXTURED \/ FASHION \/ EAR CUFF *\/\n .codestal-filter-bar {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n margin-bottom: 40px;\n }\n .codestal-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n }\n .codestal-tab-btn {\n background: transparent;\n color: var(--c-white);\n border: 1px solid var(--c-slate);\n padding: 10px 20px;\n font-family: var(--c-font-body);\n font-size: 0.875rem;\n font-weight: 400;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n cursor: pointer;\n transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;\n }\n .codestal-tab-btn.is-active,\n .codestal-tab-btn:hover {\n background: var(--c-white);\n color: var(--c-black);\n border-color: var(--c-white);\n }\n\n \/* 12 \u5217\u684c\u9762\u7f51\u683c \/ 4 \u5217\u79fb\u52a8\u7f51\u683c\uff0820px Gutter\uff09 *\/\n .codestal-grid {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n gap: 20px;\n }\n .codestal-card {\n grid-column: span 4;\n background-color: var(--c-charcoal);\n border: 1px solid var(--c-border);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n transition: border-color 0.25s ease;\n }\n .codestal-card:hover {\n border-color: var(--c-white);\n }\n .codestal-card[hidden] {\n display: none !important;\n }\n @media screen and (max-width: 1024px) {\n .codestal-card {\n grid-column: span 6;\n }\n }\n @media screen and (max-width: 600px) {\n .codestal-grid {\n grid-template-columns: repeat(4, 1fr);\n gap: 20px;\n }\n .codestal-card {\n grid-column: span 4;\n }\n }\n\n \/* \u5361\u7247\u9876\u90e8\uff1a\u7cfb\u5217\u540d + \u6863\u6848\u8d27\u53f7 + \u514b\u91cd *\/\n .codestal-card-meta {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 14px 18px;\n border-bottom: 1px solid var(--c-border);\n font-size: 0.75rem;\n letter-spacing: 0.08em;\n color: #B8B8B8;\n text-transform: uppercase;\n }\n .codestal-weight-badge {\n color: var(--c-white);\n font-weight: 600;\n border: 1px solid var(--c-slate);\n padding: 2px 8px;\n }\n\n \/* \u5546\u54c1\u9ed1\u767d\u9ad8\u53cd\u5dee\u5fae\u8ddd\u56fe *\/\n .codestal-img-wrap {\n position: relative;\n aspect-ratio: 1 \/ 1;\n background-color: #111111;\n overflow: hidden;\n }\n .codestal-img-wrap img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n filter: contrast(1.06);\n transition: transform 0.45s ease;\n }\n .codestal-card:hover .codestal-img-wrap img {\n transform: scale(1.04);\n }\n\n \/* \u5361\u7247\u5e95\u90e8\u4fe1\u606f\u4e0e\u53cc\u52a8\u4f5c\u533a *\/\n .codestal-card-body {\n padding: 20px 18px;\n }\n .codestal-collection-tag {\n font-size: 0.75rem;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: #999999;\n margin: 0 0 6px;\n }\n .codestal-prod-title {\n font-size: 1.25rem;\n font-weight: 400;\n line-height: 1.2;\n color: var(--c-white);\n margin: 0 0 8px;\n text-transform: uppercase;\n }\n .codestal-finish-line {\n font-size: 0.875rem;\n font-weight: 300;\n color: #BBBBBB;\n margin: 0 0 18px;\n }\n .codestal-price-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 16px;\n border-top: 1px solid var(--c-border);\n gap: 12px;\n }\n .codestal-price {\n font-family: var(--c-font-title);\n font-size: 1.25rem;\n color: var(--c-white);\n }\n .codestal-actions {\n display: flex;\n gap: 8px;\n }\n .codestal-btn-ghost {\n background: transparent;\n color: var(--c-white);\n border: 1px solid var(--c-slate);\n padding: 10px 14px;\n font-size: 0.75rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n cursor: pointer;\n }\n .codestal-btn-ghost:hover {\n border-color: var(--c-white);\n }\n .codestal-btn-solid {\n background: var(--c-white);\n color: var(--c-black);\n border: 1px solid var(--c-white);\n padding: 10px 16px;\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n text-decoration: none;\n cursor: pointer;\n }\n .codestal-btn-solid:hover {\n background: #CCCCCC;\n border-color: #CCCCCC;\n }\n\n \/* \u539f\u6848\u540c\u6b3e\uff1aSpecifications \/ Warranty \u5feb\u901f\u89c4\u683c\u62bd\u5c49\u5f39\u7a97 *\/\n .codestal-modal-backdrop {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.82);\n display: none;\n align-items: center;\n justify-content: center;\n z-index: 999;\n padding: 20px;\n }\n .codestal-modal-backdrop.is-open {\n display: flex;\n }\n .codestal-modal {\n background: var(--c-charcoal);\n border: 1px solid var(--c-slate);\n max-width: 560px;\n width: 100%;\n padding: 32px;\n color: var(--c-white);\n position: relative;\n }\n .codestal-modal-close {\n position: absolute;\n top: 20px;\n right: 20px;\n background: transparent;\n border: 1px solid var(--c-slate);\n color: var(--c-white);\n width: 32px;\n height: 32px;\n cursor: pointer;\n }\n .codestal-modal-tabs {\n display: flex;\n gap: 16px;\n border-bottom: 1px solid var(--c-slate);\n margin: 20px 0 16px;\n }\n .codestal-modal-tab {\n background: transparent;\n border: none;\n border-bottom: 2px solid transparent;\n color: #999999;\n padding: 8px 0;\n font-size: 0.8125rem;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n cursor: pointer;\n }\n .codestal-modal-tab.is-active {\n color: var(--c-white);\n border-bottom-color: var(--c-white);\n }\n .codestal-spec-dl {\n display: grid;\n grid-template-columns: 140px 1fr;\n row-gap: 10px;\n font-size: 0.875rem;\n margin: 0 0 24px;\n }\n .codestal-spec-dl dt {\n color: #999999;\n font-weight: 300;\n }\n .codestal-spec-dl dd {\n margin: 0;\n color: var(--c-white);\n }\n<\/style>\n\n<section class="codestal-sec-{{ section.id }}" data-section-id="{{ section.id }}">\n <div class="codestal-container">\n <div class="codestal-header">\n <div>\n <div class="codestal-slash-tag">\\ {{ section.settings.slash_subtitle }} \\<\/div>\n <h2 class="codestal-main-title">{{ section.settings.heading }}<\/h2>\n <\/div>\n <p class="codestal-manifesto">{{ section.settings.manifesto }}<\/p>\n <\/div>\n\n <div class="codestal-filter-bar">\n <div class="codestal-tabs" role="tablist" aria-label="\u6309\u808c\u7406\u4e0e\u6b3e\u5f0f\u7b5b\u9009">\n <button type="button" class="codestal-tab-btn is-active" data-filter="all">ALL ARCHIVE<\/button>\n <button type="button" class="codestal-tab-btn" data-filter="textured">TEXTURED<\/button>\n <button type="button" class="codestal-tab-btn" data-filter="minimal">MINIMAL<\/button>\n <button type="button" class="codestal-tab-btn" data-filter="fashion">FASHION<\/button>\n <button type="button" class="codestal-tab-btn" data-filter="ear-cuff">EAR CUFF<\/button>\n <\/div>\n <\/div>\n\n <div class="codestal-grid">\n {%- for block in section.blocks -%}\n {%- assign product = block.settings.product -%}\n {%- assign variant = product.selected_or_first_available_variant -%}\n {%- assign item_code = block.settings.item_code | default: variant.sku | default: 'UGS28\\36\\2023\\1' -%}\n {%- assign item_weight = block.settings.weight_grams | default: variant.weight_in_unit | default: '4.10' -%}\n {%- assign item_title = block.settings.custom_title | default: product.title | default: 'FORGED METAL SILVER EARRINGS' -%}\n {%- assign item_price = product.price | money | default: block.settings.fallback_price -%}\n\n <article\n class="codestal-card"\n data-category="{{ block.settings.style_tag }}"\n {{ block.shopify_attributes }}\n >\n <div>\n <div class="codestal-card-meta">\n <span>ITEM: {{ item_code }}<\/span>\n <span class="codestal-weight-badge">WEIGHT: {{ item_weight }} g<\/span>\n <\/div>\n\n <div class="codestal-img-wrap">\n {%- if block.settings.custom_image != blank -%}\n <img\n src="{{ block.settings.custom_image | image_url: width: 900 }}"\n alt="{{ item_title | escape }}"\n width="900"\n height="900"\n loading="lazy"\n >\n {%- elsif product != blank and product.featured_image != blank -%}\n <img\n src="{{ product.featured_image | image_url: width: 900 }}"\n alt="{{ item_title | escape }}"\n width="900"\n height="900"\n loading="lazy"\n >\n {%- endif -%}\n <\/div>\n <\/div>\n\n <div class="codestal-card-body">\n <p class="codestal-collection-tag">\\ {{ block.settings.collection_line }} \\<\/p>\n <h3 class="codestal-prod-title">{{ item_title }}<\/h3>\n <p class="codestal-finish-line">{{ block.settings.material_spec }}<\/p>\n\n <div class="codestal-price-row">\n <span class="codestal-price">{{ item_price }}<\/span>\n <div class="codestal-actions">\n <button\n type="button"\n class="codestal-btn-ghost js-codestal-open-spec"\n data-title="{{ item_title | escape }}"\n data-code="{{ item_code | escape }}"\n data-weight="{{ item_weight }} g"\n data-material="{{ block.settings.material_spec | escape }}"\n data-warranty="{{ block.settings.warranty_note | escape }}"\n data-url="{{ product.url | default: '#' }}"\n >\n SPECS +\n <\/button>\n <a href="{{ product.url | default: '#' }}" class="codestal-btn-solid">ADD TO BAG<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n {%- endfor -%}\n <\/div>\n <\/div>\n\n {%- comment -%} Specifications & Warranty \u6a21\u6001\u6846 {%- endcomment -%}\n <div class="codestal-modal-backdrop" id="CodestalModal-{{ section.id }}" aria-hidden="true">\n <div class="codestal-modal" role="dialog" aria-modal="true">\n <button type="button" class="codestal-modal-close js-codestal-close" aria-label="Close">\u2715<\/button>\n <div class="codestal-slash-tag" id="ModalCode-{{ section.id }}">\\ ITEM \\<\/div>\n <h3 class="codestal-prod-title" id="ModalTitle-{{ section.id }}" style="font-family:var(--c-font-title);font-size:1.5rem;"><\/h3>\n\n <div class="codestal-modal-tabs">\n <button type="button" class="codestal-modal-tab is-active" data-modal-tab="specs">SPECIFICATIONS<\/button>\n <button type="button" class="codestal-modal-tab" data-modal-tab="warranty">WARRANTY & CARE<\/button>\n <\/div>\n\n <div id="ModalPaneSpecs-{{ section.id }}">\n <dl class="codestal-spec-dl">\n <dt>ARCHIVE NUMBER<\/dt>\n <dd id="ModalSpecCode-{{ section.id }}"><\/dd>\n <dt>EXACT WEIGHT<\/dt>\n <dd id="ModalSpecWeight-{{ section.id }}"><\/dd>\n <dt>MATERIAL & FINISH<\/dt>\n <dd id="ModalSpecMaterial-{{ section.id }}"><\/dd>\n <\/dl>\n <\/div>\n\n <div id="ModalPaneWarranty-{{ section.id }}" style="display:none;margin-bottom:24px;font-size:0.875rem;line-height:1.5;color:#CCCCCC;">\n <p id="ModalWarrantyText-{{ section.id }}"><\/p>\n <\/div>\n\n <a href="#" id="ModalBuyLink-{{ section.id }}" class="codestal-btn-solid" style="display:block;text-align:center;padding:14px;">\n ADD TO BAG\n <\/a>\n <\/div>\n <\/div>\n<\/section>\n\n<script>\n (function() {\n var sec = document.querySelector('.codestal-sec-{{ section.id }}');\n if (!sec) return;\n\n \/* \u9876\u90e8\u6b3e\u5f0f\u7b5b\u9009 *\/\n var filterBtns = sec.querySelectorAll('[data-filter]');\n var cards = sec.querySelectorAll('.codestal-card');\n filterBtns.forEach(function(btn) {\n btn.addEventListener('click', function() {\n var cat = btn.getAttribute('data-filter');\n filterBtns.forEach(function(b) { b.classList.toggle('is-active', b === btn); });\n cards.forEach(function(card) {\n if (cat === 'all' || card.getAttribute('data-category') === cat) {\n card.removeAttribute('hidden');\n } else {\n card.setAttribute('hidden', 'hidden');\n }\n });\n });\n });\n\n \/* Specifications \/ Warranty \u5f39\u7a97\u63a7\u5236 *\/\n var modal = sec.querySelector('#CodestalModal-{{ section.id }}');\n var openBtns = sec.querySelectorAll('.js-codestal-open-spec');\n var closeBtn = sec.querySelector('.js-codestal-close');\n var modalTabs = sec.querySelectorAll('[data-modal-tab]');\n var paneSpecs = sec.querySelector('#ModalPaneSpecs-{{ section.id }}');\n var paneWarranty = sec.querySelector('#ModalPaneWarranty-{{ section.id }}');\n\n openBtns.forEach(function(btn) {\n btn.addEventListener('click', function() {\n sec.querySelector('#ModalCode-{{ section.id }}').textContent = '\\\\ ' + btn.getAttribute('data-code') + ' \\\\';\n sec.querySelector('#ModalTitle-{{ section.id }}').textContent = btn.getAttribute('data-title');\n sec.querySelector('#ModalSpecCode-{{ section.id }}').textContent = btn.getAttribute('data-code');\n sec.querySelector('#ModalSpecWeight-{{ section.id }}').textContent = btn.getAttribute('data-weight');\n sec.querySelector('#ModalSpecMaterial-{{ section.id }}').textContent = btn.getAttribute('data-material');\n sec.querySelector('#ModalWarrantyText-{{ section.id }}').textContent = btn.getAttribute('data-warranty');\n sec.querySelector('#ModalBuyLink-{{ section.id }}').setAttribute('href', btn.getAttribute('data-url'));\n modal.classList.add('is-open');\n });\n });\n\n if (closeBtn) {\n closeBtn.addEventListener('click', function() { modal.classList.remove('is-open'); });\n }\n modal.addEventListener('click', function(e) {\n if (e.target === modal) modal.classList.remove('is-open');\n });\n\n modalTabs.forEach(function(tab) {\n tab.addEventListener('click', function() {\n var target = tab.getAttribute('data-modal-tab');\n modalTabs.forEach(function(t) { t.classList.toggle('is-active', t === tab); });\n paneSpecs.style.display = target === 'specs' ? 'block' : 'none';\n paneWarranty.style.display = target === 'warranty' ? 'block' : 'none';\n });\n });\n })();\n<\/script>\n\n{% schema %}\n{\n "name": "CODESTAL \u7c97\u91ce\u4e3b\u4e49\u94f6\u9970\u9648\u5217\u67dc",\n "tag": "section",\n "settings": [\n {\n "type": "text",\n "id": "slash_subtitle",\n "label": "\u9876\u90e8\u659c\u6760\u526f\u6807\u9898",\n "default": "FORGED IN 925 STERLING SILVER"\n },\n {\n "type": "text",\n "id": "heading",\n "label": "Audiowide \u4e3b\u6807\u9898",\n "default": "REMEMBER YOUR ROOTS. PASS IT ON."\n },\n {\n "type": "textarea",\n "id": "manifesto",\n "label": "\u53f3\u4fa7\u54c1\u724c\u5ba3\u8a00",\n "default": "A manifesto of modern identity engraved in oxidized silver. Every dent and texture reflects manual forging traditions."\n },\n {\n "type": "range",\n "id": "padding_top",\n "min": 24,\n "max": 120,\n "step": 4,\n "unit": "px",\n "label": "\u9876\u90e8\u5185\u8fb9\u8ddd",\n "default": 64\n },\n {\n "type": "range",\n "id": "padding_bottom",\n "min": 24,\n "max": 120,\n "step": 4,\n "unit": "px",\n "label": "\u5e95\u90e8\u5185\u8fb9\u8ddd",\n "default": 64\n }\n ],\n "blocks": [\n {\n "type": "jewelry_item",\n "name": "\u94f6\u9970\u5355\u54c1\u5361\u7247",\n "settings": [\n {\n "type": "product",\n "id": "product",\n "label": "\u5173\u8054 Shopify \u5546\u54c1"\n },\n {\n "type": "image_picker",\n "id": "custom_image",\n "label": "\u81ea\u5b9a\u4e49\u5fae\u8ddd\u4e3b\u56fe\uff08\u53ef\u9009\uff09"\n },\n {\n "type": "text",\n "id": "custom_title",\n "label": "\u81ea\u5b9a\u4e49\u5546\u54c1\u6807\u9898",\n "default": "SILVER EARRINGS 'BOLDNESS'"\n },\n {\n "type": "text",\n "id": "collection_line",\n "label": "\u6240\u5c5e\u7cfb\u5217\u540d\u79f0",\n "default": "FORGED METAL"\n },\n {\n "type": "select",\n "id": "style_tag",\n "label": "\u7b5b\u9009\u5206\u7c7b\u6807\u7b7e",\n "options": [\n { "value": "textured", "label": "Textured\uff08\u953b\u6253\u808c\u7406\uff09" },\n { "value": "minimal", "label": "Minimal\uff08\u6781\u7b80\u51e0\u4f55\uff09" },\n { "value": "fashion", "label": "Fashion\uff08\u9576\u77f3\u9020\u578b\uff09" },\n { "value": "ear-cuff", "label": "Ear Cuff\uff08\u8033\u9aa8\u5939\uff09" }\n ],\n "default": "textured"\n },\n {\n "type": "text",\n "id": "item_code",\n "label": "\u659c\u6760\u6863\u6848\u8d27\u53f7\uff08\u7559\u7a7a\u5219\u8bfb\u53d6 SKU\uff09",\n "default": "UGS28\\\\36\\\\2023\\\\1"\n },\n {\n "type": "text",\n "id": "weight_grams",\n "label": "\u5355\u4ef6\u514b\u91cd (g)",\n "default": "4.10"\n },\n {\n "type": "text",\n "id": "material_spec",\n "label": "\u6750\u8d28\u4e0e\u8868\u9762\u5904\u7406\u8bf4\u660e",\n "default": "925 Silver Forged Metal \u2014 Oxidized Finish"\n },\n {\n "type": "textarea",\n "id": "warranty_note",\n "label": "\u8d28\u4fdd\u4e0e\u6c27\u5316\u5305\u6d46\u8bf4\u660e\uff08\u5f39\u7a97\u5c55\u793a\uff09",\n "default": "Hand-forged in 925 sterling silver. Oxidized finish is designed to naturally evolve and develop a personal patina over time. Includes 2-year structural warranty."\n },\n {\n "type": "text",\n "id": "fallback_price",\n "label": "\u793a\u4f8b\u4ef7\u683c\uff08\u672a\u7ed1\u5546\u54c1\u65f6\u663e\u793a\uff09",\n "default": "$260"\n }\n ]\n }\n ],\n "presets": [\n {\n "name": "CODESTAL \u7c97\u91ce\u4e3b\u4e49\u94f6\u9970\u9648\u5217\u67dc",\n "blocks": [\n {\n "type": "jewelry_item",\n "settings": {\n "custom_title": "FORGED METAL SILVER EARRINGS",\n "collection_line": "FORGED METAL",\n "style_tag": "textured",\n "item_code": "UGS28\\\\36\\\\2023\\\\1",\n "weight_grams": "4.10",\n "material_spec": "925 Silver Forged Metal \u2014 Oxidized Finish",\n "fallback_price": "22 350 \u20b4"\n }\n },\n {\n "type": "jewelry_item",\n "settings": {\n "custom_title": "SILVER EARRINGS 'BOLDNESS'",\n "collection_line": "NEW SCALE",\n "style_tag": "fashion",\n "item_code": "CODE048",\n "weight_grams": "6.58",\n "material_spec": "925 Sterling Silver \u2014 Hand-Forged Texture",\n "fallback_price": "36 960 \u20b4"\n }\n },\n {\n "type": "jewelry_item",\n "settings": {\n "custom_title": "SILVER HOOP EARRINGS",\n "collection_line": "FORGED METAL",\n "style_tag": "minimal",\n "item_code": "UG52\/40\/071",\n "weight_grams": "4.10",\n "material_spec": "925 Sterling Silver \u2014 Brushed Matte",\n "fallback_price": "8 350 \u20b4"\n }\n }\n ]\n }\n ]\n}\n{% endschema %}\n<\/code><\/pre>\n3. Compare four storefront design approaches<\/h2>\n