diff --git a/layout/theme.liquid b/layout/theme.liquid index cbee3de825a..d7d546a345a 100644 --- a/layout/theme.liquid +++ b/layout/theme.liquid @@ -395,7 +395,7 @@ {% comment %} Define accessible pages {% endcomment %} - {%- if customer.tags contains 'b2b' or template contains 'customers/' or request.path == '/challenge' or request.path == '/pages/trade-login' -%} + {%- if customer.tags contains 'b2b' or template contains 'customers/' or request.path == '/challenge' or request.path == '/pages/b2b-login' -%} {% assign showSiteForB2B = false %} {% endif %} {%- if showSiteForB2B == blank -%} @@ -492,7 +492,7 @@ {% endcomment %} {%- if showB2BLogin -%} {% endif %} {% comment %} END {% endcomment %} diff --git a/sections/main-b2b-login.liquid b/sections/main-b2b-login.liquid new file mode 100644 index 00000000000..e7d25413046 --- /dev/null +++ b/sections/main-b2b-login.liquid @@ -0,0 +1,1088 @@ +{% comment %} + + ********************* + + DOCUMENTATION + You can see how this works in our online guide here https://docs.sparklayer.io/shopify-registration-form + + ********************* + + SETUP + Add this code to a new file /sections/b2b-login.liquid + Next, add a new page /templates/page.b2b-login.liquid ensuring it is a liquid page. Add this code {% section 'b2b-login' %} + Next, in your Shopify Admin, go to Online Store > Pages > Add page. Create a new page, under "Search engine listing", set the "URl handle" to "b2b-login". From the "Template" section, choose "b2b-login" + Once this is done, go to Online Store and click "Customize" on your theme. Search for "b2b-login" and you can then edit how this page works and looks + + ********************* + + MAKING UPDATES + You can edit the source HTML and Liquid code below + You can edit the source CSS code below + You can configure the Shopify JSON below + + ********************* + + OTHER NOTES + If you're using Shopify "Customer Accounts", users need to click to sign in. If you're using Shopify "Legacy Accounts", they can sign in with an email and password + If a logged in B2B customer visits this page, they'll be redirected back to the homepage. You can edit this by searching for 'window.location.href' + + ********************* + +{% endcomment %} + +{%- if customer.tags contains 'b2b' -%} + +{% endif %} + + +{% comment %} + +********************* + +NOTES +This is the Shopify Liquid code that generates the page layout + +********************* + +{% endcomment %} + + +
+
+
+
+ + +
+
+ +{% comment %} + +********************* + +NOTES +This is the CSS that controls the page layout and design + +********************* + +{% endcomment %} + + + +{% comment %} + +********************* + +NOTES +This is the JavaScript that controls basic behaviour such as the form showing and the FAQ accordion. + +********************* + +{% endcomment %} + + + + + + +{% comment %} + +********************* + +NOTES +This is the scheme that controls the content in the Shopify Customizer tool + +********************* + +{% endcomment %} + + + +{% schema %} +{ + "name": "Login Page", + "settings": [ + { + "type": "header", + "content": "Main Layout", + "info": "Configure the main layout of your login page. Learn more at docs.sparklayer.io/shopify-registration-form" + }, + { + "type": "select", + "id": "page_width", + "label": "Page Width", + "options": [ + { "value": "fixed", "label": "Fixed Width" }, + { "value": "full", "label": "Full Width" } + ], + "default": "fixed" + }, + { + "type": "select", + "id": "login_type", + "label": "Login type", + "options": [ + { "value": "password", "label": "Email address and password" }, + { "value": "passwordless", "label": "Passwordless login" } + + ], + "default": "password", + "info": "Choose how you want customers to sign in. Passwordless will require you to use Shopify 'Customer Accounts'" +}, +{ +"type": "image_picker", +"id": "featured_image", +"label": "Background Image", +"info": "The image should ideally be rectangular" +}, +{ + "type": "select", + "id": "background_width", + "label": "Background Size", + "options": [ + { "value": "fill", "label": "Fixed width" }, + { "value": "cover", "label": "Fill container" } + ], + "default": "cover" + }, +{ +"type": "color", +"id": "background_color", +"label": "Background color", +"default": "#f1f1f1" +}, + +{ +"type": "range", +"id": "base_page_spacing", +"label": "Page Spacing (px)", +"min": 24, +"max": 84, +"step": 6, +"default": 54 +}, +{ +"type": "header", +"content": "Font Styling", +"info": "Set the defaults for the fonts." +}, + +{ +"type": "color", +"id": "base_font_color", +"label": "Default Font Color", +"default": "#555" +}, +{ +"type": "range", +"id": "base_font_size", +"label": "Default Font Size (px)", +"min": 12, +"max": 24, +"step": 1, +"default": 15 +}, + + +{ +"type": "color", +"id": "base_link_color", +"label": "Default Link Color", +"default": "#000" +}, + +{ +"type": "header", +"content": "Header Styling", +"info": "Set the defaults for the page headers." +}, +{ +"type": "range", +"id": "base_header_primary_font_size", +"label": "Heading Font Size (px) - Primary", +"min": 12, +"max": 40, +"step": 1, +"default": 28 +}, + +{ +"type": "color", +"id": "base_header_primary_color", +"label": "Heading Font Color - Primary", +"default": "#000" +}, + +{ +"type": "range", +"id": "base_header_secondary_font_size", +"label": "Heading Font Size (px) - Secondary", +"min": 12, +"max": 40, +"step": 1, +"default": 20 +}, + +{ +"type": "color", +"id": "base_header_secondary_color", +"label": "Heading Font Color - Secondary", +"default": "#000" +}, + + + +{ +"type": "header", +"content": "Content", +"info": "Customize the wording of your login page." +}, + +{ +"type": "text", +"id": "title", +"label": "Title", +"default": "Welcome to our B2B login" +}, +{ +"type": "textarea", +"id": "intro_text", +"label": "Introduction Text", +"default": "Sign in below to get instant access to your B2B account and start placing orders." +}, + +{ +"type": "text", +"id": "login_email", +"label": "Email", +"default": "Enter your email address" +}, + +{ +"type": "text", +"id": "login_password", +"label": "Password", +"default": "Enter your password" +}, +{ +"type": "text", +"id": "sign_in", +"label": "Sign in button", +"default": "Sign In" +}, +{ +"type": "text", +"id": "forgot_password", +"label": "Forgot password", +"default": "Forgot password?" +}, + +{ +"type": "text", +"id": "open_account_title", +"label": "Open Account Title", +"default": "Interested in opening an account?" +}, +{ +"type": "richtext", +"id": "open_account_text", +"label": "Open Account Text", +"default": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

" +}, +{ +"type": "text", +"id": "open_account_button", +"label": "Open Account Button Title", +"default": "Apply for an account" +}, +{ +"type": "text", +"id": "apply_submit", +"label": "Submit button", +"default": "Apply Now" +}, +{ +"type": "text", +"id": "form_message_success", +"label": "Form Submit - Success Message", +"default": "Thank you for your messsage, we will be in touch shortly." +}, +{ +"type": "text", +"id": "form_message_error", +"label": "Form Submit - Error Message", +"default": "Sorry, there appears to be an error in your form submission." +}, +{ +"type": "header", +"content": "Form Action", +"info": "Customize how the form works" +}, +{ +"type": "select", +"id": "form_action", +"label": "Form Action", +"options": [ +{ "value": "email", "label": "Send an email to the store owner" }, +{ "value": "custom_form", "label": "Embed custom contact form" }, +{ "value": "redirect", "label": "Go to new page URL" } +], +"default": "email", +"info": "If using 'Send an email', you can configure this below under 'Form - Send an email'." +}, +{ +"type": "html", +"id": "custom_form_html", +"label": "Custom Contact Form HTML", +"info": "Only used if 'Embed custom contact form' is selected above.", +"default": "

Paste your custom form HTML here

" +}, +{ +"type": "url", +"id": "redirect_url", +"label": "Redirect URL", +"info": "Only used if 'Go to new page URL' is selected above." +}, + +{ +"type": "header", +"content": "Form - Send an email", +"info": "When the form is submitted, it will be sent to the store admin of your Shopify store. You can customize the form fields that show and add new ones to the left under 'Login Page'." +}, + +{ +"type": "text", +"id": "form_email_subject", +"label": "Email subject", +"default": " New B2B customer application to review", +"info": "This will show in the email sent via Shopify" +}, + +{ +"type": "text", +"id": "form_email_field1", +"label": "Field 1", +"default": "Company Name", +"info": "Leave blank to remove this field" +}, +{ +"type": "text", +"id": "form_email_field2", +"label": "Field 2", +"default": "Email", +"info": "Leave blank to remove this field" +}, +{ +"type": "text", +"id": "form_email_field3", +"label": "Field 3", +"default": "Phone", +"info": "Leave blank to remove this field" +}, +{ +"type": "text", +"id": "form_email_field4", +"label": "Field 4", +"default": "Your Tax ID", +"info": "Leave blank to remove this field" +}, +{ +"type": "text", +"id": "form_email_field5", +"label": "Comments", +"default": "Comments", +"info": "This field always shows at the end to allow comments to be added. Leave blank to remove this field" +}, +{ +"type": "header", +"content": "FAQs", +"info": "Include a FAQ section. You can add FAQs on the left by clicking 'Add FAQs' under 'Login Page'" +}, +{ +"type": "checkbox", +"id": "show_faqs", +"label": "Show FAQs", +"info": "If enabled, you can manually add FAQs", +"default": false +}, +{ +"type": "text", +"id": "faq_title", +"label": "FAQs Title", +"default": "Frequently Asked Questions" +}, + +{ +"type": "header", +"content": "Buttons", +"info": "Customize the button styles" +}, + +{ +"type": "color", +"id": "button_color", +"label": "Button Background Color - Primary", +"default": "#000" +}, +{ +"type": "color", +"id": "button_hover_color", +"label": "Button Background Hover Color - Primary", +"default": "#333" +}, +{ +"type": "color", +"id": "button_font_color", +"label": "Button Font Color - Primary", +"default": "#fff" +}, + + +{ +"type": "color", +"id": "button_border_color", +"label": "Button Border Color - Primary", +"default": "#000" +}, +{ +"type": "color", +"id": "button_secondary_color", +"label": "Button Background Color - Secondary", +"default": "#fff" +}, +{ +"type": "color", +"id": "button_secondary_hover_color", +"label": "Button Background Hover Color - Secondary", +"default": "#eee" +}, +{ +"type": "color", +"id": "button_secondary_font_color", +"label": "Button Font Color - Secondary", +"default": "#000" +}, + + +{ +"type": "color", +"id": "button_secondary_border_color", +"label": "Button Border Color - Secondary", +"default": "#000" +}, +{ +"type": "range", +"id": "button_font_size", +"label": "Button Font Size (px)", +"min": 12, +"max": 24, +"step": 1, +"default": 15 +}, +{ +"type": "range", +"id": "button_border_radius", +"label": "Button Border Radius (px)", +"min": 0, +"max": 50, +"step": 1, +"default": 4 +}, +{ +"type": "header", +"content": "Form", +"info": "Customize the form styles" +}, +{ +"type": "color", +"id": "input_background", +"label": "Input Background Color", +"default": "#ffffff" +}, +{ +"type": "color", +"id": "input_border_color", +"label": "Input Border Color", +"default": "#ccc" +}, +{ +"type": "color", +"id": "input_border_hover_color", +"label": "Input Border Hover Color", +"default": "#666" +}, +{ +"type": "color", +"id": "input_text_color", +"label": "Input Text Color", +"default": "#666" +}, +{ +"type": "range", +"id": "input_font_size", +"label": "Input Font Size (px)", +"min": 12, +"max": 24, +"step": 1, +"default": 15 +}, +{ +"type": "range", +"id": "input_border_radius", +"label": "Input Border Radius (px)", +"min": 0, +"max": 50, +"step": 1, +"default": 4 +} +], + "blocks": [ + { + "type": "feature", + "name": "FAQs", + "settings": [ + { + "type": "text", + "id": "block_title", + "label": "Question", + "default": "What are the benefits of having a B2B account?" + }, + { + "type": "richtext", + "id": "block_text", + "label": "Answer", + "default": "

With a B2B account, you get exclusive discounts, bulk pricing, and access to our latest product releases.

" + } + ] + }, + { + "type": "form_field", + "name": "Form Field", + "settings": [ + { + "type": "text", + "id": "field_name", + "label": "Field Name (for form submission)", + "default": "Field Name Here" + }, + { + "type": "select", + "id": "field_type", + "label": "Field Type", + "options": [ + { "value": "text", "label": "Text" }, + { "value": "textarea", "label": "Textarea" } + ], + "default": "text" + }, + { + "type": "text", + "id": "placeholder", + "label": "Placeholder Text", + "default": "Enter value" + } + ] + } + ], +"presets": [ + { + "name": "Login Page", + "category": "Wholesale & B2B" + } +] +} +{% endschema %} \ No newline at end of file diff --git a/sections/trade-login.liquid b/sections/trade-login.liquid deleted file mode 100644 index 0e32c0650f1..00000000000 --- a/sections/trade-login.liquid +++ /dev/null @@ -1,568 +0,0 @@ -{% comment %} - Redirect logged in users back to the homepage -{% endcomment %} - -{%- if customer.tags contains 'b2b' -%} - -{% endif %} - -
-
-
-
- - -
- - - -{% schema %} -{ - "name": "Login Page", - "settings": [ - { - "type": "image_picker", - "id": "featured_image", - "label": "Background Image", - "info": "The image should ideally be rectangular" - }, - { - "type": "color", - "id": "background_color", - "label": "Background color", - "default": "#f1f1f1" - }, - { - "type": "text", - "id": "title", - "label": "Title", - "default": "Welcome to our trade login" - }, - { - "type": "textarea", - "id": "intro_text", - "label": "Intoduction Text", - "default": "Sign in below to get instant access to your trade account and to start placing orders." - }, - { - "type": "text", - "id": "open_account_title", - "label": "Open Account Title", - "default": "Interest in opening an account?" - }, - { - "type": "richtext", - "id": "open_account_text", - "label": "Open Account Text", - "default": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

" - }, - { - "type": "text", - "id": "open_account_button", - "label": "Open Account Button Title", - "default": "Apply for an account" - }, - { - "type": "checkbox", - "id": "use_custom_form", - "label": "Use custom contact form", - "info": "If enabled, you can paste in your HTML below. If disabled, the standard Shopify contact form will be used and the fields can be customised within the trade-application.liquid template", - "default": false - }, - { - "type": "html", - "id": "open_account_form", - "label": "Custom Account Application Form", - "default": "Paste in form HTML here" - }, - { - "type": "checkbox", - "id": "show_faqs", - "label": "Show FAQs", - "info": "If enabled, you can manually add FAQs", - "default": true - }, - { - "type": "text", - "id": "faq_title", - "label": "FAQs title", - "default": "Question & Answers" - } - ], - "blocks": [ - { - "type": "feature", - "name": "FAQs", - "settings": [ - { - "type": "text", - "id": "block_title", - "label": "Question" - }, - { - "type": "richtext", - "id": "block_text", - "label": "Answer" - } - ] - } - ], - "presets": [ - { - "name": { - "en": "Login Page" - }, - "category": { - "en": "Wholesale & B2B" - } - } - ] -} -{% endschema %} - - - diff --git a/templates/page.b2b-login.json b/templates/page.b2b-login.json new file mode 100644 index 00000000000..fc0f14b16ff --- /dev/null +++ b/templates/page.b2b-login.json @@ -0,0 +1,19 @@ +/* + * ------------------------------------------------------------ + * IMPORTANT: The contents of this file are auto-generated. + * + * This file may be updated by the Shopify admin theme editor + * or related systems. Please exercise caution as any changes + * made to this file may be overwritten. + * ------------------------------------------------------------ + */ +{ + "sections": { + "main": { + "type": "main-b2b-login" + } + }, + "order": [ + "main" + ] +} \ No newline at end of file diff --git a/templates/page.trade-login.liquid b/templates/page.trade-login.liquid deleted file mode 100644 index 5f1fee9b82b..00000000000 --- a/templates/page.trade-login.liquid +++ /dev/null @@ -1 +0,0 @@ -{% section 'trade-login' %} \ No newline at end of file