Claus Lauter: Hello and welcome to another episode of the eCommerce Coffee Break. Today I wanna talk about shopify 2.0. The O is 2.0. Came out a couple months ago and brought a lot of new features. One of the features are sections, and that's what I wanna talk about. We wanna find out what is sections, why do we need sections, and all of these things.
So what that reason I have was mean expert who can tell us a little bit more about it. Ron and Hersh, he's the founder of. code.com. Ronan has 18 years of experience designing and developing a very priority of websites, and about a year ago, he realized that he has created specific content sections for Shopify sites.
So this is how Q Code was born. So we wanna dive a little bit deeper into that and learn more about that. , hello Ronan. How are you today?
Ronen Hirsch: Hi,
cla. thank you for having me. , excited , to have this chat. ,
Claus Lauter: what got you into development into Shopify. ,
Ronen Hirsch: general background.
I studied, , about 20 years ago over in Holland, product. And I always had this background of, , being a geek with computers and coding and all that. And I would create presentations in Flash, if you remember the old days of creating presentations. And then I created a website for myself and for a friend and for this.
And I realized that I really like it. So I just continued on that path. Of creating mainly in the, beginning, like portfolio type websites for friends and then for clients and, it grew from there. And then , the transition over to HTML and JavaScript. , and about 10 years ago, I got into Shopify specifically, and then I worked a lot with Shopify, building all sorts of sites.
I never did let go of, , WordPress, , and creating sites there, , but my main focus, especially in the past few years has been, , Shopify, , working with variety of different clients, , creating custom websites, not really just installing a theme and that.
A lot of people don't have the resources to create these. Custom type websites. , so we do install a theme and then tweak it, so it's like a semi custom. , and from there I basically realized, hey, I'm creating a lot of, custom sections for sites to which we'll get into.
And I thought, , why not sell these sections? It'll be easy and it'll save time. For other designers and developers, big time and, money because, they can do. ,
Claus Lauter: so now has been a couple of months and gave people time to move old from the old framework in the OS 2.0 framework.
And I think a lot of merchants have already changed their theme or upgraded their theme to a OS 2.0 theme. And with that came sections, apps, blocks, and other things. So gimme a bit of a background, what makes the huge difference there and what actually is a section.
Ronen Hirsch: with Shopify 1.0, you always had sections with shop.
But the nice flexibility that sections brought were mainly on the homepage, where in the homepage you can add in a section, you can move it around, you can select it, basically, like if a lot of Shopify owners or designers know , you really could play around with the options that the theme provided you, but only on the homepage you could add them to other page.
But then you really did need to know, how to code it, how to import it in. It wasn't really plug and play. And then came Shopify 2.0 where it actually opened it up where all of the sections available, you can add them to any of the pages. that's one of the biggest things in my mind that upgrade brought, , Now a section just to describe a little bit about , what a section is.
Each webpage when you probably know you have different areas where one may be featured products, one is just a tech blurb or, columns of, an image in a click to read more like for blog posts or , for basically anything. , . You can include as many as you want on each page, depending on how you want to guide the visitor over to, , different content on the site.
Claus Lauter: Okay. Now with the sections, what kind of features or what kind of functionality can you create with sections? ,
Ronen Hirsch: it depends on type of section. , you can create anything content based on the front end, , like you wanna show, testimonials, for instance.
So you can have a rotator or a carousel of showing, the different quotes or reviews that you got. , you can show a carousel of featured product. Of , different types of content block, basically. And there's a few different ways that we can call. We can call it a section, which sounds more technical.
You could say content block, , a content template or something like that. , so now with Shopify 2.0, you can really add those in, for instance, on a product. You wanna put in specific reviews for that product and have it rotate. So you can now easily add that in , and then put those reviews in there.
Or a quick, or a FAQ specific to that product, or a question that's always asked about shipping or refund policy or things like that. You can have one of those. accordions where you click it and it expands and then you can show, it was very difficult to add. Now with Shopify two, , it's much easier , to do it, especially if you have that section.
And then that's where quick code comes in because then you have a theme. Usually you would download a theme and then you'd have an X amount of sections. That theme comes. But then it doesn't have that specific thing that you want to show, that you want to have or you have it, but that button, you wanna change the location of it, or you wanna change , the proportion of the image.
Some themes have just square images that you want, to put in a , portrait. and so Created these themes to be , very flexible in topography with font sizes, line height facing between each element. You can change the proportions of the images. , you can have different types of sliders, like whether it's a fading , or sliding.
So you could do all, sorts of things like that. It sounds very technical, like, okay, so how do I add them actually to the site? , and we created it. It's actually very easy where you would download a zip file. Inside you have one file, two, depending if there's Java script involved or not.
And you'd basically just copy the content of that file, which is just a regular text file. You'd go over to a code editor inside Shopify and basically just create a section and paste that code in and then you're done. Then you would go to the theme editor and edit. And we have a PDF to explain everything and of course, support if anybody has any problems with it.
Claus Lauter: Okay, Very good. Yeah, so in a nutshell, you create a, block that is fully functional. Fully tested, full, customizable, and then you just import that into your theme. you already answered a lot of questions that I had, but one question I have, like, what are the most common, , sections that you see that people need and that they don't get with a theme?
Ronen Hirsch: 1 of the big ones is, like a comparison table. If you go into a more of a service based site, but also you know, different products where you have the table and you compare the different values and everything. So usually you don't see that in themes. So you can get something like that where you really can put in, I think the limit is 16 different rows and then three or four columns, and then you.
Put 'em in, whether it's an image or just a check mark, a number, a text. And then you can really compare the products. , another one, for instance, a elect banner. elect banner, for instance. They do come with themes. it is quite a, popular one, but one that we've created, we allow for video, we allow it to change the sizing of the height to put a text block on it and to change the location of the block.
So we have a lot of extra features that usually you wouldn't get with just a standard put in the image, maybe a little bit of text, and that's it. And then the rest of the theme, , solves for you, , more ordinary one. we also include columns or a regular carousel, of links, whether it's to a list, the product in a collection or just various ones to different blog posts or something like that.
, we also have, , that option as well. , But it is just, we give that extra functionality where, for instance, our, target market they're either , web designers who, have clients and they build the site directly from theme editor and merchant. for designers, for instance, they really do want to get into all the little line height, letter spacing, topography, , settings.
, and so they can easily put it in and they have a little bit more experience with code as well. so that they would be able to change things if they need to. And then for merchants where, hey, just plug and play, they can adjust it as they see.
Claus Lauter: So I see on your website you have quite a range of different sections that are prebuilt,
if somebody wants to have a customized section, is that something you can help with too?
Ronen Hirsch: Yes, definitely. We have an option, we can either install it for them if they're interested, , but of course if they have something that's not quite. They see in the collections, then yeah, we, definitely can take, , and create, , custom sections.
That's what we've been doing , for many years, like I said. So we've been doing all sorts of things like that. And then we said, Hey, let's sell them. But there's always somebody who said, Hey, I want something a little bit different than that, or something completely new. And we're always open to, develop something like that.
We have a specific page for that to.
Claus Lauter: I think that's most of the cases. People don't know what they don't know or what they want . pointing them in the right direction definitely helps. Now when it comes to the themes, obviously the store needs to have a os to , theme already installed.
Are there any kind of limitations when it comes to the themes itself or does your sections work generally with all of the themes?
Ronen Hirsch: Generally they do work with all of the themes. We've tested it on a, variety of themes and the way we code. , there shouldn't be , any limitations.
We have encountered on occasion like, Hey, I put this on this theme and it didn't really work. We went in within 10 minutes we solved the problem. but yeah, shouldn't be any limitations cuz at the end of the day it's htm. , we really keep , the code intact with their own, like special class names and all this technical stuff so that it wouldn't interfere with other sections.
Claus Lauter: Okay. what's the price range of these, ,
Ronen Hirsch: sections? So the range usually between about 60 or $80 up to about 130, , and or a hundred and. 40 or 30 it depends really on the complexity of it. , we set the price, basically thinking about how much would it cost for the customer to actually do this on their own, or if they have this, even if they have the specific, section.
On the theme already, but they wanna make a few of those tweaks. So we're thinking, okay, so if they reach out to a developer, and that work would take at least two, three hours at least. Sometimes it could take maybe an hour. But then, calculating all that and the time that they're gonna save and that money, then it seems like it's something that would be very, worth.
To save that time and just to get it in there. And even if they have a little problem, within 24 hours, usually we fix that problem. . ,
Claus Lauter: with all your experience of 10 years with Shopify, what's the most common, , issue that Shopify store owners have with their themes? Where do they struggle the most?
Ronen Hirsch: that's a good question. Cause usually we solve a lot of them. The kind of the struggle is to get content, on different pages. Like feature called meta fields, if you've heard of it. It was even there during Shopify 1.0, but it was much harder to use.
But the struggle is to get specific content, even if you're using a section on multiple pages or multiple template. Then you would add in content on one, but if you're using that template elsewhere, it could replicate to another page. And so then you have to duplicate the template and create that.
That was a struggle to do. But now with meta fields, you can make it much smarter where even with the template you can add in, you can have the content in the section, , you set it up To pick a meta field instead of the content that's in the theme editor itself. So I think that was , one thing that a lot of merchants struggle with.
Okay. .
Claus Lauter: What would be a golden nugget, what you would tell a Shopify merchant when they look at their theme? Because obviously they're looking at it a lot, usually , as a merchant. . , and you sort of do not see the forest because of the trees. So what would you recommend what they need to look at?
Ronen Hirsch: To really look at the path of the visitor once you arrive at the homepage. Even if we offer multiple image sliders, you don't wanna put in too much information. You don't want somebody to come in and see a lot of images and texts , and too many things.
You want to guide the user all the way to the product or to the main product, or to tell. the visitor, Hey, we offer A, B, and C. Where are you interested in? And get 'em as fast as possible to a collection and then to a product, , without too much information, too much that'll clutter.
Any, , page. in our world it's like the basics, it's like, hey, you want the CTA to be bold and everything, But merchants, , mainly merchants don't really. Know that or don't really think about how to get, more people over. ,
Claus Lauter: very good tip.
Hundred percent agree with you. , where Ron can people find out more about your solution?
Ronen Hirsch: the website, it's , quick code.com, , Q W I Q O D e.com. We're on Instagram, we're on LinkedIn, , Facebook, , and of course the studio, I've been running , for 18 years of Studio umbrella, , where we really do all sorts of websites, especially like Shopify, WordPress, like I mentioned.
, and that's,, Studio umbrella. It's P U D I O U M B R E L L A. Dot com. , and then of course we have the Instagram and everything, , there as well.
Claus Lauter: Cool. I will put the links as always in show notes that you're only one. Click away. Ron, thanks so much for your time. I think that was very insightful and I think it helps s save a lot of time and problems to go for sections that are already premade instead doing them from scratch.
Thanks so much for your time. Yeah, well thank
Ronen Hirsch: you very much. Take
care.
.png)
