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

    BlendPagesAdvanced offers everything in BlendPages plus additional universal controls and new cards.

    Universal schema controls:

    Exclusive cards:

    1. Video Banner
    2. Highlight
    3. Testimonials

    Installation

    BlendPagesAdvanced must be installed for back pages and the homepage template. It is also available for product pages as a separate upsell purchase.

    Back pages installation

    Step 1:

    Create a new page template called details-blendpagesadvanced and insert the below code:

    Grab the code

    Step 2:

    Create a new section called page-details-blendpagesadvanced-template and insert the below code:

    Grab the code

    Step 3:

    Open the following sections:

    • include-featured-blog
    • include-featured-collection
    • include-featured-text
    • include-image-with-text-overlay
    • include-video

    Insert the below code on each of those template after the closing {% endif %} for the if block statement:

    {% if template contains "blendpages" %}  {% assign title = block.settings.display_title %}{% endif %}

    Homepage installation

    Installation on homepage sections is a more manual process. Each section needs to be opened and edited:

    1) Wrap each sections html (may just be a single line include tag) in a div to apply the master class and display mode:
      <div class="{{ section.settings.master_class }} {{ section.settings.display_mode}}">
      // section html
      </div>

      The corresponding filenames for the sections are:

      Section NameFilename
      Blog Postsfeatured-blog.liquid
      Collection Listcollection-list.liquid
      Featured Collectionfeatured-collection.liquid
      Custom HTMLcustom-html.liquid
      Searchsearch-section.liquid
      Featured Promotionsfeatured-promotions.liquid
      Gallerygallery.liquid
      Image with Textimage-text.liquid
      Image with Text Overlayimage-with-text-overlay.liquid
      Logo Listlogo-bar.liquid
      Slideshowslideshow.liquid
      Dividerdivider.liquid
      Featured Productsfeatured-products.liquid
      Recently Viewed Productsrecently-viewed.liquid
      Newsletternewsletter.liquid
      Contact Formcontact-form.liquid
      Social Feedssocial-feeds.liquid
      Mapmap.liquid
      Pagecontact-page.liquid
      Rich Text and Imagefeatured-text.liquid
      Testimonialstestimonial.liquid
      Text columns with imagestext-columns-with-images.liquid
      Videovideo.liquid

      Blend custom sections:

      Section NameFilename
      Responsive Logoslogo-responsive.liquid
      Video Galleryvideo-gallery.liquid
      Video Popupvideo-popup.liquid

      2) Add the schema in to the very top of the "settings" area:

      {  "type": "text",  "id": "title",  "label": "Name this card",  "info": "Name this card for quick referencing (will not be shown on your site)."},{  "type": "select",  "id": "display_mode",  "label": "Display mode",  "info": "Choose which devices to display this content on.",  "options": [    {      "value": "",      "label": "All devices"    },    {      "value": "mobile-only",      "label": "Mobile only"    },    {      "value": "mobile-hidden",      "label": "Desktop only"    },    {      "value": "display-none",      "label": "Hidden"    }  ]},

      3) Add the schema in to the very bottom of the "settings" area:

      {  "type": "header",  "content": "DEVELOPER USE ONLY"},{  "type": "text",  "id": "master_class",  "label": "Add custom class names to this card"}

      CSS installation

      /*  --------------------------------------------------------    [Blend Pages Controls]    --------------------------------------------------------  */.display-none {  display:none !important;}@include respond-to('medium-down') {  .mobile-hidden {    display:none !important;  }}@include respond-to('medium-up') {  .mobile-only {    display:none !important;  }}

      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: