Why I Suggest Learning Shopify
John Lancy / August 1, 2024
How I Create Fully Customizable Shopify Sections
If you're in the eCommerce space, you've likely heard of Shopify and how powerful it is for building online stores. One of the most exciting features that Shopify offers is its customizable sections. In this post, I’ll walk through how I create fully customizable sections in Shopify, all on the front end, so that anyone—no matter their technical ability—can easily manage and modify their store.
Why Customizable Shopify Sections Matter
Shopify sections have made life easier for store owners and developers alike. These sections allow you to build flexible layouts that can be managed directly in Shopify’s admin panel, making changes simple without diving into code. This is especially helpful for clients who may not be tech-savvy but want the power to update their store's content regularly.
Added Collection and Product Selection
I've added two new fields to the schema: one for a featured collection and another for a featured product. Both allow the user to select products and collections dynamically through the Shopify theme editor without editing the code.
How I Approach Shopify Section Creation
1. Identify the Store’s Needs
Before I jump into the technical work, I always start by identifying what the store owner or business really needs. Whether it’s a dynamic homepage banner, a customizable product grid, or a content section that allows for different layouts, I make sure that the design is built around real use cases. This way, the sections we build serve a clear purpose.
2. Building a User-Friendly Schema
When creating sections, the schema is where most of the magic happens. The schema is essentially the configuration part of the section that lets users modify it without touching the code. I focus on making the schema as intuitive as possible—limiting the options to what's actually needed. This reduces complexity and ensures that store owners aren’t overwhelmed by too many choices.
3. Add Flexibility Without Complexity
The beauty of fully customizable sections is that they can be as simple or as complex as needed. For a basic section, it might be as easy as allowing a user to update text or images. For more advanced sections, I ensure users can adjust layouts, colors, or even reorder blocks of content—all while keeping it intuitive. It's about providing the right level of customization without overloading the user.
4. Testing and Refining
Once a section is built, I test it thoroughly on different screen sizes and browsers to ensure it works smoothly across the board. I also test it from the perspective of the user—making sure that all customizations are easy to apply and appear correctly on the front end of the store. User experience is key here, and I always prioritize making things as accessible as possible.
Ex: Code block below is image displayed above.
<!-- Custom Article Section with Products and Collections -->
{% schema %}
{
"name": "Article, Products & Collections Section",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Section Heading",
"default": "Our Latest Article"
},
{
"type": "textarea",
"id": "article_text",
"label": "Article Content",
"default": "Enter your article content here."
},
{
"type": "image_picker",
"id": "article_image",
"label": "Featured Image"
},
{
"type": "url",
"id": "read_more_link",
"label": "Read More URL"
},
{
"type": "collection",
"id": "featured_collection",
"label": "Featured Collection"
},
{
"type": "product",
"id": "featured_product",
"label": "Featured Product"
}
],
"presets": [
{
"name": "Custom Article Section with Products & Collections",
"category": "Custom Sections"
}
]
}
{% endschema %}
<section class="custom-article-section">
<div class="article-content">
<h2>{{ section.settings.heading }}</h2>
<p>{{ section.settings.article_text }}</p>
{% if section.settings.article_image %}
<img src="{{ section.settings.article_image | img_url: 'large' }}" alt="Featured image" />
{% endif %}
{% if section.settings.read_more_link %}
<a href="{{ section.settings.read_more_link }}" class="read-more-btn">Read More</a>
{% endif %}
</div>
<!-- Featured Collection Section -->
{% if section.settings.featured_collection %}
<div class="featured-collection">
<h3>Shop Our Collection</h3>
<div class="collection-grid">
{% for product in collections[section.settings.featured_collection].products %}
<div class="product">
<a href="{{ product.url }}">
<img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}" />
<p>{{ product.title }}</p>
<p>{{ product.price | money }}</p>
</a>
</div>
{% endfor %}
</div>
</div>
{% endif %}
<!-- Featured Product Section -->
{% if section.settings.featured_product %}
{% assign product = all_products[section.settings.featured_product] %}
<div class="featured-product">
<h3>Featured Product</h3>
<a href="{{ product.url }}">
<img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}" />
<p>{{ product.title }}</p>
<p>{{ product.price | money }}</p>
</a>
</div>
{% endif %}
</section>
<style>
.custom-article-section {
padding: 20px;
background-color: #f8f8f8;
}
.article-content img {
max-width: 100%;
height: auto;
margin-top: 10px;
}
.read-more-btn {
display: inline-block;
margin-top: 15px;
background-color: #333;
color: white;
padding: 10px 20px;
text-decoration: none;
}
.read-more-btn:hover {
background-color: #555;
}
/* Featured Collection & Product */
.featured-collection, .featured-product {
margin-top: 30px;
}
.collection-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}
.product, .featured-product {
text-align: center;
}
.product img, .featured-product img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
</style>
The Impact of Shopify Summer '24
Shopify Summer '24 was an incredible update for developers and store owners, bringing several new features that dramatically changed how we approach eCommerce. Here are a few key reasons why this event was a game-changer:
1. "Sections Everywhere" Update
One of the most exciting updates from Shopify Summer '24 was the expansion of sections to every page, not just the homepage. Previously, sections were limited to specific templates, but now, store owners can add customizable sections across their entire store. This has given merchants the flexibility to create dynamic, content-rich pages anywhere on their site without having to hire a developer.
2. Performance Boosts
Shopify introduced substantial performance improvements, which have significantly enhanced the speed and reliability of stores. Faster load times directly translate into better user experience, higher conversion rates, and improved SEO rankings, making this a huge win for any eCommerce store.
3. AI-Driven Features
Another feature that stole the show was the introduction of AI-driven tools for generating product descriptions, marketing copy, and even automating inventory management. These tools empower smaller stores by saving time and resources while still delivering high-quality content and operational efficiency.
Why Customizable Sections Are the Future of eCommerce
The flexibility provided by Shopify sections means that store owners can take complete control of their websites. Gone are the days of having to hire a developer for every small change. With the tools Shopify offers—and especially after the updates from Shopify Summer '24—creating and customizing a fully functioning eCommerce site has never been easier.
By focusing on usability and performance, customizable sections allow me to build stores that look great, perform well, and most importantly, are easy for my clients to use and update.
Creating fully customizable sections has become a key part of my approach when designing Shopify stores. It empowers users to take control of their eCommerce site, making day-to-day management simple while still maintaining the professional quality they expect.
Whether you're a store owner, a designer like myself, or a developer, the potential of customizable sections—coupled with the amazing updates to truly be able to build a store catered to your brand from Shopify Summer '24—is something we should all be happy has arrived!