Skip to content

  • Home
  • About Us
  • Add-ons
  • Services
    • Shopify Development Services
    • Shopify Maintenance services
    • Shopify PageSpeed Optimization
    • Shopify Training
    • Shopify App Development
    • Shopify App Integration Services
    • Shopify Email Marketing
    • Shopify Web Design Agency
  • Blog
  • Contact Us
  • Search button

Watch Video Now! How to Add The Look Section In My Theme?

Apr 20, 2022Nov 15, 2022
Add a Shop the Look section to my theme

Showing shoppable images on the Add a shop the look section to my theme store is a great way to encourage buyers and upsell accessories and additional products. From one image you can add multiple regions which when hovered give insightful product detail and links to purchase the product.

Look Section theme in Shopify the Look displays a list of all your featured products on just one page. The perfect app for recommending products to complete a look. Allows customers to purchase multiple items from just one page. Shopify Look section theme options of the product for direct add-to-cart shopping. Shop the Look Section theme in Shopify is the most sought feature by fashion stores looking to increase sales by simply recommending multiple products that complete featured looks.

Shopify Look section theme helps you to boosts overall sales with featured product recommendations. Aid your customers in their buying processing by allowing them to see the entire outfit all in one place. Shop the Look displays a list of all the products featured in your photos. Look Section theme in Shopify, your customers can easily recreate those looks without having to leave the page.

Look Section theme in Shopify section can be used repeatedly with all other home page sections to create numerous shoppable campaign image regions.

Editing your theme code to add shop the look section to my theme feature

Required files: section [shop-the-look.liquid]
  • In the Section directory, Create a new file called shop-the-look.liquid and add Shopify Look section theme the following code:
 {%- assign column = section.settings.column -%}
{%- assign detail = section.settings.show_product_details -%}
{%- assign count_title = 0 -%}
{%- assign count = 0 -%}
{%- assign block_size = section.blocks.size -%}
{%- assign img_max_height = 300 -%}
{%- assign column_class = " " -%}
{%- if column == 1 -%}
    {%- assign img_max_height = 450 -%}
    {%- assign column_class = " one-whole " -%}
{%- elsif column == 2 -%}
    {%- assign img_max_height = 350 -%}
    {%- assign column_class = " medium-up--one-half" -%}
{%- elsif column == 3 -%}
    {%- assign img_max_height = 600 -%}
    {%- assign column_class = " medium-up--one-third " -%}
{%- endif -%}
<div class="page-width">
  <div class="grid grid-column-{{column}}{% if detail == true %} stl-product-desc{% else %} grid-stl-product{% endif %}">
  {% for block in section.blocks %}
    {% assign count = count | plus: 1 %}
    {% if block.type == 'title' %}
        {% assign count_title = count_title | plus: 1 %}
        {% if count_title == 1 %}
            {% if count > 1 %}
                </div></div>
            {% endif %}
            {% if count < block_size %}
                <div class="grid__item {{column_class}} products-group">
            {% endif %}
            {% assign count_title = 0 %}
            {% assign count = 0 %}
        {% endif %}
        <h3 class="title">{{block.settings.title}}</h3>
    {% endif %}
    {% if block.type == 'product' %}
        {% assign prod = block.settings.products %}
        {% if count == 1 %}
        <div class="first-product">
          {%- assign featured_image = all_products[prod].selected_or_first_available_variant.featured_image | default: all_products[prod].featured_image -%}
          {%- assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

          <a href="{{all_products[prod].url}}" class="stl-product">
            <img class="feature-row__image lazyload"
                 src="{{ featured_image | img_url: '520x520' }}"
                 data-src="{{ img_url }}"
                 data-widths="[200, 360, 520, 680, 840, 1000, 1160]"
                 data-aspectratio="{{ featured_image.aspect_ratio }}"
                 data-sizes="auto"
                 tabindex="-1"
                 alt="{{ featured_image.alt | escape }}">
            {% if detail == true %}
                <div class="stl-product-detail">
                  {%- assign current_variant = all_products[prod].selected_or_first_available_variant -%}
                  <h5 class="stl-product-name">{{all_products[prod].title}}</h5>
                  {% include 'product-price', variant: current_variant %}
                </div>
            {% endif %}
          </a>

        </div>
        <div class="grid stl-products">
        {% else %}
        <div class="grid__item one-whole">
          {%- assign featured_image = all_products[prod].selected_or_first_available_variant.featured_image | default: all_products[prod].featured_image -%}
          {%- assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

          <a href="{{all_products[prod].url}}" class="stl-product-img"><img class="feature-row__image lazyload"
                 src="{{ featured_image | img_url: '180x180' }}"
                 data-src="{{ img_url }}"
                 data-widths="[180, 240, 300, 360]"
                 data-aspectratio="{{ featured_image.aspect_ratio }}"
                 data-sizes="auto"
                 tabindex="-1"
                 alt="{{ featured_image.alt | escape }}"></a>

          {% if detail == true %}
          {%- assign current_variant = all_products[prod].selected_or_first_available_variant -%}
            <a href="{{all_products[prod].url}}" class="stl-product-name">{{all_products[prod].title}}</a>

            {% include 'product-price', variant: current_variant %}

          {% endif %}
          </div>
        {% endif %}
    {% endif %}
  {% endfor %}
  </div>
</div>
<style>
  .products-group{padding-top:10px;padding-bottom:10px;}
  .stl-products .grid__item{margin-bottom:15px;}
  .grid-stl-product .stl-products .grid__item{width:33.33333%;}
  .first-product{ margin-bottom: 15px; }
  .stl-product{display: block;position:relative;}
  .stl-product-detail{position:absolute;left:0;right:0;bottom:0;z-index:1;opacity:0;transition: opacity 1s;padding:10px;color:#fff;background: rgba(0,0,0,0.5);}
  .stl-product-detail .stl-product-name{font-size:14px;margin: 0;padding: 0 0 5px;}
  .stl-product:hover .stl-product-detail{opacity:1;transition: opacity 1s;}
  .stl-product-detail .price{display:inline-block;width:auto;padding-left:10px;background: #fff;}

  .stl-products{font-size:14px;line-height:1.2;}
  .stl-products .price{width:auto;padding:5px 0;}
  .stl-products .price--on-sale .price__sale{display:inline-block;}

  .grid-column-2 .grid__item:nth-child(odd){clear:both;}

  .stl-product-desc .stl-product-img{float:left;width:30%;margin-right:10px;}
  @media (min-width:481px){
    .grid-stl-product .stl-products .grid__item{width:100%;}
    .grid-stl-product .first-product{float:left;width:74%;clear:both;}
    .grid-stl-product .stl-products{float:right;width:26%;}
    .grid-column-1.stl-product-desc .first-product, .grid-column-2.stl-product-desc .first-product{float:left;width:60%;clear:both;}
    .grid-column-1.stl-product-desc .stl-products,.grid-column-2.stl-product-desc .stl-products{float:right;width:40%;}
  }
  @media (min-width:481px) and (max-width:749px){
    .grid-column-1.stl-product-desc .first-product{width:60%;}
    .grid-column-1.stl-product-desc .stl-products{width:40%;}
    .grid-column-3.stl-product-desc .first-product{float:left;width:60%;clear:both;}
    .grid-column-3.stl-product-desc .stl-products{float:right;width:40%;}
  }
  @media (min-width:750px) and (max-width:1100px){
    .grid-column-2 .first-product, .grid-column-2 .stl-products, .grid-column-2.stl-product-desc .first-product, .grid-column-2.stl-product-desc .stl-products{float:none;width:100%;}
    .grid-stl-product .stl-products .grid__item{width:33.33333%;}

    .grid-column-1.grid-stl-product .first-product{width:65%;}
    .grid-column-1.grid-stl-product .stl-products{width:35%;}
    .grid-column-1.grid-stl-product .stl-products .grid__item{width:100%;}

    .grid-column-3 .products-group{width:50%;}
    .grid-column-3.grid-stl-product .stl-products .grid__item{width:100%;}
  }
  @media (min-width:880px) and (max-width:1100px){
    .grid-column-1.grid-stl-product .first-product{width:50%;}
    .grid-column-1.grid-stl-product .stl-products{width:50%;}
    .grid-column-1.grid-stl-product .stl-products .grid__item{width:50%;}
    .grid-column-1.stl-product-desc .first-product{float:left;width:35%;clear:both;}
    .grid-column-1.stl-product-desc .stl-products{float:right;width:65%;}
    .grid-column-1.stl-product-desc .stl-products .grid__item{width:50%;}
    .grid-column-2.stl-product-desc .stl-products .grid__item, .grid-column-3.stl-product-desc .stl-products .grid__item{width:50%;}
  }
  @media (min-width:1101px){
    .grid-column-3.grid-stl-product .first-product, .grid-column-3.grid-stl-product .stl-products{float:none;width:100%;}
    .grid-column-3.grid-stl-product .stl-products .grid__item{width:33.33333%;}
    .grid-column-1.grid-stl-product .products-group{width:50%;}
    .grid-column-1.stl-product-desc .first-product{float:left;width:35%;clear:both;}
    .grid-column-1.stl-product-desc .stl-products{float:right;width:65%;}
    .grid-column-1.stl-product-desc .stl-products .grid__item{width:50%;}
  }
</style>
{% schema %}
  {
    "name": "Shop the look",
    "settings": [
      {
        "type": "checkbox",
        "id": "show_product_details",
        "label": "Show product details",
        "default": true
      },
      {
        "type": "range",
        "id": "column",
        "label": "Column",
        "min": 1,
        "max": 3,
        "step": 1,
        "default": 2
      }
    ],
    "blocks": [
      {
        "type": "title",
        "name": "Title",
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "Title"
          }
        ]
      },
      {
        "type": "product",
        "name": "Products",
        "settings": [
          {
            "type": "product",
            "id": "products",
            "label": "Select a product"
          }
        ]
      }
    ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
  • Template directory, add the following code to the any template where you want to show this feature, currently, we’ve added this at the bottom of index.liquid:
{% section 'shop-the-look' %}
  • Congrats, You’ve completed the coding parts.
  • Now it’s available in the Look Section theme in Shopify section. You can modify through Themes>customize page section settings. First, you’ve to add products through the Shopify theme section otherwise it’ll show nothing. You’ll get two options to add Title and product
Look Section theme in shopify
Shopify Look section
Add a shop the look section to my theme
Posted in Shopify Tutorials

Post navigation

Prev Add a delivery date picker to your cart
Next Setting Up a Local Shopify Theme Development Environment

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Latest Posts

  • Shopify winter edition
    Understanding The Shopify Winter Edition 2023 UpdatesMar 14, 2023
  • Steps To Set Up Shopify Test Order For Quality Assurance
    Steps To Set Up Shopify Test Order For Quality AssuranceMar 1, 2023
  • Why You Should Implement Shopify Inventory Management for Increased EfficiencyFeb 16, 2023
  • Shopify theme detector
    Shopify Theme Detector: Uncover the Perfect Shopify Theme for Your StoreFeb 10, 2023

Subscribe Now

Follow Us

  • facebook
  • twitter
  • instagram
  • linkedin2

OriginateWeb.com is the realization of a dream. Our founder previously spent several years working for a large website development company.

Quick Links

  • Shopify Services
  • About Us
  • Shopify Theme Add-ons
  • Blog
  • Contact Us
  • Careers

Services

  • Shopify Theme Add-ons
  • Website Development
  • Page Speed Optimization
  • App Development
  • Maintenance
  • Training

Need Help?

  • Licensing Agreement
  • Terms and Conditions
  • Privacy Policy
  • Sitemap
  • facebook
  • twitter
  • instagram
  • linkedin2

© 2023 Originate Web. All Rights Reserved