Shopify themes, liquid, logos, and UX
Hi, So i am customizing a theme i purchased.
The section of "product-template.liquid" has the setting "delivery_date". Like this
{% include 'product-template' %}
{% schema %}
{
"name": "Product pages 3D",
"settings": [
{
"type": "header",
"content": "Order and Shipping Time",
"info": "Working days"
},
{
"type": "checkbox",
"id": "order_shipping_time",
"label": "Enable Order and Shipping Time",
"default": true
},
{
"type": "range",
"id": "deadline_day",
"label": "Deadline each day",
"default": 14,
"min": 0,
"max": 23,
"step": 1,
"unit": "h"
},
{
"type": "range",
"id": "delivery_time",
"label": "Delivery time",
"default": 2,
"min": 1,
"max": 7,
"step": 1,
"unit": "d"
},
This data is show in the
product.liquid
by doing this
<ul class="shipping-time" data-deliverytime="{{ section.settings.delivery_time }}" data-deadline="{{ section.settings.deadline_day }}">
<li class="delivery-time"></li>
<li class="deadline">
<span class="text">{{ 'products.product.order_within' | t }}</span>
<div class="countdown_deadline"></div>
</li>
</ul>
I want to show this data from another page - the catalogue page, that contains a list of all my products. For this I have to edit the file
product-item.liquid
I have added the same thing that was in my product.liquid file on my product-item.liquid file, like this:
<ul class="shipping-time" data-deliverytime="{{ section.settings.delivery_time }}" data-deadline="{{ section.settings.deadline_day }}">
<li class="delivery-time"></li>
<li class="deadline">
<span class="text">{{ 'products.product.order_within' | t }}</span>
<div class="countdown_deadline"></div>
</li>
</ul>
But Then on the front I don't see the variables delivery_time nor deadline_day ...
Can someday help me?
Solved! Go to the solution
This is an accepted solution.
@Paula2021 -- I see now. What happens is in your liquid you output an empty element which has data attributes assigned. This actually work properly now.
However, on the product page there is a Javascript which pulls this data, converts it to date (and countdown) and outputs it on your product page. But it does not run on the collection page, so your element remains empty.
I briefly looked at the Javascript and it is designed to work on a single product per page and would need serious modification to have this info on your collection pages.
Also, having a countdown under every product in your collection would look a bit too much IMHO.
No, It's not possible to use Product Details Page Section setting on Collection page.
Instead you can do it using Product Tags or Metafields for this Delivery date setting.
The data is not product detail...
This is the data in the product page - so the file Product.liquid
And this is my catalogue page - where you can see that the variables of delivery_date and deadline_day aren't being shown - the file Product-item.liquid
Hi Paula, just to confirm, you're using the same section product-item.liquid on both the product page and on the collection page - and the section is displaying the correct data (day and time) on the product page, but they are not appearing on the collection page. Is that correct?
Could you create a separate section with unique section IDs for the day and time that is only added to the collection page? It's possible since the section is being used on both templates that this is causing an issue.
Let me know if this works 🙂
Liam | Developer Advocate @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog
Hi Liam!
Nope i'm not using the same section for both templates. I'll re-explain;
I have a snippet that shows the order time and delivery date.
product-detail-order-shipping.liquid
{% if section.settings.order_shipping_time %}
<ul class="shipping-time" data-deliverytime="{{ section.settings.delivery_time }}" data-deadline="{{ section.settings.deadline_day }}">
<li class="delivery-time"></li>
<li class="deadline">
<span class="text">{{ 'products.product.order_within' | t }}</span>
<div class="countdown_deadline"></div>
</li>
</ul>
{% endif %}
Then I have the section product-template.liquid linked to the snippet product-template.lquid. Essentially this is what in the front end I see as the product page.
In the SECTION product-template.liquid I have the variables for the shipping info like this:
,
{
"type": "header",
"content": "Order and Shipping Time",
"info": "Working days"
},
{
"type": "checkbox",
"id": "order_shipping_time",
"label": "Enable Order and Shipping Time",
"default": true
},
{
"type": "range",
"id": "deadline_day",
"label": "Deadline each day",
"default": 14,
"min": 0,
"max": 23,
"step": 1,
"unit": "h"
},
{
"type": "range",
"id": "delivery_time",
"label": "Delivery time",
"default": 2,
"min": 1,
"max": 7,
"step": 1,
"unit": "d"
},
Then in my snippet product-template.liquid page (which is what in the front is the product page), there's a combination of multiple snippets with info about the product - like this:
{% include 'product-detail-stock' %}
{% include 'product-detail-short-description' %}
{% include 'product-detail-size-chart' %}
{% include 'product-detail-wishlist-compare' %}
{% include 'product-detail-sku' %}
{% include 'product-detail-price' %}
{% include 'product-detail-deals' %}
And inside the snippet
product-detail-price.liquid I put the snippet to show the Shipping info, so the product-detail-order-shipping.liquid at the end of the file .
So this is my product-detail-price.liquid :
<meta itemprop="priceCurrency" content="{{ shop.currency }}" />
<meta itemprop="priceValidUntil" content="2020-11-05" />
<div id="purchase-{{ product.id }}" class="product-price">
{% form 'product', product, class:'product-form product-action variants' %}
<ul id="qty-atc-mobile" class="list-inline">
<li style=" margin-inline-end: 10px;">
<div class="detail-price" itemprop="price" content="{{ product.price | divided_by: 100.00 }}">
{% if product.compare_at_price_max > product.price %}
<span class="price-sale">{{ product.price | money }}</span>
<del class="price-compare"> {{ product.compare_at_price | money }}</del>
{% else %}
<span class="price">{{ product.price | money }}</span>
{% endif %}
</div>
</li>
<li>
<div class="qty-add-cart">
{% include 'product-detail-qty' %}
</div>
</li>
<li>
{% include 'product-detail-btn' %}
</li>
</ul>
<div class="group-cw clearfix">
{% include 'product-detail-variants' %}
</div>
{% endform %}
</div>
{% include 'product-detail-order-shipping' %}
Up until here aLL GOOD. This makes my product page have the shipping information as I want.
What I want now is to add this shipping information into my collection pages.
To do this the collection pages is made up of different snippets. I identified that the snippet with the product details is the snippet product-item.liquid
So I tried adding to the snippet product-item.liquid the snippet product-detail-order-shipping.liquid . Like this:
{% include 'product-detail-order-shipping' %}
But it is not working because the snippet product-detail-order-shipping.liquid has an IF statement at the beginning that does not correspond to the section of product-item.liquid . The section linked to the snippet product-item.liquid has none of the variables:
section.settings.order_shipping_time
section.settings.delivery_time
section.settings.deadline_day
So basically what I think I need is to read form the snippet product-item.liquid some variables declared on the section product-template.liquid .
I tried to put the variables directly in in the product-item.liquid instead of adding product-detail-order-shipping.liquid , like this - but it is not working:
product-item.liquid
<ul class="shipping-time" data-deliverytime="{{ section.settings.delivery_time }}" data-deadline="{{ section.settings.deadline_day }}">
<li class="delivery-time"></li>
<li class="deadline">
<span class="text">{{ 'products.product.order_within' | t }}</span>
<div class="countdown_deadline"></div>
</li>
</ul>
I also tried like this but not working either
<ul class="shipping-time" data-deliverytime="{{ section.product-template.settings.delivery_time }}" data-deadline="{{ section.product-template.settings.deadline_day }}">
<li class="delivery-time"></li>
<li class="deadline">
<span class="text">{{ 'products.product.order_within' | t }}</span>
<div class="countdown_deadline"></div>
</li>
</ul>
Does this clarify my issue @Liam?
No, you cannot use section setting outside of section.
In your case, you need to move this setting to the theme settings (in the settings_schema.json config.
hi,thanks for your reply but how would i do this? I don't understand ... if I move these variables to setting_schema.json where would the user set them up ?
Under theme settings?
Hi again Paula, as Tim mentioned section settings are only accessible within that section, so recreating them as theme settings may be the best option here. Once added, merchants would be able to access the settings from Theme Settings on the Online Store Editor:
Hope this helps!
Liam | Developer Advocate @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog
Hi Thanks @tim and @Li
I changed the variable to setting_schema.json, however it is still not working. I think the issue is that the styling pages that are loaded in the product page are not loaded in the catalogue page. Look at screenshot here: You can see that is says "Order within (BLANK)" where BLANK should have the data.
So therefore the catalogue page doesn't know what the styling classes are : "class="shipping-time" "class="delivery-time", class="deadline", class="countdown_deadline". These classes are defined in the Style.css file. I checked an it seems that this Style.css file IS being loading in the catalogue page ... So I have no idea of what to do next .. ?
This is the code I have in the catalogue page for each product item:
Product-item.liquid
<div >
<ul class="shipping-time" data-deliverytime="{{ settings.delivery_time }}" data-deadline="{{ settings.deadline_day }}">
<li class="delivery-time"></li>
<li class="deadline">
<span class="text">{{ 'products.product.order_within' | t }}</span>
<div class="countdown_deadline"></div>
</li>
</ul>
</div>
And this is a screenshot of how it is rendered:
You can check here my WEBSITE
Temporary Password: Bdx2021
the difference between the catalogue page:
https://piecesdetacheesfrigo-fr.myshopify.com/collections/accessories
and the product pages:
https://piecesdetacheesfrigo-fr.myshopify.com/collections/accessories/products/golddax-product-examp...
Do you know what I should try next? @Liam @tim THANKS A LOT FOR YOUR TIME!
This is an accepted solution.
@Paula2021 -- I see now. What happens is in your liquid you output an empty element which has data attributes assigned. This actually work properly now.
However, on the product page there is a Javascript which pulls this data, converts it to date (and countdown) and outputs it on your product page. But it does not run on the collection page, so your element remains empty.
I briefly looked at the Javascript and it is designed to work on a single product per page and would need serious modification to have this info on your collection pages.
Also, having a countdown under every product in your collection would look a bit too much IMHO.
Thanks! 🙂
I managed to do a work around by just showing the variable without the complicated javascript.
If you'd have the time would you mind checking this other issue I'm having with encoding? https://community.shopify.com/c/Shopify-Design/weird-aphabet-on-text-when-I-share-my-product-on-andr...
Thanks
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024