Frank Coding World

 

 

 

Step 1：modify the announcement bar 

<div class="page-width">
<p class="announcement-bar__message {{ block.settings.text_alignment }} h5 nofree {% if cart.total_price > 499999 %} visually-hidden{% endif %}">
{{ block.settings.text | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</p>
<p class="announcement-bar__message freeshippg {{ block.settings.text_alignment }} h5 {% if cart.total_price < 500000 %} visually-hidden{% endif %}">
Free shipping
</p>
</div>

 

 

Step 2: add js in the theme.liquid

Use the DOMNodeInserted to listen the event change

 

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<script>

$("#cart-icon-bubble").bind('DOMNodeInserted', function(e) {      
var totalprice = $(".data-total-price").val();
if (totalprice < 499999){
$(".freeshippg").addClass("visually-hidden")
$(".nofree").removeClass("visually-hidden")
}
else {
$(".nofree").addClass("visually-hidden")
$(".freeshippg").removeClass("visually-hidden")
} 
});
</script>

 

 

Step 3: Add input tag to the cart-icon-bubble for the DOMNodeInserted

code need to added both to header.liquid and cart-icon-bubble.liquid

 

{%- if cart != empty -%}
<div class="cart-count-bubble">
{%- if cart.item_count < 100 -%}
<span aria-hidden="true">{{ cart.item_count }}</span>
{%- endif -%}
<span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>

<input class="visually-hidden data-total-price" data-total-price="{{ cart.total_price }}" value="{{ cart.total_price }}">

</div>
{%- endif -%}

 

 

 

In the past days, we always receive lots of  similar requests from our merchant - they want to add liquid content to the Multicolumn or Collapsible content, which can allow them to custom the content with less restriction.

That is pretty straight forward. For example, if we want to add a new liquid content option to the Multicolumn section of my store, just need to add the script below to multicolumn.liquid > schema > Block:

{

"type":"liquid",

"id":"liquid",

"label":"Liquid"
}

Then we continue the HTML part - add   <div> {{ block.settings.liquid }}</div> to the <div class="multicolumn-card__info">

 

Please refer to the below screenshot:

 

After the above steps, we can easily achieve the outcome we want 

This is quite straight forward, just create a new section name custom_section.liquid,

Also restrict the section to home page and product templates

 

 

Step1: add a script to schema setting:

{
"type":"checkbox",
"id":"hccheckbox",
"label":"Hide Cart"

},

Step2：

• add an if condition to check if this page is home page:

• add the other if condition to check if Hide Cart is togged;

{% if template.name != "index" %}
<a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">
{%- liquid
if cart == empty
render 'icon-cart-empty'
else
render 'icon-cart'
endif
-%}
<span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
{%- if cart != empty -%}
<div class="cart-count-bubble">
{%- if cart.item_count < 100 -%}
<span aria-hidden="true">{{ cart.item_count }}</span>
{%- endif -%}
<span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
</div>
{%- endif -%}
</a>
{% else %}
{% if section.settings.hccheckbox %}
<span></span>
{% else %}
<a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">
{%- liquid
if cart == empty
render 'icon-cart-empty'
else
render 'icon-cart'
endif
-%}
<span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
{%- if cart != empty -%}
<div class="cart-count-bubble">
{%- if cart.item_count < 100 -%}
<span aria-hidden="true">{{ cart.item_count }}</span>
{%- endif -%}
<span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
</div>
{%- endif -%}
</a>
{% endif %}
{% endif %}

A custom just reached out to us, they said they have lot of products and each product has its own product video. However, not all products have a video link.

So in this case, I will apply the metafields feature to help the merchant.

 

Step 1: I create a  Single line text Metafields for products - product.metafields.custom.product_video

 

Step 2: add a custom liquid section to the default product page, and fill in with the code below:

<iframe class="responsive-video" width="560" height="315" src="{{product.metafields.custom.product_video}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

 

Step 3: make this video responsive

<style>
.responsive-video {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
display: block;
margin: auto;
max-width:1140px;
}
</style>

 

Step 4: add the embed link to the product we want

 

 

 

 

A merchant just reached out to me said their image on the contact page can't centered even they tried to use the page build in alignment button to set up.

 

I just tried this, it is true. Just like the screenshot below:

 

 

There is many method to center the image on the page, but today, I just want to share one very quick method to center the image.

 

Method:

Just in the page html edit mode

• add the attribute - style="text-align:center;"> in the parent tag

<p style="text-align: center;"><img src="https://cdn.shopify.com/s/files/1/0665/1727/0753/products/1_480x480.jpg?v=1666422136" alt="" /></p>
<p> </p>

Then the image will be centered.