Search our shop

BlendPagesAdvanced

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 Name Filename
    Blog Posts featured-blog.liquid
    Collection List collection-list.liquid
    Featured Collection featured-collection.liquid
    Custom HTML custom-html.liquid
    Search search-section.liquid
    Featured Promotions featured-promotions.liquid
    Gallery gallery.liquid
    Image with Text image-text.liquid
    Image with Text Overlay image-with-text-overlay.liquid
    Logo List logo-bar.liquid
    Slideshow slideshow.liquid
    Divider divider.liquid
    Featured Products featured-products.liquid
    Recently Viewed Products recently-viewed.liquid
    Newsletter newsletter.liquid
    Contact Form contact-form.liquid
    Social Feeds social-feeds.liquid
    Map map.liquid
    Page contact-page.liquid
    Rich Text and Image featured-text.liquid
    Testimonials testimonial.liquid
    Text columns with images text-columns-with-images.liquid
    Video video.liquid

    Blend custom sections:

    Section Name Filename
    Responsive Logos logo-responsive.liquid
    Video Gallery video-gallery.liquid
    Video Popup video-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;
      }
    }
    Phil Penny

    Phil Penny

    Head of Design & Development