Workflow.
6 |
15 |
40 | {%- endform -%}
41 | Enter using password
16 |
17 |
28 |
29 |
30 | {%- if form.errors -%}
31 |
34 |
35 |
38 | Are you the store owner? Log in here
39 | Error
32 | {%- endif -%}
33 |
38 |
39 | {{- "accessibility.skip_to_content" | t -}}
40 |
41 |
42 |
43 |
44 | {%- section 'header-password' -%}
45 |
46 | -
51 |
- {{ 'accessibility.refresh_page' | t }} 52 |
43 |
44 | {{- "accessibility.skip_to_content" | t -}}
45 |
46 |
47 |
48 |
49 | -
54 |
- {{ 'accessibility.refresh_page' | t }} 55 |
46 |
47 | {{- "accessibility.skip_to_content" | t -}}
48 |
49 |
50 |
51 |
52 | {%- section 'header' -%}
53 |
54 | -
61 |
- {{ 'accessibility.refresh_page' | t }} 62 |
development Workflow.", 59 | "subheading": "A Shopify theme environment from scratch ⚙️, with Online Store 2.0 features. Built with performance ⚡️ and best practices in mind..", 60 | "link_label": "Get started" 61 | } 62 | } 63 | }, 64 | "order": [ 65 | "main" 66 | ] 67 | } 68 | -------------------------------------------------------------------------------- /sections/welcome.liquid: -------------------------------------------------------------------------------- 1 | {{ 'section-welcome.css' | asset_url | stylesheet_tag }} 2 | 3 |
4 |
30 |
31 |
32 | {% schema %}
33 | {
34 | "name": "t:sections.welcome.name",
35 | "tag": "section",
36 | "max_blocks": 6,
37 | "settings": [
38 | {
39 | "type": "textarea",
40 | "id": "heading",
41 | "label": "t:sections.welcome.settings.heading.label"
42 | },
43 | {
44 | "type": "textarea",
45 | "id": "subheading",
46 | "label": "t:sections.welcome.settings.subheading.label"
47 | },
48 | {
49 | "type": "text",
50 | "id": "link_label",
51 | "label": "t:sections.welcome.settings.link_label.label"
52 | }
53 | ],
54 | "blocks": [
55 | {
56 | "name": "t:sections.welcome.blocks.card.name",
57 | "type": "card",
58 | "settings": [
59 | {
60 | "type": "text",
61 | "id": "heading",
62 | "label": "t:sections.welcome.blocks.card.settings.heading.label"
63 | },
64 | {
65 | "type": "textarea",
66 | "id": "description",
67 | "label": "t:sections.welcome.blocks.card.settings.description.label"
68 | }
69 | ]
70 | }
71 | ],
72 | "presets": [
73 | {
74 | "name": "t:sections.welcome.presets.name"
75 | }
76 | ]
77 | }
78 | {% endschema %}
79 |
--------------------------------------------------------------------------------
/src/styles/base.scss:
--------------------------------------------------------------------------------
1 | // ==========================================================================
2 | // ## LAYOUT: BASE
3 | // ==========================================================================
4 |
5 | /// @content
6 | /// DO NOT ADD CLASSES OR RULES IN THIS FILE DIRECTLY.
7 | /// Instead, use imports to add extensions or snippets you made along the project.
8 | ///
9 | ///
10 | /// Production build weights only ~25kb (~4kb gzipped)
11 | ///
12 |
13 | /// - SETTINGS & TOOLS (MUST BE AT THE TOP)
14 | /// Common settings and tools.
15 | //
16 | @import './settings/colors';
17 | @import './settings/fonts';
18 | @import './settings/breakpoints';
19 |
20 | @import './tools/functions';
21 | @import './tools/mixins';
22 |
23 | /// - GENERIC
24 | /// Reset............A level playing field using @necolas’s Normalize.
25 | /// Print................Reset-like styles for print media.
26 | /// Elements.............Sensibly and tersely share some global commonalities.
27 | ///
28 | @import './generic/reset';
29 | @import './generic/print';
30 | @import './generic/elements';
31 |
32 | /// - COMPONENTS
33 | // Build and include your project’s UI components.
34 | // Uncomment and add to this as necessary.
35 | ///
36 | /// Button..............Specific styles for btn component and its variations.
37 | /// Typeface............Specific styles for heading component and its size variations.
38 | /// Field...............Specific styles for field and input component.
39 | ///
40 | @import './components/button';
41 | @import './components/typeface';
42 | @import './components/field';
43 | // @import './components/price';
44 |
45 | /// - SECTIONS
46 | ///
47 | /// Header..............Shopify section.
48 | /// Footer..............Shopify section.
49 | /// Weclome..............Shopify dynamic section.
50 | ///
51 | @import './sections/header';
52 | @import './sections/footer';
53 | @import './sections/welcome';
54 |
55 | /// - OBJECTS
56 | // Be aware that enabling offsets produces a large chunk of classes which might
57 | // bloat your CSS, depending on the amount of breakpoints you defined.
58 | // Only set this to `true` if you are absolutely sure about what you are doing.
59 | ///
60 | /// Container............Helper classes for aligning elements inside containers.
61 | ///
62 | @import './objects/container';
63 | @import './objects/grid';
64 |
65 | /// - UTILITIES
66 | /// Space................Nudge bits of the DOM around with these spacing classes.
67 | /// Display..............Helper utility classes to hide/show content.
68 | /// Align................Helper classes for aligning elements inside containers.
69 | ///
70 | @import './utilities/space';
71 | @import './utilities/display';
72 | @import './utilities/align';
73 |
--------------------------------------------------------------------------------
/src/styles/generic/_elements.scss:
--------------------------------------------------------------------------------
1 | // ==========================================================================
2 | // ## GENERIC: ELEMENTS
3 | // ==========================================================================
4 |
5 | // Some common declarations for certain elements.
6 | ///
7 |
8 | ul,
9 | ol {
10 | margin: 0;
11 | padding: 0;
12 | list-style: none;
13 | }
14 |
15 | summary {
16 | cursor: pointer;
17 | list-style: none;
18 | position: relative;
19 | }
20 |
21 | details > * {
22 | box-sizing: border-box;
23 | }
24 |
25 | a {
26 | text-decoration: none;
27 | color: inherit;
28 |
29 | &:hover {
30 | text-decoration: underline;
31 | }
32 | }
33 |
34 | // Hide empty elements
35 | a:empty,
36 | ul:empty,
37 | dl:empty,
38 | div:empty,
39 | section:empty,
40 | article:empty,
41 | p:empty,
42 | h1:empty,
43 | h2:empty,
44 | h3:empty,
45 | h4:empty,
46 | h5:empty,
47 | h6:empty {
48 | display: none !important;
49 | }
50 |
51 | p,
52 | figure {
53 | margin: 0;
54 | padding: 0;
55 | }
56 |
57 | // 1. Single taps should be dispatched immediately on clickable elements
58 | ///
59 | a,
60 | area,
61 | button,
62 | input,
63 | label,
64 | select,
65 | textarea,
66 | [tabindex] {
67 | -ms-touch-action: manipulation; // [1]
68 | touch-action: manipulation;
69 | }
70 |
71 | [hreflang] > abbr[title] {
72 | text-decoration: none;
73 | }
74 |
75 | table {
76 | border-spacing: 0;
77 | border-collapse: collapse;
78 | }
79 |
80 | button {
81 | cursor: pointer;
82 | }
83 |
84 | .a11y {
85 | position: absolute;
86 | display: flex;
87 | justify-content: space-between;
88 | align-items: center;
89 | z-index: 999;
90 | transform: translateY(-150%);
91 | transition: none;
92 |
93 | &:focus-within {
94 | transform: translateY(0%);
95 | }
96 | }
97 |
98 | // 1. Fluid images for responsive purposes.
99 | // 2. Offset `alt` text from surrounding copy.
100 | // 3. Setting `vertical-align` removes the whitespace that appears under `img`
101 | // elements when they are dropped into a page as-is. Safer alternative to
102 | // using `display: block;`.
103 | ///
104 | img {
105 | max-width: 100%; // [1]
106 | font-style: italic; // [2]
107 | vertical-align: middle; // [3]
108 | }
109 |
110 | // 4. Setting `vertical-align` removes the whitespace that appears under `img`
111 | // elements when they are dropped into a page as-is.
112 | //
113 | audio,
114 | canvas,
115 | iframe,
116 | img,
117 | svg,
118 | video {
119 | vertical-align: middle; // [4]
120 | }
121 |
122 | // 5. SVG elements should fallback to their surrounding text color.
123 | //
124 | svg {
125 | fill: currentColor; // [5]
126 | }
127 |
--------------------------------------------------------------------------------
/templates/gift_card.liquid:
--------------------------------------------------------------------------------
1 | {%- layout 'giftcard' -%}
2 |
3 |
5 |
18 |
19 | {{ section.settings.heading }}
6 |{{ section.settings.subheading }}
7 | {{ section.settings.link_label }} 10 | {%- render 'component-icon' 11 | icon: 'arrow', 12 | icon_size: 20 13 | -%} 14 |15 | Open-source MIT Licensed. GitHub v1.2.2 16 |
17 |
20 | {% for block in section.blocks %}
21 | {%- if block.settings.heading != blank and block.settings.description != blank -%}
22 |
29 |
23 |
26 | {% endif %}
27 | {% endfor %}
28 | {{ block.settings.heading }}
24 |{{ block.settings.description }}
25 |
5 | 
6 |
7 |
8 |
6 |
9 |
16 | 
26 |
27 | {%- endif -%}
28 |
45 |
46 |
17 |
18 |
19 |
20 | {%- render 'component-icon' icon: 'success' -%}{{ 'templates.gift_card.copy_code_success' | t }}
21 |
22 |
23 | {%- if gift_card.pass_url -%}
24 |
25 |
26 |
27 | {%- endif -%}
28 |
45 |