Create a Collage with Repositionable or Dynamic Blocks in Shopify Page

Create a Collage with Repositionable or Dynamic Blocks in Shopify Page

In this tutorial, we are going to add a collage section were you can have blocks repositioned in Shopify page using grid layout.

I do hope that Shopify will make use of the grid to position blocks easily. 

  1. Go to Online store> Themes> Actions> Edit code
  2. Go to Section folder, create a new section and name it custom-collage. Replace the code below, then click SAVE

 

 

 <link href="{{"custom-collage.css" | asset_url }}"  type="text/css" rel="stylesheet">

<div class="customCollage"

     style=" grid-template-rows:

        {% if section.settings.done_editing == true %}

                             repeat(autofit, 5vw);

            {% else %}

             repeat({{section.settings.page_row}}, 5vw);

      {% endif %}       

           ">

                 

   {% for blocks in section.blocks %}

    <div class="collageBlock"

         style="grid-column: {{blocks.settings.col1}} / span {{blocks.settings.col2}};

                grid-row: {{blocks.settings.row1}} / span {{blocks.settings.row2}};" >

      

      {% case blocks.type %}

          {% when "collage_image" %}

                            <div class="collageImageWrapper">

             <img class="collageImage" src="{{blocks.settings.collage_image | img_url: 'master' }}">

                              </div>

     

                {% when "collage_video" %}

                            <div class="collageVideoWrapper">

              <iframe class="collageVideo"

                    src="//www.youtube.com/embed/{{blocks.settings.collage_video.id}}"></iframe>

                            </div>

          {% when "collage_title" %}

          <h1 class="collageTitle">{{blocks.settings.collage_title }}</h1>

     

                 {% when "collage_content" %}

                <div class="textContent">{{blocks.settings.collage_content}}</div>

     

                            {% when "collage_product" %}

              {% assign product = all_products[blocks.settings.collage_product] %}

               {% assign product_image = product.selected_or_first_available_variant %}

                            <div class="collageProductWrapper">

             <div class="collageProduct" >

                  <img src="{{ product_image | img_url: "master" }}">

                  <span> {{product.title}} </span>

                  <span> {{product.price | money}} </span>

              </div>

                            </div>

        {% endcase %}        

 

    </div>

  {% endfor %}

</div>

 

 

{% schema %}

  {

    "name": "Custom Collage",

    "settings": [

                           {

                           "type": "range",

                           "id": "page_row",

                           "label": "Page height",

                           "max": 100,

                           "min": 5,

                           "step": 1,

                           "default": 12

                           },

                           {

                           "type": "checkbox",

                           "id": "done_editing",

                           "label": "Click when done editing",

                           "default": false

                           }

              ],

              "blocks": [

                           {

                           "name": "collage image",

                           "type": "collage_image",

                           "settings": [

                                         {

                                         "type": "image_picker",

                                         "id": "collage_image",

                                         "label": "Collage image"

                                         },

                                         {

                                         "type": "range",

                                         "id": "col1",

                                         "label": "Position left and right",

                                         "max": 50,

                                         "min": 1,

                                         "step": 1,

                                         "default": 1

                                         },

                                         {

                                         "type": "range",

                                         "id": "col2",

                                         "label": "Number of columns to occupy",

                                         "max": 50,

                                         "min": 1,

                                         "step": 1,

                                         "default": 1

                                         },

                                         {

                                         "type": "range",

                                         "id": "row1",

                                         "label": "Position up and down",

                                         "max": 50,

                                         "min": 1,

                                         "step": 1,

                                         "default": 1

                                         },

                                         {

                                         "type": "range",

                                         "id": "row2",

                                         "label": "Number of rows to occupy",

                                         "max": 50,

                                         "min": 1,

                                         "step": 1,

                                         "default": 1

                                         }

                                         ]

                           },

                           {

                           "name": "collage video",

                           "type": "collage_video",

                           "settings": [

                                         {

                                         "type": "video_url",

                                         "id": "collage_video",

                                         "label": "Collage video",

                                         "accept": ["youtube"]

                                         },

                                         {

                                         "type": "range",

                                         "id": "col1",

                                         "label": "Position left and right",

                                         "max": 50,

                                         "min": 1,

                                         "step": 1,

                                         "default": 1

                                         },

                                         {

                                         "type": "range",

                                         "id": "col2",

                                         "label": "Number of columns to occupy",

                                         "max": 50,

                                         "min": 1,

                                         "step": 1,

                                         "default": 1

                                         },

                                         {

                                         "type": "range",

                                         "id": "row1",

                                         "label": "Position up and down",

                                         "max": 50,

                                         "min": 1,

                                         "step": 1,

                                         "default": 1

                                         }

                           ]

                           },

                            {

                           "name": "collage title",

                           "type": "collage_title",

                           "settings": [

                                         {

                                         "type": "text",

                                         "id": "collage_title",

                                         "label": "Collage title"

                                         },

                                         {

                                         "type": "range",

                                         "id": "col1",

                                         "label": "Position left and right",

                                         "max": 50,

                                         "min": 1,

                                         "step": 1,

                                         "default": 1

                                         },

                                         {

                                         "type": "range",

                                         "id": "col2",

                                         "label": "Number of columns to occupy",

                                         "max": 50,

                                         "min": 1,

                                         "step": 1,

                                         "default": 1

                                         },

                                         {

                                         "type": "range",

                                         "id": "row1",

                                         "label": "Position up and down",

                                         "max": 50,

                                         "min": 1,

                                         "step": 1,

                                         "default": 1

                                         },

                                         {

                                         "type": "range",

                                         "id": "row2",

                                         "label": "Number of rows to occupy",

                                         "max": 50,

                                         "min": 1,

                                         "step": 1,

                                         "default": 1

                                         }

                                         ]

                           },

                                         {

                           "name": "collage content",

                           "type": "collage_content",

                           "settings": [

                                         {

                                         "type": "richtext",

                                         "id": "collage_content",

                                         "label": "Collage content"

                                         },

                                         {

                                         "type": "range",

                                         "id": "col1",

                                         "label": "Position left and right",

                                         "max": 50,

                                         "min": 1,

                                         "step": 1,

                                         "default": 1

                                         },

                                         {

                                         "type": "range",

                                         "id": "col2",

                                         "label": "Number of columns to occupy",

                                         "max": 50,

                                         "min": 1,

                                         "step": 1,

                                         "default": 1

                                         },

                                         {

                                         "type": "range",

                                         "id": "row1",

                                         "label": "Position up and down",

                                         "max": 50,

                                         "min": 1,

                                         "step": 1,

                                         "default": 1

                                         },

                                         {

                                         "type": "range",

                                         "id": "row2",

                                         "label": "Number of rows to occupy",

                                         "max": 50,

                                         "min": 1,

                                         "step": 1,

                                         "default": 1

                                         }

                                         ]

                           },

                           {

                           "name": "collage product",

                           "type": "collage_product",

                           "settings": [

                                         {

                                         "type": "product",

                                         "id": "collage_product",

                                         "label": "Collage product"

                                         },

                                         {

                                         "type": "range",

                                         "id": "col1",

                                         "label": "Position left and right",

                                         "max": 50,

                                         "min": 1,

                                         "step": 1,

                                         "default": 1

                                         },

                                         {

                                         "type": "range",

                                         "id": "col2",

                                         "label": "Number of columns to occupy",

                                         "max": 50,

                                         "min": 1,

                                         "step": 1,

                                         "default": 1

                                         },

                                         {

                                         "type": "range",

                                         "id": "row1",

                                         "label": "Position up and down",

                                         "max": 50,

                                         "min": 1,

                                         "step": 1,

                                         "default": 1

                                         },

                                         {

                                         "type": "range",

                                         "id": "row2",

                                         "label": "Number of rows to occupy",

                                         "max": 50,

                                         "min": 1,

                                         "step": 1,

                                         "default": 1

                                         }

                                         ]

                           }

              ],

              "presets": [

                           {

                           "name": "Custom Collage"

                           }

              ]

  }

{% endschema %}

 

  1. Go to Asset folder and create a new .css file. Name it custom.collage. Then paste the code below.

 

 

 

.customCollage {

    width: 100%;

    height: 100%;

    display: grid;

              gap: 15px;

    padding: 30px;

    grid-template-columns: repeat(12, 1fr);

  

  }

 

  .collageBlock {

    width: 100%;

    height: 100%;

  }

 

  .collageImageWrapper{

    width: 100%;

    height: 100%;

  }

 

  .collageImage {

    width: 100%;

    height: 100%;

    object-fit: cover;

  }

 

   .collageVideoWrapper{

    width: 100%;

    height: auto;

    padding-bottom: 60%;

    position: relative;

  }

 

  .collageVideo{

    width: 100%;

    height: 100%;

    position: absolute;

  }

 

  .collageTitle {

    font-size: clamp(15px, 4vw, 40px);

  }

 

  .textContent{

    width: 100%;

    height: 100%;

    overflow: hidden;

    font-size: clamp(10px, 2vw, 40px);

  }

 

  p {

  line-height: 1em;

}

 

@media screen and (min-width: 24.15em) { /* 21em "gate" * 1.15 font-size */

  p { line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 21em) / (35 - 21))); }

}

 

@media (min-width: 40.25em) { /* 35em "gate" * 1.15 font-size */

  p { line-height: 1.5em; }

}

 

 /* @media only screen and (max-width: 1050px){

    .textContent{

      line-height: 1;

    }

  }  */

 

 

   @media only screen and (max-width: 300px){

   .customCollage {

     display: flex;

     flex-direction: column;

     justify-content: center;

    }

     .customBlock {

       display: flex;

     }

    .collageTitle {

      display: flex;

      justify-content: center;

      margin: 0 auto;

    }

   }

  

You are done. (“,)

 

I encountered some issues after creating the video.  I added some codes to fix it.

 Tips:  Use the minimum page height as possible to prevent big gaps at the bottom.

Make sure to assign the number of cells (columns or rows) that fits the title or content.

              Make sure you do not have a space in the content box editor. To prevent unnecessary gaps.

             

 

 

 

How to make hero image the background for header - DAWN Theme

Hero image to be the background for header. It is possible. Just follow the steps below. I recomm...

Featured collection slider for Dawn Theme Shopify 2.0

Add a collection slider for your home page. This only works with Dawn Theme.

Adjust Main and Thumbnail Product Images in the Product Page for Dawn Theme

Dawn Theme issues with large images? Solve that using this video tutorial

Product Slider for Dawn Theme - No apps or subscript- Just a little bit of code

Add a product slider for Dawn theme, almost like Debut theme slider. No app or subscription neede...

Tab Component Section - Pure CSS

Add a tab component as a section which means, you can add it to any pages in Shopify 2.0, like pr...

Add WhatsApp to Shopify for Free - No App or Subscription

Add WhatsApp to your Shopify website without app or subscription. Personalize the icon with your ...

Product / Card Automatic Swipeable Carousel / Slider for Most of Shopify Theme

Add a carousel / slider for your product or card without an app or external library. This work in...

Awesome slideshow for most of Shopify Themes - Work well with Dawn

Awesome slideshow with 11 unique designs to choose from. No app or subscription needed. No coding...

3 comentários

Very Great Section for Front Page Design, could it applied on page also?

Jackie

Hi Dylan,
Since image are assigned to the grid area, you can manipulate its size to by occupying less or more grid areas. What I am talking about is the 13:30 part of the video. Regarding at mobile view, I cannot recreate your problem. Items should be displaying flex in mobile view as what we design in the last part of our css code

Made4uo

Hi There,

Tried installing this onto the dawn theme, and when i upload any image, they are just way too big.
And when you switch to mobile view, it only shows 1/8 of the photo..

Any solutions to fix this?

Thanks

Dylan

Deixe um comentário