We’re Blend Commerce

Contact our team using the options below

hello@blendcommerce.com
+44 (0) 1789 765 822
+1 (833) 456-4236

Courtyard Offices, 55 High St, Alcester B49 5AF

Search our shop

    We’re Blend Commerce

    Getting in Touch

    Contact our team using the options below

    hello@blendcommerce.com
    +44 (0) 1789 765 822
    +1 (833) 456-4236

    Courtyard Offices, 55 High St, Alcester B49 5AF

    Liquid file naming

    Templates

    When naming Blend Pages templates for clients, they should be prepended with blend-pages. The initial template used for static back pages (e.g. about us, contact) should be called static, while extra templates should be numbered accordingly:

    blend-pages-static.liquidblend-pages-1.liquidblend-pages-2.liquid

    Sections

    Section naming should be lowercase hyphenated:

    section-name.liquid

    Snippets

    Snippets should be prepended with include :

    include-snippet-name.liquid

    Schema naming

    ID

    These should be lowercase underscored:

    display_mode

    Which would then be referenced via section.settings.display_mode for example.

    Assigns

    These should be underscored to match the ID format:

    {% assign master_class = section.settings.master_class %} 

    SCSS Styling

    Classes & ID's -TBC

    based off BEM (http://getbem.com/naming)

    A single hyphen - should be used for spaces in class names

    .featured-products

    A double underscore __ should be used to connect a class name to a main page/section:

    .featured-products__background

    A double hyphen -- should be used for adding a modifier:

    .featured-products__background--red

    Comments

    Theme info

    Each time work is done to a theme, the theme version should be updated and the information reflected at the top of the stylesheet

    /*  ========================================================    Base Theme:   Turbo 3.0.4 (https://outofthesandbox.com)    Theme Name:   BlendPagesPremium 3.1    Theme Author: Blend Commerce    Updates:    ========================================================  */

    Table of contents

    /*  ----------------------------------------------------    [blend styles]    ----------------------------------------------------  Table of contents:	0.1 Mixins	0.2 Variables	1.0	General      1.1 Style guide	    1.2 Turbo overrides	    1.3 Utility classes	    1.4 Details Index common	2.0 Sections      2.1 FAQ      2.2 Banner Image      2.3 Marquee Text Slider      2.4 Newsletter      2.5 Table      2.6 Video      2.7 Highlight	    2.8 Trust icons 	    2.9 Slick - (Carousel)		3.0 Navigation      3.1 Header	    3.2 Footer   4.0 Products       4.1 Collection       4.2 Product       4.3 Detailed Product template       4.4 Cart   5.0 Blog & Articles       5.1 Blog template       5.2 Article template    ----------------------------------------------------  */

    Headings

    Top level headings have 2 clear lines above and below them. Second level headings have a single clear line above and below them.

    /*  ----------------------------------------------------    [1.0 Top level heading]    ----------------------------------------------------  *//*  1.1 Second level heading  --------------------------  */

    General Comments

    /*  Single line comment  *//*  Multi line comment     Multi line comment  */

    Versioning

    • All version updates will remove any decimal points below it’s level.
      E.g “V1.2.5 -> V2” and “V2.4.1 -> V2.5”
    • For store redesigns, there should be a full version upgrade.
      E.g. V1.2.5 -> V2
    • For medium sized changes such as adding/restyling a new page/section, there should be a single decimal version upgrade.
      E.g. V1.2.5 -> V1.3
    • For small changes such as small styling changes, updating small text info and bug fixes do the following:
      E.g. V1.2.5 -> V1.2.6
    • Versioning should only be added between each publish, for a store setup it should be published V1 as it should be successfully published before any updating is needed. Once the theme is published and live, if there are any changes that need doing, make a copy of the theme, and use the versioning above for the new file name ensuring you are not editing the live theme file.

    About the author

    Let's achieve better Shopify store performance. Together.

    We help clients achieve significant results. On average, clients who work with Blend on design & development projects for their Shopify store achieve these results after 3 months: