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: