Customizing B2B Direct on the Default or Minimal theme is a fun process that can turn your businesses or organization's website into something that you and your team are proud of and provides your customers a great user experience.
If you know basic CSS + HTML + Javascript or have a web developer / manager on your team. They can utilize the following frameworks and libraries to customize your Default or Minimaled theme site further....
- Foundation framework: https://get.foundation/sites/docs/
- Material Icon library: https://material.io/resources/icons/?style=baseline
- FontAwesome library: https://fontawesome.com/v4.7.0/cheatsheet/
- jQuery library: https://www.w3schools.com/jquery/
HTML & CSS can be added at a divisional level or inline by....
- Adding a Paragraph or similar UI element.
- Clicking the element, then within the editor clicking the Source Code icon
3. Pasting in your HTML / CSS
4. Save and Publish your draft.
5. Navigate back to the frontend of your B2B Direct site and refresh the page. You maybe required to clear your cache by visiting YourDomainName.com/clear
CSS can be added at a page level by....
- Adding Style Tag Component UI element.
- Clicking the element, then within the editor clicking the Source Code icon
3. Pasting in your CSS
4. Save and Publish your draft.
5. Navigate back to the frontend of your B2B Direct site and refresh the page. You maybe required to clear your cache by visiting YourDomainName.com/clear
IDs and Classes Can Be Added To Most UI Elements
1. Click to highlight the UI Element within the page builder by clicking it.
2. On the right, notice Settings gear icon, click it
3. See where you can insert a Class Name or ID Selector specific.
4. This UI Element can now be targeting via Class Name or ID Selector.
CSS & Javascript can added at the site level by targeting specific elements & IDs by:
1. Logging into B2B Direct
2. Under Settings > Site Configuration > on the right hand side you will notice Appearance
3. Under Appearance notice CSS JS icons, click Edit
4. Within the pop up, insert your CSS or Javascript code and click Add and then Save
⚠️ Notes:
- Always backup your CSS or Javascript before saving the code. You can do this by copying and pasting your code into Notepad or TextEdit or similar plain text editor.
- Avoid Javascript modifications to checkout page that accepts credit card payments
- For the frontend, Google Dev Tools may improve your workflow: https://developers.google.com/web/tools/chrome-devtools/css
Comments
0 comments
Please sign in to leave a comment.