How to have a Text Column with Photos Carousel

Store Design
1

I have 3 text rows on my homepage that contain the following:

  • Photo
  • Heading
  • Text
  • Button

This functions properly with the below code in a section file "index-columns-custom.liquid but I’m seeking answers on how to make this a carousel/slider.


  

    {% if section.settings.title != blank %}
      #### {{ section.settings.title | escape }}
    {% endif %}

    
      {%- assign grid_item_width = 'large--one-third medium--one-third' -%}
      {%- assign image_size = '530x' -%}
      {% case section.blocks.size %}
        {% when 1 %}
          {%- assign grid_item_width = 'large--one-half medium--one-half' -%}
          {%- assign image_size = '780x' -%}
        {% when 2 %}
          {%- assign grid_item_width = 'large--one-half medium--one-half' -%}
          {%- assign image_size = '780x' -%}
        {% when 4 %}
          {%- assign grid_item_width = 'large--one-quarter medium--one-half' -%}
          {%- assign image_size = '780x' -%}
      {% endcase %}
      {% for block in section.blocks %}
        {% if section.blocks.size == 5 and forloop.index < 3 %}
          {%- assign column_width = 'large--one-half medium--one-half' -%}
        {% else %}
          {%- assign column_width = grid_item_width -%}
        {% endif %}
        {% if section.blocks.size == 5 and forloop.index == 3 %}

{% endif %}
        
          {% if block.settings.enable_image %}
            {% if block.settings.image != blank %}
              {% if block.settings.button_label == blank and block.settings.button_link != blank %}
                
                  

                    {{ block.settings.image | img_url: image_size | img_tag }}
                  

                
                {% else%}
                

                  {{ block.settings.image | img_url: image_size | img_tag }}
                  
                

              {% endif %}
            {% else %}
              

                {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
              

            {% endif %}
          {% endif %}
          {% if block.settings.title != blank %}
            ##### {{ block.settings.title | escape }}
          {% endif %}
          {% if block.settings.text != blank %}
            {{ block.settings.text }}

          {% endif %}
          {% if block.settings.button_label != blank and block.settings.button_link != blank %}
            
              {{ block.settings.button_label | escape }}
            
          {% endif %}
        

      {% endfor %}
    

    {% if section.blocks.size == 0 %}
      {% include 'no-blocks' %}
    {% endif %}
  

{% schema %}
  {
    "name": "Text columns with images",
    "class": "index-section",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Text columns with images"
      },
      {
        "type": "select",
        "id": "homepage_columns_color",
        "label": "Background color",
        "default": "homepage--white",
        "options": [
          { "value": "homepage--white", "label": "White"},
          { "value": "homepage--light", "label": "Light"},
          { "value": "homepage--splash", "label": "Accent"},
          { "value": "homepage--dark", "label": "Dark"}
        ]
      },
      {
        "type": "select",
        "id": "align_text",
        "label": "Text alignment",
        "default": "text-center",
        "options": [
          {
            "value": "text-left",
            "label": "Left"
          },
          {
            "value": "text-center",
            "label": "Centered"
          }
        ]
      }
    ],
    "blocks": [
      {
        "type": "text_block",
        "name": "Column",
        "settings": [
          {
            "type": "checkbox",
            "id": "enable_image",
            "label": "Show image",
            "default": true
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Add a title or tagline"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default": "

Share blog posts, products, or promotions with your customers. Use this text to describe products, share details on availability and style, or as a space to display recent reviews or FAQs.

"
          },
          {
            "type": "text",
            "id": "button_label",
            "label": "Button label",
            "info": "Leave blank to link from image"
          },
          {
            "type": "url",
            "id": "button_link",
            "label": "Button link"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Text columns custom",
        "category": "Text",
        "blocks": [
          {
            "type": "text_block"
          },
          {
            "type": "text_block"
          },
          {
            "type": "text_block"
          }
        ]
      }
    ]
  }
{% endschema %}
2

I ended up figuring it out and decided to share my solution in case it could help someone else. I tried to remember everything I did but may have forgotten a step.

The below solution has a total of 3 columns that display the following in each column in the order they are listed

  • Photo
  • Header
  • Subheader
  • Textbox (italic or regular font can be toggled in admin editor)
  • Button with customizable button text and hidden URL code (these are customized with the admin editor, not within the below code)

Please note the following features of this solution

  • A total of 3 columns are in the carousel - no more, no less (this cannot be changed without changing the code
  • All 3 columns appear on desktop and the right/left navigation buttons do not appear
  • Only 1 column appears at a time on mobile devices, the right/left navigation buttons appear, the carousel does not autoplay (this can be changed in the code), and the carousel is on an endless loop
  • The buttons are a blue colour (this can be changed in the code)
  • All photos, text fields and such can be changed from the admin editor

Here are the steps and code I can remember that made this work for me

Under “assets” open file theme.scss.liquid and paste the below code at the end of the file

@media screen and (min-width: 768px) {
  .custom-columns__slider .flickity-prev-next-button {
    display: none;
  }
}

I added the Flickity library in your theme for the carousel/slider functionality to work properly. I had previously completed this for another section in my Shopify store so this is the only step I’m not certain about.

Add the following code to theme.liquid in the header (specifically under the Header hook for plugins)

I created section custom-columns.liquid and this is the code for that section


  

    {% for i in (1..3) %}
      {% assign image_num = "image_" | append: i %}
      {% assign image = section.settings[image_num] %}
      

        
        {% assign heading_id = "image_" | append: i | append: "_heading" %}
        ## {{ section.settings[heading_id] }}
        {% assign subheading_id = "image_" | append: i | append: "_subheading" %}
        

{{ section.settings[subheading_id] }}

        {% assign text_body_id = "image_" | append: i | append: "_text_body" %}
        {% assign text_body_italic_id = "image_" | append: i | append: "_text_body_italic" %}
        

{{ section.settings[text_body_id] | newline_to_br }}

        {% assign button_url_id = "image_" | append: i | append: "_button_url" %}
        {% assign button_url_id = "image_" | append: i | append: "_button_url" %}
        {% assign button_text_id = "image_" | append: i | append: "_button_text" %}
        {{ section.settings[button_text_id] }}
        

    {% endfor %}
  

  {% if template == 'customer/account' %}
Delete this section
{% endif %}

{% schema %}
{
"name": "Custom Columns",
"settings": [
{
"type": "image_picker",
"id": "image_1",
"label": "Image 1"
},
{
"type": "text",
"id": "image_1_heading",
"label": "Heading for Image 1"
},
{
"type": "text",
"id": "image_1_subheading",
"label": "Subheading for Image 1"
},
{
"type": "textarea",
"id": "image_1_text_body",
"label": "Text Body for Image 1"
},
{
"type": "checkbox",
"id": "image_1_text_body_italic",
"label": "Make Text Body for Image 1 italic"
},
{
"type": "text",
"id": "image_1_button_url",
"label": "Button URL for Image 1"
},
{
"type": "text",
"id": "image_1_button_text",
"label": "Button Text for Image 1"
},
{
"type": "image_picker",
"id": "image_2",
"label": "Image 2"
},
{
"type": "text",
"id": "image_2_heading",
"label": "Heading for Image 2"
},
{
"type": "text",
"id": "image_2_subheading",
"label": "Subheading for Image 2"
},
{
"type": "textarea",
"id": "image_2_text_body",
"label": "Text Body for Image 2"
},
{
"type": "checkbox",
"id": "image_2_text_body_italic",
"label": "Make Text Body for Image 2 italic"
},
{
"type": "text",
"id": "image_2_button_url",
"label": "Button URL for Image 2"
},
{
"type": "text",
"id": "image_2_button_text",
"label": "Button Text for Image 2"
},
{
"type": "image_picker",
"id": "image_3",
"label": "Image 3"
},
{
"type": "text",
"id": "image_3_heading",
"label": "Heading for Image 3"
},
{
"type": "text",
"id": "image_3_subheading",
"label": "Subheading for Image 3"
},
{
"type": "textarea",
"id": "image_3_text_body",
"label": "Text Body for Image 3"
},
{
"type": "checkbox",
"id": "image_3_text_body_italic",
"label": "Make Text Body for Image 3 italic"
},
{
"type": "text",
"id": "image_3_button_url",
"label": "Button URL for Image 3"
},
{
"type": "text",
"id": "image_3_button_text",
"label": "Button Text for Image 3"
}
]
}
{% endschema %}
3

Please note I neded up changing the end of schema and added this to the end so it would show in the “add section” area of the admin editor.

],
"presets": [
{
"category": "columns",
"name": "custom columns"
}
]
}
{% endschema %}
4

Hi,

Thanks for the updates. I am trying to do something similar. Just wondering if you could share a video of how it looks or even a screenshot after the solution is implemented?