Customising the Design

introduction by default, the frontend docid\ ogkfvqx13dhw2582d57kj has relatively basic styling and tries to keep things as neutral as possible in order to allow sparklayer to be styled to match the theme and branding of your website, a large selection of variables are exposed that can be customised via adding special css variables to your store please note if you're unable to style an element to your exact needs, please contact us mailto\ contact\@sparklayer io and we'll be happy to advise on the best approach applying the customisations the customisations work by adding special snippets of css to the code of your website that subsequently then overwrite the "default" styling for sparklayer in your web browser, it's possible to isolate and view the variables really easily by inspecting element, you'll see the variable names in the developer tools section making code changes to learn more about how to apply code changes, please refer to our frontend integration guide docid\ qwxsym9x5 pviogutekcp for full details for a full list of all available styles, please refer to our guide below colours \<style> \ root { / colours / \ spark default body color #555555; \ spark primary color #000000; \ spark primary color light #f5f5f5; \ spark primary color dark #999999; \ spark secondary color #125ef8; \ spark tertiary color #00af76; \ spark lightest color #ffffff; \ spark success color #00af76; \ spark error color #ef0000; \ spark warn color #ff9243; \ spark link color #125ef8; \ spark input color #cccccc; } \</style> variable description & usage default value spark default body color body font colour #555555 spark primary color title font colour, e g price information #000000 spark primary color light light shading, e g table shading #f5f5f5 spark primary color dark dark shading #999999 spark secondary color secondary colour, e g a highlight colour #125ef8 spark tertiary color tertiary colour, e g large button colour #00af76 spark lightest color lightest colour, e g white #ffffff spark success color success message colour #00af76 spark error color error message colour #ef0000 spark warn color warning message colour #edc35c spark link color anchor link colour #125ef8 spark input color form fields border colour #cccccc typography about embedded fonts sparklayer by default uses two typefaces on the frontend body font roboto https //fonts google com/specimen/roboto highlight font poppins https //fonts google com/specimen/poppins it's possible to overwrite these using the variables listed below if you do require custom fonts for sparklayer (e g using google fonts), please ensure these are included in your website's core css file and included in your site header if necessary \<style> \ root { / typography / \ spark font default 'roboto', sans serif; \ spark font highlight 'poppins', sans serif; \ spark font weight default 400; \ spark font weight light 300; \ spark font weight medium 500; \ spark font weight heavy 600; \ spark header font 'poppins', sans serif; \ spark header font weight 500; \ spark header text transform none; \ spark header letter spacing 0eml \ spark h1 fontsize 24px; \ spark h2 fontsize 22px; \ spark h3 fontsize 20px; \ spark h4 fontsize 16px; \ spark h5 fontsize 15px; \ spark h6 fontsize 14px; \ spark pricing fontsize 16px; \ spark pricing font weight 400; \ spark pricing fontsize small 14px; \ spark packsize fontsize 16px; \ spark packsize font weight 400; \ spark packsize fontsize small 14px; \ spark product code fontsize 16px; \ spark product code font weight 400; \ spark product code fontsize small 14px; \ spark product stockstatus fontsize 16px; \ spark product stockstatus fontsize small 14px; \ spark product stockstatus align flex start; \ spark product stockstatus back order display flex; } \</style> variable description default value spark font default main body font 'roboto', sans serif spark font highlight highlight font 'poppins', sans serif spark font weight default default font weight 400 spark font weight light light font weight 300 spark font weight medium medium font weight 500 spark font weight heavy heavy font weight 600 spark header font header font 'poppins', sans serif spark header font weight header font weight 500 spark header text transform header transform none spark header letter spacing header character spacing 0em spark h1 fontsize h1 font size 24px spark h2 fontsize h2 font size 22px spark h3 fontsize h3 font size 20px spark h4 fontsize h4 font size 16px spark h5 fontsize h5 font size 15px spark h6 fontsize h6 font size 14px spark pricing fontsize pricing font size 16px spark pricing font weight price font weight 500 spark pricing fontsize small price font size on mobile 14px spark packsize font weight pack sizing font size 16px spark packsize fontsize pack sizing font weight 400 spark packsize fontsize small pack sizing font size on mobile 14px spark product code fontsize product code font size 16px spark product code font weight product code font weight 500 spark product code fontsize small product code font size on mobile 14px spark product stockstatus align the alignment of the stock status message flex start spark product stockstatus back order display the display of the pre order message flex general \<style> \ root { / general / \ spark border radius default 4px; \ spark border radius large 8px; \ spark drawer max width 700px; \ spark drawer max width wide 1000px; \ spark loading background color #dedede; \ spark loading background overlay product 255, 255, 255; \ spark container content top 3em; \ spark container content bottom 3em; \ spark container content side 4 5em; \ spark container content reduced 1 5em; \ spark spinner default color #125ef8; } \</style> variable description default value spark border radius default default border radius 4px spark border radius large overlay border radius 8px spark drawer max width width of overlay 700px spark drawer max width wide width of overlay in 'maximised' view 1000px spark loading background color loading 'skeleton' colour #dedede spark loading background overlay product loading overlay colour on product pages 255,255,255 spark container content top overlay spacing top 3em spark container content bottom overlay spacing bottom 3em spark container content side overlay spacing sides 4 5em spark container content reduced overlay spacing reduced 1 5em spark spinner default color loading spinner colour #125ef8 buttons general \<style> \ root { / buttons / \ spark button font family 'poppins', sans serif; \ spark button border 0; \ spark button font size 15px; \ spark button font weight 400; \ spark button padding 0 875em 1 75em; \ spark button radius 4px; \ spark button text transform none; \ spark button text letter spacing 0; \ spark button raised background #25ef8; \ spark button raised background hover #508aff; \ spark button raised color #ffffff; } \</style> variable description default value spark button font family button font 'poppins', sans serif spark button border button border 0 spark button font size button font size 15px spark button font weight button font weight 400 spark button padding button padding 0 875em 1 75em spark button radius button border radius 4px spark button text transform button text transform none spark button text letter spacing button letter spacing 0 spark button raised background button background #25ef8 spark button raised background hover button background hover #508aff spark button raised color button font colour #ffffff disabled buttons \<style> \ root { / disabeld buttons / \ spark button disabled background #dfdfdf; \ spark button disabled color #9f9f9f; } \</style> variable description default value spark button disabled background disabled button background #dfdfdf spark button disabled color disabled button font colour #9f9f9f large buttons \<style> \ root { / large buttons / \ spark button large font size 18px; \ spark button large padding 0 875em 1 75em; \ spark button large background #25ef8; \ spark button large background #508aff; } \</style> variable description default value spark button large font size large button font size 18px spark button large padding large button padding 0 875em 1 75em spark button large background large button background #25ef8 spark button large background large button background hover #508aff messages toast notifications \<style> \ root { / toast notifications / \ spark toast color #ffffff; \ spark toast text color #000000; \ spark toast action color #125ef8; \ spark toast border color #dddddd; \ spark toast border radius 4px; } \</style> variable description default value spark toast color toast notification background colour #ffffff spark toast text color toast notification text colour #000000 spark toast action color toast notification link colour #125ef8 spark toast border color toast notification border colour #dddddd spark toast border radius toast notification border radius 4px spark toast animation display display a progress bar block hiding the toast notification if you'd prefer to fully hide the toast notifications from displaying, you can add this css code to your website's code spark toast {display none;} general messages \<style> \ root { / general messages / \ spark message padding 0 7em 1 25em; \ spark message success background #e5fff5; \ spark message success border 1px solid #1c9665; \ spark message warn background #fdf7e3; \ spark message warn border 1px solid #edc35c; \ spark message error background #e74148; \ spark message error border 1px solid #e74148; } \</style> variable description default value spark message padding message box padding 0 7em 1 25em spark message success background message success background #e5fff5 spark message success border message success border 1px solid #1c9665 spark message warn background message warn background #fdf7e3 spark message warn border message warn border 1px solid #edc35c spark message error background message error background #e74148 spark message error border message error border 1px solid #e74148 forms input fields \<style> \ root { / input fields / \ spark form field text transform none; \ spark placeholder text color #999999; \ spark input border color #cccccc; \ spark input border 1px solid #cccccc; \ spark input radius 4px; \ spark input background #ffffff; \ spark input error color #ef0000; \ spark input success color #00af76; \ spark input focus color #125ef8; \ spark input font size 14px; \ spark input margin 0; \ spark input padding 0 75em; \ spark label font size 0 8em; \ spark input disabled color #777777; \ spark input disabled solid color #949494; } \</style> variable description default value spark form field text transform form font text transform none spark placeholder text color input field placeholder colour #999999 spark input border color input field border colour #cccccc spark input border input field border 1px solid #cccccc spark input radius input field border radius 4px spark input background input field background #ffffff spark input error color input field error colour #ef0000 spark input success color input field success colour #00af76 spark input focus color input field focus colour #125ef8 spark input font size input field font size 14px spark input margin input field margin 0 spark input padding input field padding 0 75em spark label font size label font size 0 8em spark input disabled color disabled input field colour #777777 spark input disabled solid color disabled input border colour #949494 radio buttons \<style> \ root { / radio buttons / \ spark radio fill color #125ef8; \ spark radio empty color #5a5a5a; \ spark radio border 2px solid #125ef8; } \</style> variable description default value spark radio fill color radio button selected colour #125ef8 spark radio empty color radio button unselected colour #5a5a5a spark radio border radio button border 2px solid #125ef8 select menus \<style> \ root { / select menus / \ spark select border 1px solid #cccccc; \ spark select background #ffffff; \ spark select focus 1px solid #125ef8; \ spark select font size 14px; \ spark select padding 0 75em; \ spark select radius 4px; \ spark select disabled color #999999; } \</style> variable description default value spark select border select menu border 1px solid #cccccc spark select background select menu background #ffffff spark select focus select menu focus border colour #125ef8 spark select font size select menu font size 14px spark select padding select menu padding 0 75em spark select radius select menu border radius 4px spark select disabled color select menu disabled colour #999999 tables \<style> \ root { / tables / \ spark table border color #cccccc; \ spark table striped color #f5f5f5; \ spark table header background color #ffffff; \ spark table header text color #555555; \ spark table header font weight 500; \ spark table header font size 14px; \ spark table header text transform none; \ spark table variants border color #ccccccc; } \</style> variable description default value spark table border color table border colour #cccccc spark table striped color table striped rows background #f5f5f5 spark table header background color table header background #ffffff spark table header text color table header text colour #555555 spark table header font weight table header font weight 500 spark table header font size table header font size 14px spark table header text transform table header text transform none spark table variants border color table border colour for product detail page variants #cccccc product card \<style> \ root { / product card / \ spark product card button radius 4px; \ spark product card button padding 0 75em 1em; \ spark product card pricing font size 15px; \ spark product card pricing font size small 14px; \ spark product card select min height 50px; \ spark product card stockstatus fontsize 16px; \ spark product card stockstatus fontsize small 14px; \ spark product card stockstatus align center; \ spark product stockstatus back order display none; \ spark product card tiered pricing display flex; \ spark product card tiered pricing font size 12px; } \</style> variable description default value spark product card button radius button radius 4px spark product card button padding button padding 0 75em 1em spark product card pricing font size pricing font size 15px spark product card pricing font size small pricing font size on mobile 14px spark product card select min height minimum height for select menu wrapper 50px spark product card tiered pricing display display of tiered pricing widget flex spark product card stockstatus fontsize stock status font size 16px spark product card stockstatus fontsize small stock status font size on mobile 14px spark product card stockstatus align stock status alignment center spark product card tiered pricing display tiered pricing info display flex (use none to hide) spark product card tiered pricing font size tiered pricing font size 12px dark mode if your shopify store theme is set up to use a dark theme, you can enable a special 'dark mode' in sparklayer within your frontend integration guide docid\ qwxsym9x5 pviogutekcp , simply add the following updating the display you can update the default display by adding code to your frontend integration guide docid\ qwxsym9x5 pviogutekcp frontend integration guide docid\ qwxsym9x5 pviogutekcp about how to update display settings on sparklayer / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / display { darktheme true, / other settings should show below / }, / end of code / you can also customise the look and feel by adding the following css overwrites variable description default value spark pdp price summary color default price colour #ffffff spark dark mode lightest color, default font colour #ffffff spark dark mode status in stock in stock colour #5ecfad spark dark mode status back order backorder colour #96b1ef spark dark mode status out of stock out of stock colour #ff9a9a spark dark mode table border color table border colour #555 spark dark mode table header background table header colour #000 spark dark mode table row background table row colour #333 spark dark mode table row alt background table alternate row colour #222 spark dark mode qty background quantity box colour #000 spark dark mode qty background hover quantity box hover colour #222 spark dark mode qty border color quantity box border colour #555 using "slots" to extend the interface custom slots (or "targets") allow you to enhance a range of the sparklayer frontend interfaces docid\ ccz1vnh0o6d 722w35xpa by adding your own custom code in predefined areas it's a great way to further enhance your b2b customer experience using sparklayer and you can learn more in custom slots ("targets") docid\ l 2oohjiy rax2chbmgp2