Beyond Kalles: How to Add Custom Sections & Unlock Unique Designs on Shopify

Ever found yourself scrolling through your Shopify theme settings, wishing you could just *add* that one perfect section you saw on another store? You know, the one that perfectly showcases your products or tells your brand story in a unique way? It's a super common feeling, and it's exactly what a fellow store owner, saqlain1, recently experienced in the Shopify Community forums.

Saqlain1 was using the popular Kalles theme and wanted a specific section that wasn't available out-of-the-box. The initial ask was for a custom section, and what followed was a great example of the community stepping up, offering both code-based solutions and reminders about leveraging existing theme features. Let's dive into what we learned and how you can apply these insights to your own store!

Bringing a "Closer Look" Section to Life with Custom Code

Saqlain1's primary request, as shown in the initial screenshot, was for a visually engaging section. It looked like a grid of product or feature cards, each with an image, a title, a description, and a subtle "+" toggle button to reveal more details upon interaction. This kind of interactive display is fantastic for highlighting product features or benefits without cluttering the page.

When a theme doesn't offer a specific layout like this, custom code is often the answer. Thankfully, a helpful community member, devcoders, jumped in with a complete solution. This approach involves creating three files: a Liquid file for the section's structure, a CSS file for its styling, and a JavaScript file for its interactive elements.

Step-by-Step: Adding a Custom "Closer Look" Section

Before you dive into any code changes, always, always, back up your theme. This is non-negotiable! You can duplicate your live theme from your Shopify admin under Online Store > Themes. Once you're backed up, here's how to implement devcoders' solution:

1. Navigate to your Theme Code: From your Shopify admin, go to Online Store > Themes. Find your current theme, click Actions > Edit code.
2. Create the Liquid Section File:
   • In the Sections folder, click Add a new section.
   • Name it closer-look.liquid and paste the following code:

   {% schema %}
   {
     "name":"Closer Look",
     "blocks":[{"type":"card","name":"Card","settings":[
       {"type":"image_picker","id":"image","label":"Image"},
       {"type":"text","id":"title","label":"Title"},
       {"type":"textarea","id":"text","label":"Description"}]}],
     "max_blocks":6,
     "presets":[{"name":"Closer Look"}]
   }
   {% endschema %}
   
   
   
   
   
   {{ section.settings.heading }}
   
   {% for block in section.blocks %}
   
   {% if block.settings.image %}{% endif %}
   
   {{ block.settings.title }}
   {{ block.settings.text }}
   +
   
   
   {% endfor %}
   
   
   

3. Create the CSS Stylesheet:
   • In the Assets folder, click Add a new asset.
   • Choose Create a blank file, name it closer-look.css, and paste this CSS:

   body{}
   .closer-look{padding:60px;background:#3d3632;color:#fff}
   .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
   .card{position:relative;border-radius:8px;overflow:hidden}
   .card img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover}
   .overlay{position:absolute;inset:auto 0 0 0;padding:20px;background:linear-gradient(transparent,rgba(0,0,0,.7))}
   .toggle{position:absolute;right:15px;bottom:15px;width:42px;height:42px;border-radius:50%}
   @media(max-width:768px){.cards{grid-template-columns:1fr}}
   

4. Create the JavaScript File:
   • In the Assets folder, click Add a new asset.
   • Choose Create a blank file, name it closer-look.js, and paste this JavaScript:

   document.querySelectorAll('.toggle').forEach(b=>b.>b.closest('.card').classList.toggle('open'));
   

5. Add the Section to Your Store:
   • Go back to your Shopify admin, Online Store > Themes > Customize.
   • On any page, click Add section and you should now see "Closer Look" as an option. You can add image, title, and description blocks within it.

Here's a visual of what the result looks like:

The Power of Theme Options: Don't Overlook What's Already There!

In a follow-up, saqlain1 shared more screenshots (IMG_9889, IMG_9888, IMG_9887), seemingly asking for help with a product page layout that included features like a prominent product image gallery and possibly a sticky add-to-cart section.

For this second request, FoysalAhmed wisely pointed out: "You can control it from theme option. No need touch on any code.." This is a crucial takeaway for any Shopify store owner. While custom code is powerful, many premium themes like Kalles come packed with extensive customization options. Before you jump to custom development, always thoroughly explore your theme's settings in the Theme Editor. You might find a setting for a different product page layout, image gallery style, or sticky elements that perfectly matches what you're looking for.

FoysalAhmed also provided video tutorials (like this one) as a resource, which is a common way community experts help. Sometimes, seeing it done visually makes all the difference.

Key Takeaways for Your Shopify Store

This thread really highlights a couple of important things for anyone managing a Shopify store:

• Don't Be Afraid of Custom Code (But Be Prepared): If your theme truly doesn't have a feature, custom code can unlock incredible design flexibility. Just remember to always back up your theme first and understand that custom code might require maintenance, especially after theme updates.
• Exhaust Theme Options First: Before seeking custom solutions, spend time in your theme customizer. Modern themes are incredibly robust, and many common design requests can be fulfilled without touching a single line of code.
• The Shopify Community is a Goldmine: Whether you're looking for a quick fix or a detailed code snippet, the community forums are an invaluable resource. Experts and fellow store owners are often eager to share their knowledge and solutions.
• Consider a Shopify Expert: If diving into code feels overwhelming, or if you have complex design needs, don't hesitate to hire a Shopify Expert. They can implement custom solutions cleanly and efficiently, saving you time and potential headaches.

Ultimately, whether it's through clever use of existing theme settings or a bit of custom development, you can achieve nearly any design vision for your Shopify store. It's all about knowing your options and leveraging the amazing resources available, especially the vibrant Shopify community.