DEV Community: Sameer Mulla

Most Shopify Developers Use This Every Day. Almost Nobody Knows Why It Exists.

Sameer Mulla — Sat, 18 Jul 2026 02:17:50 +0000

Shopify CSS Explained: `{% stylesheet %}` vs `{% style %}` vs `<style>`

If you've built a Shopify theme, you've probably used one of these:

{% stylesheet %};
{% style %}
<style>

They all write CSS.

So why did Shopify create three different ways to do what seems like the same job?

The answer isn't about syntax—it's about performance, scalability, and architecture.

Let's explain it with something every developer understands.

🚦 Shopify CSS Is Like a Traffic Signal System

Imagine your Shopify theme is a busy city.

Thousands of cars (sections) move through it every day. Without traffic signals, every intersection would become chaotic.

Shopify's CSS methods work the same way.

Each one controls traffic differently.

🟢 Green Light — `{% stylesheet %};`

This is the city's central traffic controller.

It creates one set of traffic rules and shares them with every intersection.

Every section follows the same rules without creating duplicate copies.

{% stylesheet %};
.product-card {
  color: var(--heading-color);
  padding: 20px;
  border-radius: 12px;
}
{% endstylesheet %}

Why?

Shopify bundles this CSS once, making it reusable across the theme.

Best for

Shared component styles
Layouts
Buttons
Cards
Grids
Reusable UI

Trade-offs

✅ Smaller HTML

✅ Cached CSS

✅ Excellent performance

❌ Doesn't support Liquid variables

❌ Can't use:

{{ section.settings.heading_color }}

🟡 Yellow Light — `{% style %};`

Now imagine a traffic officer standing at a busy intersection.

Instead of following fixed rules, they react to what's happening right now.

That's exactly what {% style %}; does.

{% style %};
.product-card {
  color: {{ section.settings.heading_color }};
}
{% endstyle %};

Why?

Every section generates its own CSS using Liquid values from the Theme Editor.

Best for

Theme Editor settings
Dynamic colors
Typography controls
Spacing controls
Merchant customization

Trade-offs

✅ Supports Liquid

✅ Updates instantly in the Theme Editor

❌ Generates CSS for every section instance

❌ Larger HTML when many sections are rendered

🔴 Red Light — Raw `<style>`

This is like placing a temporary stop sign during road construction.

It works.

But it isn't connected to Shopify's CSS bundling system.

<style>
.notice {
  color: red;
}
</style>

Why?

It's plain HTML.

No Shopify processing.

No Theme Editor integration.

Best for

Small one-off styles
Temporary experiments
Static pages

Trade-offs

✅ Familiar HTML

✅ Simple

❌ Not bundled

❌ No Shopify-specific features

❌ Easy to duplicate accidentally

📊 Architecture Diagram

                 Shopify Theme

                      │
      ┌───────────────┼───────────────┐
      │               │               │
      │               │               │
{% stylesheet %}   {% style %}     <style>
Shared CSS        Dynamic CSS      Static CSS
Cached Once       Per Section      Plain HTML
Fastest           Flexible         One-Off

⚡ Performance Tip

Use CSS variables to combine the best of both worlds.

<div
  class="product-card"
  style="--heading-color: {{ section.settings.heading_color }};"
>

Then keep your reusable CSS bundled:

{% stylesheet %};
.product-card {
  color: var(--heading-color);
}
{% endstylesheet %};

Now your CSS stays cached while each section receives its own custom value.

Benefits:

Less duplicated CSS
Smaller HTML
Better scalability
Faster rendering

💡 Senior Developer Tip

Don't ask:

"Which CSS method should I use?"

Ask instead:

"Which responsibility belongs to which CSS method?"

Architecture beats shortcuts every time.

🎯 Final Takeaway

Great Shopify themes aren't built with more CSS.

They're built with better architecture.

Use:

{% stylesheet %}; for reusable, cached styles.
{% style %}; for dynamic styles powered by Liquid.
<style> only when plain HTML is all you need.

The best Shopify developers don't choose one—they know when to use each.

Have you used all three in your Shopify projects? Which one do you prefer and why?

Bootstrap Multi-Select Option with Checkbox in Bootstrap 5.2

Sameer Mulla — Thu, 09 Nov 2023 01:44:15 +0000

Bootstrap is a powerful framework for building responsive and feature-rich web applications. One of the key components of a web application is the ability to select multiple options from a list. Bootstrap Multi-Select with checkboxes allows users to easily make multiple selections from a dropdown list. In this blog post, we will guide you through creating a Bootstrap Multi-Select Option with checkboxes using Bootstrap 5.2.

GitHub: Code View

Live : Live View

Prerequisites

Before we start, make sure you have the following prerequisites installed in your project:

Bootstrap 5.2
jQuery 3.7.1
Bootstrap Multi-Select 1.1.2

You can include them in your project by adding the following CDN links to your HTML file's

section:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.2/css/bootstrap-multiselect.min.css" integrity="sha512-fZNmykQ6RlCyzGl9he+ScLrlU0LWeaR6MO/Kq9lelfXOw54O63gizFMSD5fVgZvU1YfDIc6mxom5n60qJ1nCrQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.2/js/bootstrap-multiselect.min.js" integrity="sha512-lxQ4VnKKW7foGFV6L9zlSe+6QppP9B2t+tMMaV4s4iqAv4iHIyXED7O+fke1VeLNaRdoVkVt8Hw/jmZ+XocsXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Creating the Bootstrap Multi-Select

Let's create a Bootstrap Multi-Select with checkboxes in your HTML file.

<div class="d-flex text-left align-items-center w-100">
    <strong class="sl">Select Language:</strong>
    <select id="multiple-checkboxes" multiple="multiple">
        <option value="front-end">Front End</option>
        <option value="back-end">Back End</option>
    </select>
    <br>
    <select name="property_nhb[]" id="p-nhb" multiple>
        <option data-value="" value="" selected>all</option>
        <option data-value="back-end" value="php">PHP</option>
        <option data-value="front-end" value="javascript">JavaScript</option>
        <option data-value="back-end" value="java">Java</option>
        <option data-value="back-end" value="sql">.Net</option>
        <option data-value="front-end" value="jquery">Jquery</option>
        <option data-value="front-end" value=".net">.Net</option>
    </select>
</div>

In the code above, we have two <select> elements, one with the id "multiple-checkboxes" for selecting languages and another with the id "p-nhb" for selecting programming languages.

Initializing the Bootstrap Multi-Select

To enable the Bootstrap Multi-Select with checkboxes, we need to initialize it using JavaScript. Add the following script at the end of your HTML file:

<script>
    $('#multiple-checkboxes').multiselect({
        buttonClass: 'form-select',
        templates: {
            button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span></button>',
        }
    });

    $('#p-nhb').multiselect({
        buttonClass: 'form-select',
        templates: {
            button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown" ><span class="multiselect-selected-text"></span></button>',
        }
    });

    var select_clone = $('<select>')
        .html($('#p-nhb option'))
        .hide()
        .insertAfter('#p-nhb');

    $('#p-nhb').multiselect();

    $('#multiple-checkboxes').change(function () {
        $('#p-nhb').html(select_clone.find('[data-value="' + this.value + '"]').clone());
        $('#p-nhb').multiselect('rebuild');
    }).change();

    $('#get').click(function () {
        console.log('city: ' + $('#multiple-checkboxes').val() + ', neighborhood: ' + $('#p-nhb').val().toString());
    });
</script>

This script initializes the Bootstrap Multi-Select for both elements and provides functionality to update the options in the "p-nhb" dropdown based on the selections in the "multiple-checkboxes" dropdown.

Conclusion

In this blog post, we've shown you how to create a Bootstrap Multi-Select Option with checkboxes using Bootstrap 5.2. This feature can be valuable in various scenarios where you need to allow users to make multiple selections from a list of options. You can customize the appearance and behavior of the multi-select dropdown according to your project's requirements.

Elevate Your Website's Image Carousel with Owl Carousel Two, Elevated Zoom, and Fancybox Integration

Sameer Mulla — Mon, 09 Oct 2023 01:26:34 +0000

If you're looking to elevate your website's image carousel experience, look no further than the Owl Carousel Two Integration with Elevated Zoom and Fancybox. This integration combines powerful features to enhance the way your users interact with images on your website.

Hmtl Code

<div id="slider" class="main-carousel owl-carousel positive-relative">
  <div class="item">
    <a href="images/one.jpg" data-fancybox="gallery">
      <img id="zoom_05" src="images/one.jpg" data-zoom-images="images/one.jpg" alt="">
    </a>
  </div>
  <!-- Add more carousel items here -->
</div>

Javascript Custom Code

 // Activate Fancybox for a sleek image viewing experience.
$('.fancybox').fancybox();
// Enable Elevated Zoom for larger screens (min-width: 992px)
if (window.matchMedia('(min-width: 992px)').matches) {
  $('#zoom_05').ezPlus({
    zoomType: 'inner',
    cursor: 'crosshair'
  });
}
// Initialize Owl Carousel for a dynamic image carousel
$(document).ready(function() {
  $(".main-carousel").owlCarousel({
    direction: 'vertical',
    loop: false,
    items: 1,
    margin: 0,
    stagePadding: 0,
    autoplay: false,
    responsive: {
      0: {
        items: 1,
        nav: true,
        navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
      },
      700: {
        items: 1,
      }
    }
  })
  // Enhance carousel with dynamic zoom functionality
  if (window.matchMedia('(min-width: 992px)').matches) {
    dotcount = 1;
    jQuery('.owl-dot').each(function() {
      jQuery(this).addClass('dotnumber' + dotcount);
      jQuery(this).attr('data-info', dotcount);
      dotcount = dotcount + 1;
    });
    slidecount = 1;
    jQuery('.owl-item').not('.cloned').each(function() {
      jQuery(this).addClass('slidenumber' + slidecount);
      slidecount = slidecount + 1;
    });
    jQuery('.owl-dot').each(function() {
      grab = jQuery(this).data('info');
      slidegrab = jQuery('.slidenumber' + grab + ' img').attr('src');
      if (typeof slidegrab === 'undefined') {
        jQuery(this).css("background-image", "url('assets/images/youtube.png')");
      } else {
        jQuery(this).css("background-image", "url(" + slidegrab + ")");
      }
    });
    amount = $('.owl-dot').length;
    gotowidth = 300 / amount;
    jQuery('.owl-dot').css("height", gotowidth + "%");
    // Update zoom when changing carousel items
    $('.main-carousel').on('translated.owl.carousel', function(event) {
      var currentItem = event.item.index + 1;
      $('.owl-item:nth-child(' + currentItem + ')').find('img').attr('id', 'zoom_05');
      $('#zoom_05').ezPlus({
        zoomType: 'inner',
        cursor: 'crosshair'
      });
    });
    // Detach zoom when changing carousel items
    $('.main-carousel').on('changed.owl.carousel', function(event) {
      var currentItem = event.item.index + 1;
      $(".zoomContainer").detach();
      $('.owl-item img').removeAttr('id');
    });
  }
});

GitHub Repository:
Explore the full integration on GitHub: Owl Carousel Two Elevated Zoom Fancybox Integration.

With this integration, you'll take your website's image carousel to the next level, providing users with an engaging and interactive image-viewing experience.

Enhance Your Website's Image Carousel with Owl Carousel Two and Elevated Zoom

Sameer Mulla — Sun, 28 May 2023 01:32:25 +0000

Link to view the live demo: View Demo

Link to raw code: Raw Code

we'll explore how to integrate Owl Carousel Two with Elevated Zoom to enhance the image carousel functionality on your website. By combining these two powerful tools, you can create an engaging and interactive user experience for showcasing product images or any other type of visual content. Let's dive in!

Understanding the HTML structure: We'll start by examining the provided HTML code and understanding its structure. It includes a container element for the carousel, a set of image items, and a zoom lens element.

Applying CSS styling: To ensure a visually appealing carousel, we'll apply CSS styling to the carousel container, image items, and zoom lens. This includes setting the dimensions, positioning, and other visual properties to achieve the desired look and feel.

Integrating Owl Carousel Two: Next, we'll integrate Owl Carousel Two into the HTML structure. This powerful carousel library allows us to create responsive and touch-friendly image carousels with ease. We'll initialize the carousel, set the number of items to display, and configure navigation options.

Incorporating Elevated Zoom: Now comes the exciting part – integrating Elevated Zoom into the carousel. This advanced zoom library enables users to zoom in and inspect the images in detail. We'll add the necessary JavaScript code to enable zoom functionality and customize settings like the zoom window dimensions.

Adding interactivity: To enhance the user experience, we'll incorporate interactivity into the carousel. This includes adding event listeners to the zoom lens for hover and click actions. Users can hover over the lens to see it change color, indicating interactivity, and click to trigger the zoom-in functionality.

By following these steps, you can create a captivating image carousel that not only showcases your products or visual content but also allows users to explore the images up close with the zoom functionality.

Feel free to access the live demo here to see the integration in action. If you're interested in studying or modifying the code, you can access the raw code here.

In conclusion, integrating Owl Carousel Two with Elevated Zoom offers a powerful solution for enhancing image carousels on your website. Take advantage of the flexibility and customization options provided by these tools to create an immersive and visually appealing user experience. Happy coding and creating stunning image carousels!

How can Owl Carousel improve the user experience of an eCommerce website?

Sameer Mulla — Wed, 03 May 2023 17:24:00 +0000

Adding auto-play pause on hover functionality to an Owl Carousel can greatly enhance the user experience of your website or application. In this tutorial, we'll show you how to achieve this with some simple jQuery code.

First, let's start by setting up an Owl Carousel with auto-play enabled. Here's an example:

$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
    loop:true,
    margin: 10,
    autoplay: true,
    autoplayTimeout: 2000,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
  });
});

This sets up an Owl Carousel with auto-play enabled and some responsive breakpoints to adjust the number of items displayed based on screen size. However, this carousel doesn't pause auto-play when the user hovers over an item. To add this functionality, we need to add some additional jQuery code.

$(document).ready(function(){
  var owl = $('.owl-carousel');
  owl.owlCarousel({
    loop:true,
    margin: 10,
    autoplay: true,
    autoplayTimeout: 2000,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
  });

  // Pause autoplay on hover
  owl.on('mouseover', '.owl-item', function() {
    owl.trigger('stop.owl.autoplay');
  });

  // Resume autoplay when mouse leaves item
  owl.on('mouseout', '.owl-item', function() {
    owl.trigger('play.owl.autoplay');
  });
});

Here, we've added event listeners for mouseover and mouseout on the .owl-item elements within the carousel. When the user hovers over an item, the stop.owl.autoplay event is triggered to pause auto-play. When the user leaves the item, the play.owl.autoplay event is triggered to resume auto-play.

And that's it! With just a few lines of jQuery code, you can add auto-play pause on hover functionality to your Owl Carousel and greatly improve the user experience of your website or application.

In summary, adding auto-play pause on hover functionality to an Owl Carousel is a simple yet effective way to enhance the user experience of your website or application. By following the steps outlined in this tutorial, you can easily add this functionality to your Owl Carousel and give your users a more seamless browsing experience.

DEV Community: Sameer Mulla

Most Shopify Developers Use This Every Day. Almost Nobody Knows Why It Exists.

Shopify CSS Explained: {% stylesheet %} vs {% style %} vs <style>

🚦 Shopify CSS Is Like a Traffic Signal System

🟢 Green Light — {% stylesheet %};

Why?

Best for

Trade-offs

🟡 Yellow Light — {% style %};

Why?

Best for

Trade-offs

🔴 Red Light — Raw <style>

Why?

Best for

Trade-offs

📊 Architecture Diagram

⚡ Performance Tip

💡 Senior Developer Tip

🎯 Final Takeaway

Bootstrap Multi-Select Option with Checkbox in Bootstrap 5.2

Prerequisites

Creating the Bootstrap Multi-Select

Initializing the Bootstrap Multi-Select

Conclusion

Elevate Your Website's Image Carousel with Owl Carousel Two, Elevated Zoom, and Fancybox Integration

Enhance Your Website's Image Carousel with Owl Carousel Two and Elevated Zoom

How can Owl Carousel improve the user experience of an eCommerce website?

Shopify CSS Explained: `{% stylesheet %}` vs `{% style %}` vs `<style>`

🟢 Green Light — `{% stylesheet %};`

🟡 Yellow Light — `{% style %};`

🔴 Red Light — Raw `<style>`