TeamDijon

<svg {{ class_attribute }} viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" {{ style_attribute }}>
  <path d="M 45 5 L 5 45 M 5 5 L 45 45"></path>
</svg>

TeamDijon

{% liquid
  # social_network_list contains the list of social_network metaobject entries associated with the current market
  assign social_network_list = localization.market.metafields.content.social_network_list.value
%}

{% # Later in the markup %}
<ul class="social-network-link-list">
  {% for social_network in social_network_list %}
    {% liquid
      # We get and process the data from the metaobject entry

TeamDijon

{%- comment -%}
  Minifies and return CSS. Returns nothing if the CSS is empty.

  Accepts:
  - css {string} - CSS to minify
  - section {Section object} - Section object (Optional)

  Usage:
    {% capture dynamic_style %}
      {% render 'template-section-style' %}

TeamDijon

{% comment %}
  If you have questions regarding the blog/article list interface, see :
  https://gist.github.com/TeamDijon/15684d1bef3c4bb5ca9dfd8a9381a156
  
  As always, with collections/blogs/articles, mind the potential conflicts with pagination

  For the article handle source, I usually go with a "ricthext" setting using unordered list.
  From this, I can retrieve the data and store everything in an array before using it on the following snippets of code
{% endcomment %}

TeamDijon

{% liquid
  # The setting is of "richtext" type
  assign blog_handle_list = section.settings.blog_handle_list

  assign associated_blog_list = ''
  assign markup_blog_markup_list = blog_handle_list | split: '</ul>' | first | split: '</li>'
  for markup_blog_handle in markup_blog_handle_list
     assign blog_handle = static_blog_handle | split: '>' | last
     assign associated_blog = blogs[blog_handle]

TeamDijon

{% # Inside the liquid file %}
{% liquid
  assign base_selector = '#shopify-section-' | append: section.id 
  assign accent_color = section.settings.accent_color
%}

<style>
  {{ base_selector }} {
    {% if accent_color != 'rgba(0,0,0,0)' and accent_color != '#000000' %}    
      --accent-color: {{ accent_color }};

TeamDijon

{% comment %}
  Returns the color code most contrasted with the given color.
  
  Accepts:
    color {Hex color} - The background color of the element. Defaults to #ffffff.
    black {Hex color} - The first color we calculate the contrast with. Defaults to #000000. (Optional)
    white {Hex color} - The second color we calculate the constrast with. Defaults to #ffffff. (Optional)
  
  Usage:
    {% render 'color-contrast', color: section.settings.background_color %}

TeamDijon

{% comment %}
  - I have a product with a variant metafield containing associated cross-sell product list
  - Objective is to show cross-sell products associated with the variant
  - Second objective was to use object construction to remove complexity in markup
  - Inside the markup, we need the product reference for data population as well as the variant IDs which needs to show the cross sell card (used by Javascript)
{% endcomment %}

{% liquid
  # First, we make a duplicate-free list of cross-sell products
  assign cross_sell_product_list = ''

TeamDijon

{% # Snippet documentation comment %}
{%- comment -%}
  Renders the template name based on the template object.

  Accepts:
    - template {Template object} - Template object

  Usage:
    {% render 'template-name' %}
{%- endcomment -%}

TeamDijon

{% # Checking the presence of a block %}
{% liquid
  assign announcement_block_list = section.blocks | where: 'type', 'announcement'
  if announcement_block_list == empty
    # Take action to prepare fallback content
  endif
%}

/////////////////////////////////////////