Customized Multicolumn with Video Option

Customized Multicolumn with Video Option

Compatibility: All Shopify 2.0 FREE themes themes only. Works from lower version to version 11

We customized the multi-column that would have a pop up to display more related images. You will need to create a page and upload your images. 

You can check the demo store here. Password: made4uo

Customized Multicolumn with video option

What are Customized Multicolumn with Video Option?

This functionality allows you to display multiple product images alongside the option to include videos within the same multicolumn layout. This creates a richer product presentation experience for your customers.

Benefits:

  • Enhanced Product Presentation: Customers can not only see your products from various angles in high-quality images, but also get a dynamic view through product videos. This can provide a more comprehensive understanding of the product's features and functionalities.
  • Increased Engagement: The combination of images and videos can grab customer attention more effectively, leading to a more engaging browsing experience. Videos can be particularly useful for showcasing product features in action or providing demonstrations.
  • Potential Sales Boost: A richer product presentation with both images and videos can build stronger customer confidence and potentially lead to higher conversion rates.

Why Use Customized Multicolumn with Video Option?

There are several compelling reasons to consider using a "Customized Multicolumn with Video Option" on your Shopify store:

Enhanced Product Presentation:

  • Go Beyond Images: Move away from static images and provide customers with a richer product experience by showcasing them from various angles in high-quality images alongside dynamic product videos.
  • Deeper Understanding: Videos can effectively demonstrate product features and functionalities in action, allowing customers to gain a more comprehensive understanding of what they're considering buying.

Increased Customer Engagement:

  • Grab Attention: The combination of engaging visuals (images) and dynamic content (videos) can be more effective at grabbing customer attention and keeping them interested in your products.
  • Interactive Experience: Videos can create a more interactive browsing experience, encouraging customers to spend more time exploring your product offerings.

Potential Sales Boost:

  • Build Confidence: A richer product presentation with both images and videos can build stronger customer confidence by providing a more complete picture of the product. This can lead to a higher likelihood of purchase.
  • Reduce Returns: By effectively showcasing product features through videos, you can potentially reduce customer returns stemming from a lack of understanding about the product's functionality.

Overall Benefits:

  • Competitive Advantage: By offering a more engaging and informative product presentation experience, you can potentially differentiate yourself from competitors who rely solely on static images.
  • Improved Brand Storytelling: Videos can be leveraged to tell your brand story and connect with customers on a deeper level, potentially leading to increased brand loyalty.

Additional Considerations:

While the benefits are significant, implementing a customized multicolumn with video option requires careful planning:

  • Technical Expertise: Depending on the chosen method (code modification vs. purchased solutions), some technical knowledge might be needed.
  • Mobile Optimization: Ensure the multicolumn layout with video playback functions flawlessly on mobile devices for a seamless browsing experience across all platforms.
  • Video Optimization: Optimize your product videos for web delivery to avoid loading issues that can negatively impact user experience.

By carefully weighing these factors and implementing the functionality effectively, a customized multicolumn with video option can be a powerful tool for enhancing product presentations, increasing customer engagement, and ultimately boosting sales on your Shopify store.

What you are buying:

  • Modified multi-column that has a pop-up
  • Pop-up will be from a page link
  • Able to add a video instead of image
  • Autoplay and hide controls available options for video
  • Options to have different image ration in every block

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

[]

Steps on how to add Customized Multicolumn with Video Option

Step #1. Create a page

From your Admin page, go to Online store > Pages > Add a page.

Step #2. Insert images

The title of the page will be used as your page link but this will not appear in the customized multi-column. Add the images in the content area by clicking the "insert image" icon, and make sure to click SAVE.

Step #3. Open your code editor

We need to edit the code of the theme. From your Admin page, go to Online store > Themes > Actions > Edit Code

Step #4. Create a new section file

In Section folder, create a new section, name it whatever you want, then replace the default code with the code below Make sure to SAVE.

 

{{ 'section-multicolumn.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{%- style -%}
  preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: none;
  }
  .preview--active {
    display: block !important;
  }
  .preview--container {
    position: relative;
    background: rgba(0, 0, 0, 0.7);
    width: 100vw;
    height: 100vh;
    display: flex;
  }
  .preview--button {
    position: absolute;
    right: clamp(20px, 5vw, 100px);
    top: 50px;
    width: 70%;
    display: flex;
    margin: auto;
    justify-content: flex-end;
    cursor: pointer;
  }
  .preview--button span {
    cursor: pointer;
    background: #fff;
    color: #000;
    width: 25px;
    aspect-ratio: 1;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    transition: scale 0.5s ease;
  }
  .preview--button span:hover {
    scale: 1.2;
  }
  .preview--wrapper {
    width: 71%;
    height: 80%;
    display: block;
    margin: auto;
    overflow: auto;
    align-self: center;
    background: white;
    padding: 2rem;
  }
  @media only screen and (min-width: 1200px) {
    .preview--wrapper::-webkit-scrollbar {
      width: 5px;
    }
    .preview--wrapper::-webkit-scrollbar-track {
      background: transparent;
    }
    .preview--wrapper::-webkit-scrollbar-thumb {
      background: #888;
    }
  }
  @media only screen and (max-width: 481px) {
    .preview--wrapper {
      width: 95%;
    }
  }
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }
  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}
{%- liquid
  assign columns_mobile_int = section.settings.columns_mobile | plus: 0
  assign show_mobile_slider = false
  if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int
    assign show_mobile_slider = true
  endif
-%}
<div class="multicolumn color-{% if section.settings.color_scheme %}{{ section.settings.color_scheme }}{% else %}{{ section.settings.color_scheme_old }}{% endif %}  gradient{% unless section.settings.background_style == 'none' and settings.text_boxes_border_thickness > 0 or settings.text_boxes_shadow_opacity > 0 %} background-{{ section.settings.background_style }}{% endunless %}{% if section.settings.title == blank %} no-heading{% endif %}">
  <div
    class="page-width section-{{ section.id }}-padding isolate{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
    {% if settings.animations_reveal_on_scroll %}
      data-cascade
    {% endif %}
  >
    {%- unless section.settings.title == blank -%}
      <div class="title-wrapper-with-link title-wrapper--self-padded-mobile title-wrapper--no-top-margin">
        <h2 class="title inline-richtext {{ section.settings.heading_size }}">
          {{ section.settings.title }}
        </h2>
        {%- if section.settings.button_label != blank and show_mobile_slider -%}
          <a href="{{ section.settings.button_link }}" class="link underlined-link large-up-hide">
            {{- section.settings.button_label | escape -}}
          </a>
        {%- endif -%}
      </div>
    {%- endunless -%}
    <slider-component class="slider-mobile-gutter">
      <ul
        class="multicolumn-list contains-content-container grid grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop{% if show_mobile_slider %} slider slider--mobile grid--peek{% endif %}"
        id="Slider-{{ section.id }}"
        role="list"
      >
        {%- liquid
          assign highest_ratio = 0
          for block in section.blocks
            if block.settings.image.aspect_ratio > highest_ratio
              assign highest_ratio = block.settings.image.aspect_ratio
            endif
          endfor
        -%}
        {%- for block in section.blocks -%}
          {%- assign empty_column = '' -%}
          {%- if block.settings.image == blank
            and block.settings.title == blank
            and block.settings.text == blank
            and block.settings.link_label == blank
          -%}
            {%- assign empty_column = ' multicolumn-list__item--empty' -%}
          {%- endif -%}
 
          <li
            id="Slide-{{ section.id }}-{{ forloop.index }}"
            class="multicolumn-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}{% if section.settings.column_alignment == 'center' %} center{% endif %}{{ empty_column }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
            {{ block.shopify_attributes }}
            {% if settings.animations_reveal_on_scroll %}
              data-cascade
              style="--animation-order: {{ forloop.index }};"
            {% endif %}
          >
            <div class="multicolumn-card content-container">
              {%- if block.settings.image != blank or block.settings.video_link != blank -%}
                {% if block.settings.image_ratio == 'adapt' or block.settings.image_ratio == 'circle' %}
                  {% assign spaced_image = true %}
                {% endif %}
                <div class="multicolumn-card__image-wrapper multicolumn-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} multicolumn-card-spacing{% endif %}">
                  <div
                    class="media media--transparent media--{{ block.settings.image_ratio }}"
                    {% if block.settings.image_ratio == 'adapt' %}
                      style="padding-bottom: {% if highest_ratio %}{{ 1 | divided_by: highest_ratio | times: 100 }}{% else %}133{% endif %}%;"
                    {% endif %}
                  >
                    {% if block.settings.video_link != blank %}
                      <video
                        width="320"
                        height="240"
                        {% unless block.settings.hide_controls %}
                          controls
                        {% endunless %}
                        {% if block.settings.video_autoplay %}
                          autoplay muted
                        {% endif %}
                        {% unless block.settings.image_ratio == 'adapt' %}
                          style="object-fit: cover"
                        {% endunless %}
                      >
                        <source src="{{ block.settings.video_link }}" type="video/mp4">
                        <source src="{{ block.settings.video_link }}" type="video/ogg">
                        Your browser does not support the video tag.
                      </video>
                    {% else %}
                      {%- liquid
                        assign number_of_columns = section.settings.columns_desktop
                        assign number_of_columns_mobile = section.settings.columns_mobile
                        assign grid_space_desktop = number_of_columns | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px'
                        assign grid_space_tablet = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px'
                        assign grid_space_mobile = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | divided_by: 2 | plus: 30 | append: 'px'
                        if section.settings.image_width == 'half'
                          assign image_width = 0.5
                        elsif section.settings.image_width == 'third'
                          assign image_width = 0.33
                        else
                          assign image_width = 1
                        endif
                      -%}
                      {% capture sizes %}
                      (min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - {{ grid_space_desktop }}) * {{ image_width }} /  {{ number_of_columns }}),
                      (min-width: 990px) calc((100vw - {{ grid_space_desktop }}) * {{ image_width }} / {{ number_of_columns }}),
                      (min-width: 750px) calc((100vw - {{ grid_space_tablet }}) * {{ image_width }} / {{ number_of_columns_mobile }}),
                      calc((100vw - {{ grid_space_mobile }}) * {{ image_width }} / {{ number_of_columns_mobile }})
                    {% endcapture %}
                      {{
                        block.settings.image
                        | image_url: width: 3200
                        | image_tag:
                          loading: 'lazy',
                          widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200',
                          sizes: sizes,
                          class: 'multicolumn-card__image'
                      }}
                    {% endif %}
                  </div>
                </div>
              {%- endif -%}
              <div class="multicolumn-card__info">
                {%- if block.settings.title != blank -%}
                  <h3 class="inline-richtext">{{ block.settings.title }}</h3>
                {%- endif -%}
                {%- if block.settings.text != blank -%}
                  <div class="rte">{{ block.settings.text }}</div>
                {%- endif -%}
                {%- if block.settings.link_label != blank -%}
                  {% if block.settings.page != blank %}
                    <page-preview>
                      <button class="link animate-arrow" data-page-id="{{ block.id }}">
                        {{ block.settings.link_label | escape -}}
                        <span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
                      </button>
                    </page-preview>
                  {% else %}
                    <a
                      class="link animate-arrow"
                      {% if block.settings.link == blank %}
                        role="link" aria-disabled="true"
                      {% else %}
                        href="{{ block.settings.link }}"
                      {% endif %}
                    >
                      {{- block.settings.link_label | escape -}}
                      <span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span></a
                    >
                  {%- endif -%}
                {%- endif -%}
              </div>
            </div>
          </li>
        {%- endfor -%}
      </ul>
      {%- if show_mobile_slider -%}
        <div class="slider-buttons no-js-hidden medium-hide">
          <button
            type="button"
            class="slider-button slider-button--prev"
            name="previous"
            aria-label="{{ 'general.slider.previous_slide' | t }}"
          >
            {% render 'icon-caret' %}
          </button>
          <div class="slider-counter caption">
            <span class="slider-counter--current">1</span>
            <span aria-hidden="true"> / </span>
            <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
            <span class="slider-counter--total">{{ section.blocks.size }}</span>
          </div>
          <button
            type="button"
            class="slider-button slider-button--next"
            name="next"
            aria-label="{{ 'general.slider.next_slide' | t }}"
          >
            {% render 'icon-caret' %}
          </button>
        </div>
      {%- endif -%}
    </slider-component>
    <div class="center{% if show_mobile_slider %} small-hide medium-hide{% endif %}">
      {%- if section.settings.button_label != blank -%}
        <a
          class="button button--primary"
          {% if section.settings.button_link == blank %}
            role="link" aria-disabled="true"
          {% else %}
            href="{{ section.settings.button_link }}"
          {% endif %}
        >
          {{ section.settings.button_label | escape }}
        </a>
      {%- endif -%}
    </div>
  </div>
  {% for block in section.blocks %}
    <preview-modal class="hide-preview" data-block="{{ block.id }}">
      <div class="preview--container">
        <div class="preview--button">
          <span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              aria-hidden="true"
              focusable="false"
              role="presentation"
              class="icon icon-close"
              fill="none"
              viewBox="0 0 18 17"
            >
              <path d="M.865 15.978a.5.5 0 00.707.707l7.433-7.431 7.579 7.282a.501.501 0 00.846-.37.5.5 0 00-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 10-.707-.708L8.991 7.853 1.413.573a.5.5 0 10-.693.72l7.563 7.268-7.418 7.417z" fill="currentColor">
            </svg>
          </span>
        </div>
        <div class="preview--wrapper">
          {{ block.settings.page.content }}
        </div>
      </div>
    </preview-modal>
  {% endfor %}
</div>
 
{% schema %}
{
  "name": "Customize Multicolumn",
  "class": "section",
  "tag": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "inline_richtext",
      "id": "title",
      "default": "Multicolumn",
      "label": "t:sections.multicolumn.settings.title.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "select",
      "id": "image_width",
      "options": [
        {
          "value": "third",
          "label": "t:sections.multicolumn.settings.image_width.options__1.label"
        },
        {
          "value": "half",
          "label": "t:sections.multicolumn.settings.image_width.options__2.label"
        },
        {
          "value": "full",
          "label": "t:sections.multicolumn.settings.image_width.options__3.label"
        }
      ],
      "default": "full",
      "label": "t:sections.multicolumn.settings.image_width.label"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.multicolumn.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.multicolumn.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.multicolumn.settings.image_ratio.options__3.label"
        },
        {
          "value": "circle",
          "label": "t:sections.multicolumn.settings.image_ratio.options__4.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.multicolumn.settings.image_ratio.label"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 6,
      "step": 1,
      "default": 3,
      "label": "t:sections.multicolumn.settings.columns_desktop.label"
    },
    {
      "type": "select",
      "id": "column_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.multicolumn.settings.column_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.multicolumn.settings.column_alignment.options__2.label"
        }
      ],
      "default": "left",
      "label": "t:sections.multicolumn.settings.column_alignment.label"
    },
    {
      "type": "select",
      "id": "background_style",
      "options": [
        {
          "value": "none",
          "label": "t:sections.multicolumn.settings.background_style.options__1.label"
        },
        {
          "value": "primary",
          "label": "t:sections.multicolumn.settings.background_style.options__2.label"
        }
      ],
      "default": "primary",
      "label": "t:sections.multicolumn.settings.background_style.label"
    },
    {
      "type": "text",
      "id": "button_label",
      "default": "Button label",
      "label": "t:sections.multicolumn.settings.button_label.label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "t:sections.multicolumn.settings.button_link.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "background-1"
    },
    {
      "type": "select",
      "id": "color_scheme_old",
      "options": [
        {
          "value": "accent-1",
          "label": "Accent 1"
        },
        {
          "value": "accent-2",
          "label": "Accent 2"
        },
        {
          "value": "background-1",
          "label": "Background 1 "
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        }
      ],
      "default": "background-1",
      "label": "Color scheme (For older version ONLY)"
    },
    {
      "type": "header",
      "content": "t:sections.multicolumn.settings.header_mobile.content"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "options": [
        {
          "value": "1",
          "label": "t:sections.multicolumn.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.multicolumn.settings.columns_mobile.options__2.label"
        }
      ],
      "default": "1",
      "label": "t:sections.multicolumn.settings.columns_mobile.label"
    },
    {
      "type": "checkbox",
      "id": "swipe_on_mobile",
      "default": false,
      "label": "t:sections.multicolumn.settings.swipe_on_mobile.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "t:sections.multicolumn.blocks.column.name",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.multicolumn.blocks.column.settings.image.label"
        },
        {
          "type": "select",
          "id": "image_ratio",
          "options": [
            {
              "value": "adapt",
              "label": "t:sections.multicolumn.settings.image_ratio.options__1.label"
            },
            {
              "value": "portrait",
              "label": "t:sections.multicolumn.settings.image_ratio.options__2.label"
            },
            {
              "value": "square",
              "label": "t:sections.multicolumn.settings.image_ratio.options__3.label"
            },
            {
              "value": "circle",
              "label": "t:sections.multicolumn.settings.image_ratio.options__4.label"
            }
          ],
          "default": "adapt",
          "label": "t:sections.multicolumn.settings.image_ratio.label"
        },
        {
          "type": "header",
          "content": "Video Settings"
        },
        {
          "type": "url",
          "id": "video_link",
          "label": "Video link",
          "info": "Leave blank to use image"
        },
        {
          "type": "checkbox",
          "id": "video_autoplay",
          "label": "Video autoplay",
          "info": "If checked, video will be muted."
        },
        {
          "type": "checkbox",
          "id": "hide_controls",
          "label": "Hide controls"
        },
       {
          "type": "header",
          "content": "Column Settings"
        },
        {
          "type": "inline_richtext",
          "id": "title",
          "default": "Column",
          "label": "t:sections.multicolumn.blocks.column.settings.title.label"
        },
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
          "label": "t:sections.multicolumn.blocks.column.settings.text.label"
        },
        {
          "type": "text",
          "id": "link_label",
          "label": "t:sections.multicolumn.blocks.column.settings.link_label.label"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.multicolumn.blocks.column.settings.link.label"
        },
        {
          "id": "page",
          "type": "page",
          "label": "Page",
           "info": "Leave blank to use link instead"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.multicolumn.presets.name",
      "blocks": [
        {
          "type": "column"
        },
        {
          "type": "column"
        },
        {
          "type": "column"
        }
      ]
    }
  ]
}
{% endschema %}

 

Step #5. Add thse javascript

Go to the Asset folder and open the global.js. Then paste the code below at the very end of the file. Make sure to SAVE.

class PagePreview extends HTMLElement {
  constructor() {
    super();
    this.button = this.querySelector("button");
    this.button.addEventListener("click", this.clickListener.bind(this));
    this.previewBox = document.querySelectorAll("preview-modal");
  }
 
  closeListener() {
    this.previewBox.forEach(preview => preview.classList.remove("preview--active"));
    document.body.style.overflow = "unset";
  }
 
  clickListener(e) {
    const pageData = e.currentTarget.dataset.pageId;
    document.querySelector(`preview-modal[data-block="${pageData}"]`).classList.add('preview--active');
 
    this.closeBtn = document.querySelector(".preview--active span");
    this.closeBtn.addEventListener("click", this.closeListener.bind(this));
  }
}
customElements.define("page-preview", PagePreview);

Step #6. Customize theme

Go to the theme editor by clicking three dots on your left hand upper corner, then Customize theme. Add a section named "Customized Multicolumn". Make sure to SAVE once you are done customizing.

Conclusion

Transform your product presentations! Integrate captivating videos alongside high-quality images in a sleek multicolumn layout.

Engage customers & boost sales:

  • Deeper Product Understanding: Videos showcase features in action, fostering a clear product understanding.
  • Enhanced Browsing Experience: Dynamic visuals keep customers engaged and interested.
  • Mobile-Friendly Design: Flawless functionality across all platforms ensures a seamless experience.

Elevate your brand and stand out from the competition!

 

0 comments

Leave a comment