This Online Store 2.0 section allows you to easily promote a product in an article in the Flex theme in a Shopfiy store

article__featured-products.liquid

{% comment %}

Custom section added by JadePuma
Instructions - https://jadepuma.com/blogs/shopify-tutorials/add-a-cart-message-section-to-the-flex-theme
Last editted - 9Aug22

{% endcomment %}

{% for tag in article.tags %}
	{% if tag contains 'product-' %}
		{% assign product-handle-check = tag | remove_first: "product-" %}
    {%- assign product-check = all_products[product-handle-check] -%}
      {% if product-check.title.size > 0  %}  
        {% assign product-handle = tag | remove_first: "product-" %}    
        {% assign feature_product_array = feature_product_array | append: product-handle | append: ',' %}
	    {% endif %} 
  
  {% endif %}
{% endfor %}

{% assign feature_product_array = feature_product_array | split: "," %} 
{% assign num_featured_products = feature_product_array.size %}

{% if product-handle %}

  {%- assign product = all_products[product-handle] -%}
  {%- assign product_tags = product.tags | join: ' ' -%}
  {%- assign collection_handles = product.collections | map: 'handle' -%}

  {% liquid
    assign selected_variant = product.selected_variant

    if product.variants.size == 1 or settings.select_first_available_variant
      assign selected_variant = product.selected_or_first_available_variant
    endif
  %}

  {% if product.empty? %}
    {%- assign section_onboarding = true -%}
  {% else %}
    {%- assign section_onboarding = false -%}
  {% endif %}

  {% style %}
    #shopify-section-{{ section.id }} {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
      {% if section.settings.width == 'wide' -%}
        width: 100%;
      {%- endif %}
    }
  .section-heading-{{ section.id }} {
    background-color: {{ section.settings.heading_background_color }}; 
    color: {{ section.settings.heading_color }}; 
    text-align: center;
    padding: 1em;
    margin-bottom: 20px;
    text-transform: uppercase;
  }
  .center { text-align: center; }
    {% render 'css-loop',
            css: section.settings.custom_css,
            id: section.id
    %}

  {% endstyle %} 

  {% comment %} HTML markup {% endcomment %}
    <section class="section
                  {{ section.settings.css_class }}
                  is-width-{{ section.settings.width }}
                  "
            {% if section.settings.animation != "none" %}
              data-scroll-class="{{ section.settings.animation }}"
            {% endif %}>


{% if num_featured_products == 1 %}

      <h2 class="section-heading-{{ section.id }}">{{ section.settings.heading }}</h2>

      <div class="product-{{ product.id }}">
        {%
          render 'related-product',
          product: product,
          sold_out_options: settings.sold_out_options,
          selected_variant: selected_variant,
          width: width,
          css_class: css_class,
          display_thumbnails: section.settings.display_thumbnails,
          enable_product_lightbox: section.settings.enable_product_lightbox,
          enable_shopify_product_badges: section.settings.enable_shopify_product_badges,
          enable_thumbnail_slider: section.settings.enable_thumbnail_slider,
          enable_zoom: section.settings.enable_zoom,
          gallery_arrows: section.settings.gallery_arrows,
          product_height: section.settings.product_height,
          product_images_position: section.settings.product_images_position,
          set_product_height: section.settings.set_product_height,
          slideshow_transition: section.settings.slideshow_transition,
          stickers_enabled: settings.stickers_enabled,
          tag_style: settings.tag_style,
          thumbnail_position: section.settings.thumbnail_position,
          video_looping: section.settings.video_looping,
          section_onboarding: section_onboarding
        %}
      </div>
      <div class="center">
      <button class="button action_button action_button--primary"><a href="/products/{{ product-handle }}">Learn More</a></button>
      </div>

{% else %}


{% assign block_width = 100 | divided_by: section.settings.products_per_row %}



{% style %}

.featured_product_grid_layout{
    display:flex;
    flex-direction:row;
    justify-content: center;
    margin-bottom:50px;
}


.featured_product_grid_item{
  position:relative;
  text-align:center;
  margin-bottom:20px;
    flex-basis:{{block_width}}%;
    padding:20px;
    padding-bottom:70px;
}

@media only screen and (max-width: 1050px) {
.featured_product_grid_item{
    text-align:center;
    {% unless section.settings.products_per_row == 2 %}
    flex-basis:30%;
    {% endunless %}
    margin-top:20px;
}
}

@media only screen and (max-width: 800px) {
.featured_product_grid_item{
    text-align:center;
    flex-basis:45%;
    margin-top:20px;
}
}

@media only screen and (max-width: 550px) {
.featured_product_grid_item{
    text-align:center;
    flex-basis: 100%;
    margin-top:10px;
}
}

.featured_product_grid_image{
    width:auto;
  {% if section.settings.set_grid_images_height %}
    height:{{section.settings.multiple_products_height}}px;
  {% endif %}
}

.featured_product_grid_button{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  margin-top:20px;
  margin-bottom:20px;
}

{% endstyle %}

<h2 class="section-heading-{{ section.id }}">{{ section.settings.multiple_products_heading }}</h2>

<div class="featured_product_grid_layout container">
{% for featured_product in feature_product_array %}
  {%- assign product = all_products[featured_product] -%}
  <div class="featured_product_grid_item">
    <img class="featured_product_grid_image" src=" {{product.featured_image | img_url: 'large' }}"/>
    <div>
        {{ product.title }}
    </div>
  {% unless section.settings.hide-price %}
        <div>
        <span>{{ product.price_min  | money_with_currency }} -  {{ product.price_max  | money_with_currency }}</span>
        </div>
    {% endunless %}
    <div class="featured_product_grid_fixed" >
       <a href="{{ product.url }}">
         <button class="button featured_product_grid_button">{{section.settings.button_text}}</button>
       </a>
    </div>
  </div>
{% endfor %}
</div>

{% endif %}

    </section>

  {% comment %} Shopify-XR {% endcomment %}
  {% if product.media %}
  <script>
    window.ShopifyXR=window.ShopifyXR||function(){(ShopifyXR.q=ShopifyXR.q||[]).push(arguments)}
      {% assign models = product.media | where: 'media_type', 'model' | json %}
      ShopifyXR('addModels', {{ models }});
  </script>
  {% endif %}

  {%- for block in section.blocks -%}
    {%- if block.type == 'price' -%}
      {%- assign display_savings = block.settings.display_savings | json -%}
    {%- endif -%}
  {%- endfor -%}

  {% comment %} JavaScript {% endcomment %}
  <script
    type="application/json"
    data-section-id="{{ section.id }}"
    data-section-data
  >
    {
      "display_savings": {{ display_savings }},
      "gallery_arrows": {{ section.settings.gallery_arrows | json }},
      "thumbnail_arrows": {{ section.settings.gallery_arrows | json }},
      "enable_zoom": {{ section.settings.enable_zoom | json }},
      "enable_product_lightbox": {{ section.settings.enable_product_lightbox | json }},
      "enable_thumbnail_slider": {{ section.settings.enable_thumbnail_slider | json }},
      "slideshow_speed": {{ section.settings.slideshow_speed | json }},
      "slideshow_transition": {{ section.settings.slideshow_transition | json }},
      "thumbnails_enabled": {{ section.settings.display_thumbnails | json }},
      "thumbnail_position": {{ section.settings.thumbnail_position | json }},
      "product_media_amount": {{ section.settings.product.media.size }},
      "template": "featured-product-section"
    }
  </script>
  <script data-theme-editor-load-script src="{{ 'z__jsProduct.js' | asset_url }}"></script>

  {% endif %}


{% schema %}
{
  "name": "Article featured products",
  "class": "featured-product-section jsProduct",
  "settings": [
    {
      "type": "header",
      "content": "Instructions",
      "info": "To promote a product on article, create an article tag.  Tag should start with 'product-' followed by the desired product handle.  Each product tag added will get displayed."
    },
    {
      "type": "header",
      "content": "Heading"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Single Product Heading",
      "default": "Related Product"
    },
    {
      "type": "text",
      "id": "multiple_products_heading",
      "label": "Multiple Products Heading",
      "default": "Related Products"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Text Color"
    },
    {
      "type": "color",
      "id": "heading_background_color",
      "label": "Background Color",
      "default": "#FFFFFF"
    },
    {
      "type": "header",
      "content": "Multiple Product Settings"
    },
    {
      "type": "range",
      "id": "products_per_row",
      "label": "Products Per Row",
      "min": 2,
      "max": 5,
      "step": 1,
      "default":3
    },
    {
      "type": "checkbox",
      "id": "set_grid_images_height",
      "label": "Set Image Height",
      "default": false
    },
      {
      "type": "range",
      "id": "multiple_products_height",
      "label": "Multiple Products media height",
      "min": 100,
      "max": 800,
      "step": 10,
      "default": 500,
      "unit": "px"
    },
    {
      "type": "checkbox",
      "id": "hide-price",
      "label": "Hide Price",
      "default": false
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "default": "Shop Now"
    },
    {
      "type": "header",
      "content": "Single Product Settings"
    },
    {
      "type": "checkbox",
      "id": "show_description",
      "label": "Show Description",
      "default": false
    },
    {
      "type": "richtext",
      "id": "custom_description",
      "label": "Product description",
      "info": "Used to create a custom product description."
    },
    {
      "type": "header",
      "content": "Media",
      "info": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
    },
    {
      "type": "radio",
      "id": "product_images_position",
      "label": "Media position",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "left"
    },
    {
      "type": "checkbox",
      "id": "set_product_height",
      "label": "Set height of product media",
      "default": false
    },
    {
      "type": "range",
      "id": "product_height",
      "label": "Product media height",
      "min": 200,
      "max": 800,
      "step": 10,
      "default": 500,
      "unit": "px"
    },
    {
      "type": "checkbox",
      "id": "video_looping",
      "label": "Enable video looping",
      "default": false
    },
    {
      "type": "header",
      "content": "Product gallery"
    },
    {
      "type": "checkbox",
      "id": "gallery_arrows",
      "label": "Show arrows",
      "info": "Only applies to desktop",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "enable_zoom",
      "label": "Magnify on hover",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "enable_product_lightbox",
      "label": "Enable lightbox",
      "default": true
    },
    {
      "type": "range",
      "id": "slideshow_speed",
      "label": "Gallery speed",
      "min": 0,
      "max": 6,
      "unit": "sec",
      "default": 0,
      "info": "Set to 0 to disable autoplay."
    },
    {
      "type": "select",
      "id": "slideshow_transition",
      "label": "Gallery transition",
      "options": [
        {
          "value": "slide",
          "label": "Slide"
        },
        {
          "value": "fade",
          "label": "Fade"
        }
      ],
      "default": "slide"
    },
    {
      "type": "checkbox",
      "id": "display_thumbnails",
      "label": "Show thumbnails",
      "default": true
    },
    {
      "type": "select",
      "id": "thumbnail_position",
      "label": "Thumbnails position",
      "options": [
        {
          "value": "left-thumbnails",
          "label": "Left of main image"
        },
        {
          "value": "right-thumbnails",
          "label": "Right of main image"
        },
        {
          "value": "bottom-thumbnails",
          "label": "Below main image"
        }
      ],
      "default": "bottom-thumbnails"
    },
    {
      "type": "checkbox",
      "id": "enable_thumbnail_slider",
      "label": "Enable thumbnail slider",
      "default": true
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "select",
      "id": "width",
      "label": "Width",
      "default": "standard",
      "options": [
        {
          "value": "standard",
          "label": "Standard"
        },
        {
          "value": "wide",
          "label": "Wide"
        }
      ]
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Top spacing",
      "min": 0,
      "max": 80,
      "default": 20,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Bottom spacing",
      "min": 0,
      "max": 80,
      "default": 20,
      "unit": "px"
    },
    {
      "type": "select",
      "id": "animation",
      "label": "Animation",
      "default": "none",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "fadeIn",
          "label": "Fade in"
        },
        {
          "value": "fadeInDown",
          "label": "Fade in down"
        },
        {
          "value": "fadeInLeft",
          "label": "Fade in left"
        },
        {
          "value": "fadeInRight",
          "label": "Fade in right"
        },
        {
          "value": "slideInLeft",
          "label": "Slide in left"
        },
        {
          "value": "slideInRight",
          "label": "Slide in right"
        },
        {
          "value": "zoomIn",
          "label": "Zoom in"
        }
      ]
    },
    {
      "type": "header",
      "content": "Advanced",
      "info": "[Learn more](https://help.outofthesandbox.com/hc/en-us/articles/360022329373)"
    },
    {
      "type": "text",
      "id": "css_class",
      "label": "CSS Class"
    },
    {
      "type": "textarea",
      "id": "custom_css",
      "label": "Custom CSS"
    }
  ],
 "presets": [
    {
      "name": "Article Featured products",
      "category": "Product"
    }
  ]
}

{% endschema %}