Skip to content

Commit 735786d

Browse files
claudeclaude
committed
Transform skeleton theme into enterprise-ready Shopify theme
Major features added: - Comprehensive CSS design system with variables, utilities, and components - JavaScript framework for cart drawer, mobile menu, slideshows, accordions - Hero banner section with slideshow capability - Featured collection with modern product cards - Testimonials section with ratings - Newsletter signup with form validation - Enhanced header with mega menu and mobile navigation - Redesigned footer with social links and multi-column layout - Enhanced product page with gallery, tabs, and related products - AJAX cart drawer with quantity controls and free shipping bar - Image with text section with feature blocks - Logo list/brand showcase section - FAQ accordion section - Updated homepage template showcasing all new sections - Extended theme settings for colors, typography, buttons, and more
1 parent 04069e0 commit 735786d

18 files changed

+7586
-169
lines changed

‎assets/theme.css‎

Lines changed: 1966 additions & 0 deletions
Large diffs are not rendered by default.

‎assets/theme.js‎

Lines changed: 1219 additions & 0 deletions
Large diffs are not rendered by default.

‎config/settings_schema.json‎

Lines changed: 611 additions & 20 deletions
Large diffs are not rendered by default.

‎layout/theme.liquid‎

Lines changed: 46 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,70 @@
11
<!doctype html>
2-
<html lang="{{ request.locale.iso_code }}">
2+
<html lang="{{ request.locale.iso_code }}" class="no-js">
33
<head>
4-
{% # Inlined CSS Variables %}
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<meta name="theme-color" content="{{ settings.primary_color | default: '#2563eb' }}">
7+
8+
{%- comment -%} Inlined CSS Variables {%- endcomment -%}
59
{% render 'css-variables' %}
610

7-
{% comment %}
11+
{%- comment -%}
812
Font preloading:
913
1. Preconnect to font CDN for faster connection
1014
2. Preload only the critical font variant (base weight)
1115
3. Additional variants load on-demand via @font-face
12-
{% endcomment %}
13-
{% unless settings.type_primary_font.system? %}
16+
{%- endcomment -%}
17+
{%- unless settings.type_primary_font.system? -%}
1418
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
15-
16-
{% comment %} Preload the base font variant for initial page render {% endcomment %}
1719
{{ settings.type_primary_font | font_url | preload_tag: as: 'font', crossorigin: 'anonymous' }}
18-
{% endunless %}
20+
{%- endunless -%}
1921

20-
{% # Load and preload the critical CSS %}
22+
{%- if settings.type_heading_font and settings.type_heading_font != settings.type_primary_font -%}
23+
{{ settings.type_heading_font | font_url | preload_tag: as: 'font', crossorigin: 'anonymous' }}
24+
{%- endif -%}
25+
26+
{%- comment -%} Load and preload the critical CSS {%- endcomment -%}
2127
{{ 'critical.css' | asset_url | stylesheet_tag: preload: true }}
28+
{{ 'theme.css' | asset_url | stylesheet_tag }}
2229

23-
{% # Social, title, etc. %}
30+
{%- comment -%} Social, title, etc. {%- endcomment -%}
2431
{% render 'meta-tags' %}
2532

33+
{%- comment -%} JS feature detection {%- endcomment -%}
34+
<script>
35+
document.documentElement.classList.remove('no-js');
36+
document.documentElement.classList.add('js');
37+
</script>
38+
39+
{%- comment -%} Theme settings for JS {%- endcomment -%}
40+
<script>
41+
window.theme = window.theme || {};
42+
window.theme.moneyFormat = {{ shop.money_format | json }};
43+
window.theme.cartType = {{ settings.cart_type | default: 'drawer' | json }};
44+
window.theme.routes = {
45+
cart_url: '{{ routes.cart_url }}',
46+
cart_add_url: '{{ routes.cart_add_url }}',
47+
cart_change_url: '{{ routes.cart_change_url }}',
48+
cart_update_url: '{{ routes.cart_update_url }}',
49+
search_url: '{{ routes.search_url }}'
50+
};
51+
</script>
52+
2653
{{ content_for_header }}
2754
</head>
2855

29-
<body>
56+
<body class="template-{{ template.name }}{% if template.suffix %} template-{{ template.name }}-{{ template.suffix }}{% endif %}">
57+
<a href="#main-content" class="skip-link">Skip to content</a>
58+
3059
{% sections 'header-group' %}
3160

32-
{{ content_for_layout }}
61+
<main id="main-content" role="main" tabindex="-1">
62+
{{ content_for_layout }}
63+
</main>
3364

3465
{% sections 'footer-group' %}
66+
67+
{%- comment -%} Theme JavaScript {%- endcomment -%}
68+
<script src="{{ 'theme.js' | asset_url }}" defer></script>
3569
</body>
3670
</html>

‎sections/faq.liquid‎

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
{%- liquid
2+
assign heading = section.settings.heading
3+
assign subheading = section.settings.subheading
4+
assign description = section.settings.description
5+
-%}
6+
7+
<div class="section-faq py-section" data-section-id="{{ section.id }}">
8+
<div class="container">
9+
{%- if heading != blank or subheading != blank -%}
10+
<div class="section-header" data-animate>
11+
{%- if subheading != blank -%}
12+
<p class="section-subtitle">{{ subheading }}</p>
13+
{%- endif -%}
14+
15+
{%- if heading != blank -%}
16+
<h2 class="section-title">{{ heading }}</h2>
17+
{%- endif -%}
18+
19+
{%- if description != blank -%}
20+
<div class="section-description">{{ description }}</div>
21+
{%- endif -%}
22+
</div>
23+
{%- endif -%}
24+
25+
<div class="faq-list" data-accordion data-animate>
26+
{%- for block in section.blocks -%}
27+
<div class="faq-item {% if forloop.first and section.settings.first_open %}is-open{% endif %}" {{ block.shopify_attributes }}>
28+
<button
29+
type="button"
30+
class="faq-question"
31+
aria-expanded="{% if forloop.first and section.settings.first_open %}true{% else %}false{% endif %}"
32+
aria-controls="faq-answer-{{ block.id }}"
33+
>
34+
<span>{{ block.settings.question }}</span>
35+
<svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
36+
<line x1="12" y1="5" x2="12" y2="19"></line>
37+
<line x1="5" y1="12" x2="19" y2="12"></line>
38+
</svg>
39+
</button>
40+
<div
41+
id="faq-answer-{{ block.id }}"
42+
class="faq-answer"
43+
aria-hidden="{% if forloop.first and section.settings.first_open %}false{% else %}true{% endif %}"
44+
>
45+
{{ block.settings.answer }}
46+
</div>
47+
</div>
48+
{%- else -%}
49+
{%- for i in (1..4) -%}
50+
<div class="faq-item {% if forloop.first %}is-open{% endif %}">
51+
<button type="button" class="faq-question">
52+
<span>Example question {{ i }}?</span>
53+
<svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
54+
<line x1="12" y1="5" x2="12" y2="19"></line>
55+
<line x1="5" y1="12" x2="19" y2="12"></line>
56+
</svg>
57+
</button>
58+
<div class="faq-answer">
59+
<p>This is the answer to example question {{ i }}. Add your FAQ blocks in the theme editor.</p>
60+
</div>
61+
</div>
62+
{%- endfor -%}
63+
{%- endfor -%}
64+
</div>
65+
66+
{%- if section.settings.show_contact -%}
67+
<div class="faq-contact text-center" data-animate>
68+
<p class="faq-contact-text">{{ section.settings.contact_text | default: "Still have questions?" }}</p>
69+
<a href="{{ section.settings.contact_link | default: '/pages/contact' }}" class="btn btn-outline">
70+
{{ section.settings.contact_button | default: 'Contact Us' }}
71+
</a>
72+
</div>
73+
{%- endif -%}
74+
</div>
75+
</div>
76+
77+
<style>
78+
.faq-contact {
79+
margin-top: var(--space-12);
80+
padding-top: var(--space-8);
81+
border-top: 1px solid var(--color-border);
82+
}
83+
84+
.faq-contact-text {
85+
margin-bottom: var(--space-4);
86+
color: var(--color-muted);
87+
}
88+
</style>
89+
90+
{% schema %}
91+
{
92+
"name": "FAQ",
93+
"tag": "section",
94+
"class": "section-faq-wrapper",
95+
"disabled_on": {
96+
"groups": ["header", "footer"]
97+
},
98+
"settings": [
99+
{
100+
"type": "text",
101+
"id": "subheading",
102+
"label": "Subheading",
103+
"default": "FAQ"
104+
},
105+
{
106+
"type": "text",
107+
"id": "heading",
108+
"label": "Heading",
109+
"default": "Frequently Asked Questions"
110+
},
111+
{
112+
"type": "richtext",
113+
"id": "description",
114+
"label": "Description"
115+
},
116+
{
117+
"type": "checkbox",
118+
"id": "first_open",
119+
"label": "First item open by default",
120+
"default": true
121+
},
122+
{
123+
"type": "header",
124+
"content": "Contact CTA"
125+
},
126+
{
127+
"type": "checkbox",
128+
"id": "show_contact",
129+
"label": "Show contact section",
130+
"default": true
131+
},
132+
{
133+
"type": "text",
134+
"id": "contact_text",
135+
"label": "Contact text",
136+
"default": "Still have questions?"
137+
},
138+
{
139+
"type": "text",
140+
"id": "contact_button",
141+
"label": "Button label",
142+
"default": "Contact Us"
143+
},
144+
{
145+
"type": "url",
146+
"id": "contact_link",
147+
"label": "Button link"
148+
}
149+
],
150+
"blocks": [
151+
{
152+
"type": "question",
153+
"name": "Question",
154+
"settings": [
155+
{
156+
"type": "text",
157+
"id": "question",
158+
"label": "Question",
159+
"default": "What is your return policy?"
160+
},
161+
{
162+
"type": "richtext",
163+
"id": "answer",
164+
"label": "Answer",
165+
"default": "<p>We offer a 30-day return policy on all items. If you're not completely satisfied with your purchase, you can return it for a full refund or exchange.</p>"
166+
}
167+
]
168+
}
169+
],
170+
"presets": [
171+
{
172+
"name": "FAQ",
173+
"settings": {
174+
"heading": "Frequently Asked Questions",
175+
"subheading": "FAQ"
176+
},
177+
"blocks": [
178+
{
179+
"type": "question",
180+
"settings": {
181+
"question": "What is your return policy?",
182+
"answer": "<p>We offer a 30-day return policy on all items. If you're not completely satisfied with your purchase, you can return it for a full refund or exchange.</p>"
183+
}
184+
},
185+
{
186+
"type": "question",
187+
"settings": {
188+
"question": "How long does shipping take?",
189+
"answer": "<p>Standard shipping typically takes 5-7 business days. Express shipping is available for 2-3 day delivery. Free shipping on orders over $50.</p>"
190+
}
191+
},
192+
{
193+
"type": "question",
194+
"settings": {
195+
"question": "Do you ship internationally?",
196+
"answer": "<p>Yes, we ship to over 50 countries worldwide. International shipping rates and delivery times vary by location.</p>"
197+
}
198+
},
199+
{
200+
"type": "question",
201+
"settings": {
202+
"question": "How can I track my order?",
203+
"answer": "<p>Once your order ships, you'll receive an email with a tracking number and link to track your package.</p>"
204+
}
205+
}
206+
]
207+
}
208+
]
209+
}
210+
{% endschema %}

0 commit comments

Comments
 (0)