During your free trial, you’ll be directed to the MIT demo store. Once you’ve purchased the section, you can add it to your store’s theme.<\/p>\n\n\n\n
Step 3: Add the Section & Save<\/h3>\n\n\n\n From here, click the Add section <\/strong>and select Meetanshi Shop the Look 4.<\/strong><\/p>\n\n\n\n
You are served with 50+ modification options to make the section yours.<\/p>\n\n\n
\n
Once you are finished making the changes, save<\/strong> them. This is how beautiful it will be showcased.<\/p>\n\n\n\n
How to Add the Shopify Shop the Look Section? (Custom Code)<\/h2>\n\n\n\n Below are the steps provided along with the code to add a shop the look section.<\/p>\n\n\n\n
Step 1: Create the Section File<\/h3>\n\n\n\n From your Shopify admin panel, go to Online store > Themes > \u2026(three dots)<\/strong> and click on Edit code.<\/strong><\/p>\n\n\n\nIn the Sections <\/strong>directory, add a new section and name it as shop-the-look.liquid.<\/strong> <\/p>\n\n\n\nStep 2: Paste the Liquid Code<\/h3>\n\n\n\n Paste the following code in the newly created shop-the-look.liquid section.<\/p>\n\n\n\n
{% schema %}\n{\n \"name\": \"Shop the Look\",\n \"settings\": [\n {\n \"type\": \"image_picker\",\n \"id\": \"main_image\",\n \"label\": \"Main Look Image\"\n },\n {\n \"type\": \"header\",\n \"content\": \"Look Products\"\n },\n {\n \"type\": \"text\",\n \"id\": \"heading\",\n \"label\": \"Heading\",\n \"default\": \"Shop the Look\"\n },\n {\n \"type\": \"richtext\",\n \"id\": \"description\",\n \"label\": \"Description\",\n \"default\": \"<p>Get the complete styled look with these curated pieces.<\/p>\"\n }\n ],\n \"blocks\": [\n {\n \"type\": \"product\",\n \"name\": \"Product\",\n \"settings\": [\n {\n \"type\": \"image_picker\",\n \"id\": \"product_image\",\n \"label\": \"Product Image\"\n },\n {\n \"type\": \"url\",\n \"id\": \"product_link\",\n \"label\": \"Link to Product\"\n },\n {\n \"type\": \"text\",\n \"id\": \"product_title\",\n \"label\": \"Product Title (Manual)\"\n },\n {\n \"type\": \"text\",\n \"id\": \"product_price\",\n \"label\": \"Product Price (Manual)\"\n }\n ]\n }\n ],\n \"presets\": [\n {\n \"name\": \"Shop the Look\",\n \"category\": \"Image\",\n \"blocks\": [\n {\n \"type\": \"product\"\n },\n {\n \"type\": \"product\"\n },\n {\n \"type\": \"product\"\n }\n ]\n }\n ]\n}\n{% endschema %}\n\n<div class=\"shop-the-look-section\">\n <style>\n .shop-the-look-section {\n text-align: center;\n padding: 40px 20px;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n }\n .shop-the-look-section h2 {\n font-size: 28px;\n font-weight: 700;\n margin-bottom: 10px;\n }\n .shop-the-look-section .description-text {\n font-size: 16px;\n color: #555;\n margin-bottom: 30px;\n }\n .shop-the-look-section .look-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 30px;\n }\n @media (min-width: 768px) {\n .shop-the-look-section .look-container {\n flex-direction: row;\n text-align: left;\n align-items: flex-start;\n }\n }\n .shop-the-look-section .main-image-wrapper {\n flex: 1;\n max-width: 100%;\n }\n @media (min-width: 768px) {\n .shop-the-look-section .main-image-wrapper {\n flex: 2;\n max-width: 60%;\n }\n }\n .shop-the-look-section .main-image {\n width: 100%;\n height: auto;\n border-radius: 8px;\n }\n .shop-the-look-section .featured-products-wrapper {\n flex: 1;\n max-width: 100%;\n }\n @media (min-width: 768px) {\n .shop-the-look-section .featured-products-wrapper {\n flex: 1;\n max-width: 40%;\n }\n }\n .shop-the-look-section .featured-products-wrapper h3 {\n font-size: 24px;\n font-weight: 600;\n margin-bottom: 20px;\n }\n .shop-the-look-section .product-item {\n display: flex;\n align-items: center;\n text-decoration: none;\n color: inherit;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n padding: 15px;\n margin-bottom: 15px;\n transition: box-shadow 0.3s;\n }\n .shop-the-look-section .product-item:hover {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n }\n .shop-the-look-section .product-image-wrapper {\n width: 80px;\n height: 80px;\n overflow: hidden;\n border-radius: 4px;\n margin-right: 15px;\n }\n .shop-the-look-section .product-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n .shop-the-look-section .product-info {\n flex: 1;\n text-align: left;\n }\n .shop-the-look-section .product-info .product-title {\n font-size: 16px;\n font-weight: 600;\n margin-bottom: 5px;\n }\n .shop-the-look-section .product-info .product-price {\n font-size: 14px;\n color: #333;\n }\n .shop-the-look-section .product-button {\n background-color: #000;\n color: #fff;\n border: none;\n padding: 10px 20px;\n text-transform: uppercase;\n font-weight: 600;\n border-radius: 4px;\n transition: background-color 0.3s;\n }\n .shop-the-look-section .product-button:hover {\n background-color: #555;\n }\n <\/style>\n\n <div class=\"page-width\">\n {%- if section.settings.heading != blank -%}\n <h2>{{ section.settings.heading }}<\/h2>\n {%- endif -%}\n\n {%- if section.settings.description != blank -%}\n <div class=\"description-text\">\n {{ section.settings.description }}\n <\/div>\n {%- endif -%}\n\n <div class=\"look-container\">\n {%- if section.settings.main_image != blank -%}\n <div class=\"main-image-wrapper\">\n <img\n src=\"{{ section.settings.main_image | img_url: '1024x' }}\"\n alt=\"{{ section.settings.main_image.alt }}\"\n class=\"main-image\"\n loading=\"lazy\"\n >\n <\/div>\n {%- endif -%}\n\n <div class=\"featured-products-wrapper\">\n <h3>Featured in this look<\/h3>\n {%- for block in section.blocks -%}\n {%- if block.type == 'product' and block.settings.product_link != blank -%}\n {%- liquid\n assign product_link_url = block.settings.product_link\n assign product_image = block.settings.product_image\n assign product_title = block.settings.product_title\n assign product_price = block.settings.product_price\n -%}\n <a href=\"{{ product_link_url }}\" class=\"product-item\">\n <div class=\"product-image-wrapper\">\n {%- if product_image != blank -%}\n <img\n src=\"{{ product_image | img_url: '240x240' }}\"\n alt=\"{{ product_image.alt }}\"\n class=\"product-image\"\n loading=\"lazy\"\n >\n {%- else -%}\n <div class=\"product-image-placeholder\"><\/div>\n {%- endif -%}\n <\/div>\n <div class=\"product-info\">\n <h3 class=\"product-title\">{{ product_title }}<\/h3>\n <p class=\"product-price\">{{ product_price }}<\/p>\n <button class=\"product-button\">Shop now<\/button>\n <\/div>\n <\/a>\n {%- endif -%}\n {%- endfor -%}\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/pre>\n\n\n\n
Step 3: Add a Section From the Theme Editor<\/h3>\n\n\n\n Return to Online Store > Themes > Customize<\/strong>. Under Templates, <\/strong>click the Add section<\/strong> and choose your new Shop the look<\/strong> section to add it.<\/p>\n\n\n\nThen use the sidebar to add images and make other customizations.<\/p>\n\n\n
\n
Once you add the images and are done making the changes, save <\/strong>them. <\/p>\n\n\n\nAnd this is how it will look, basic and simple.<\/p>\n\n\n
\n
Shopify Sections App vs. Custom Code: What’s Right for You?<\/h2>\n\n\n\n Using a Shopify Sections App or custom coding presents a key difference in ease of use. <\/p>\n\n\n\n
Custom code can be technically challenging and, if not implemented correctly, may lead to errors, frustration, and ultimately an unsuccessful section.<\/p>\n\n\n\n
In contrast, a Shopify Sections App like MIT Sections Pro makes advanced customization accessible to all, featuring editable sections with just a few clicks, high compatibility, a wide range of sections, and no coding required.<\/p>\n\n\n\n
Why Choose Our Solution?<\/p>\n\n\n\n
\nBegin personalizing your store immediately without any initial investment<\/li>\n\n\n\n Access a wide range of sections, including product comparison tables, banners, testimonials, and FAQs, to meet all your major storefront requirements<\/li>\n\n\n\n Instantly add or swap sections on any page without the need for developers<\/li>\n\n\n\n Our solution integrates seamlessly with all Shopify themes, ensuring your store maintains optimal speed for an excellent customer experience<\/li>\n\n\n\n Evolve your store’s design as your business grows, ensuring the user interface (UI) aligns with your brand’s development<\/li>\n\n\n\n Explore our demo to see how the app complements your store’s unique personality before committing<\/li>\n<\/ul>\n\n\n\r\n
\r\n
130+ Shopify Sections<\/span>\r\nYour all-in-one solution to create a professional Shopify store<\/p>\r\nInstall App Now<\/a>\r\n<\/div>\r\n\r\n
\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"
A \u201cShop the Look\u201d section enhances the shopping experience and boosts cross-selling by allowing you to showcase complete outfits or curated product bundles. In this…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[787],"tags":[],"class_list":["post-22538","post","type-post","status-publish","format-standard","hentry","category-shopify"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/22538","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=22538"}],"version-history":[{"count":8,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/22538\/revisions"}],"predecessor-version":[{"id":23674,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/22538\/revisions\/23674"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=22538"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=22538"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=22538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Preview](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/app-preview-2-700x481.png\")
<\/figure>\n<\/div>\n\n\n![\"Search](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/browse-section-9-700x392.png\")
<\/figure>\n<\/div>\n\n\n![\"Click](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/try-for-free-8-700x325.png\")
<\/figure>\n<\/div>\n\n\n![\"click](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/app-add-section-2.png\")
<\/figure>\n<\/div>\n\n\n![\"add](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/app-edit-section-2-700x369.png\")
<\/figure>\n<\/div>\n\n\n![\"Preview](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/app-preview-3-700x481.png\")
<\/figure>\n<\/div>\n\n\n![\"liquid](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/code-700x591.png\")
<\/figure>\n<\/div>\n\n\n![\"click](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/code-add-section-4.png\")
<\/figure>\n\n\n\n![\"Edit](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/code-edit-section-1-700x255.png\")
<\/figure>\n<\/div>\n\n\n![\"Preview](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/code-preview-1-700x430.png\")
<\/figure>\n<\/div>\n\n\n![\"MIT](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/mit-sections-pro.png\")
\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"