Use setting of a section outside of section

[Paula2021]

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

    - 

    - {{ 'products.product.order_within' | t }}
      

      

  

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:

    - 

    - {{ 'products.product.order_within' | t }}
      

      

  

But Then on the front I don’t see the variables delivery_time nor deadline_day …

Can someday help me?

[MandasaTech]

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.

[Paula2021]

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

[Liam]

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

[Paula2021]

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 %}
  

    - 

    - {{ 'products.product.order_within' | t }}
      

      

  

{% 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 :

  {% form 'product', product, class:'product-form product-action variants' %}

  

    - {% if product.compare_at_price_max > product.price %}
            {{ product.price | money }}
            <del> {{ product.compare_at_price | money }}</del>
          {% else %}
            {{ product.price | money }}
          {% endif %}
      

    

    - {% include 'product-detail-qty' %}
      

     
    

    - {% include 'product-detail-btn' %}
    
    
    
  

  
      
    {% include 'product-detail-variants' %}
    

       {% endform %}

{% 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

    - 

    - {{ 'products.product.order_within' | t }}
      

      

  

I also tried like this but not working either

    - 

    - {{ 'products.product.order_within' | t }}
      

      

  

Does this clarify my issue @Liam ?

[tim_1]

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.

[Paula2021]

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 ?

[tim_1]

Under theme settings?

[Liam]

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!

[Paula2021]

Hi Thanks @tim_1 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

  

    - 

    - {{ 'products.product.order_within' | t }}
      

      

  

        

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-example

Do you know what I should try next? @Liam @tim_1 THANKS A LOT FOR YOUR TIME!

[tim_1]

@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.

[Paula2021]

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-android/m-p/1043886#M264602

Thanks