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.

             

 

 

 

Color Swatch for Dawn with Images- No App or Subscription needed

Add a color swatch to your Dawn Theme for FREE. Color swatch comes with image. Multiple design av...

Add Custom Textfield / Dropdown in Dawn Theme Shopify 2.0 - No APP needed

Add a personalize textbox to Dawn product page. You can add dropdown, radio buttons and many more...

Convert Dawn Product Page Like Debut Theme with Product Slider

Product slider but counter does not make sense? See my way around. Transform your Dawn product pa...

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

3 comments

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

Leave a comment