Page blank after duplicating template and section

Shopify Partner
6 0 0

Quick summary:

I've duplicated a sidebar template and section but when I select this page template, the content on the front end does not show up.

Details:

I've got a sidebar template for my theme which only calls the sidebar section, this is a page template which I can select from the dropdown while editing a page. I want to duplicate this and modify the code.

So I've duplicated the sidebar template and renamed it (page.sidebar-b.liquid). Then I've duplicated the section and renamed it (page-sidebar-b-template.liquid) - The section's content is the same as the original, the template only has:

{% section 'sidebar-b-template' %}

So I've created a new page and selected this template; however, the content is blank while the header and footer appear just fine while there is content in my page editor. Why is that?

Here's the new page with the template I've created:
https://www.signa.com/pages/contact-no-spam

Thanks for the help!

0 Likes
Shopify Partner
25 0 5

Seems, there missed a "clearfix" rule.

Kindly try to add to the end of your section template a code:

<div class="clearfix"></div>

 

1 Like
Shopify Partner
6 0 0

Thanks Sasha, the content appears after adding the clearfix div. But is that what's messing up my grid system?

Here's what the page looks like now (after adding the clearfix div):

https://www.signa.com/pages/contact-no-spam

and here's the original code used in the section (without adding the additional clearfix to the end, this is blank on the front end)

{% comment %}
** Sidebar page - custom view **
- Page template
- Uses blocks
{% endcomment %}

<a name="pagecontent" id="pagecontent"></a>

{% comment %}Check to see if sidebar should be enabled{% endcomment %}
{% if section.blocks.size > 0 %}
  {% assign sidebar = true %}
{% else %}
  {% assign sidebar = false %}
{% endif %}


<div class="sixteen columns">
  <div class="section clearfix">
    <h1>{{ page.title }}</h1>
    <div class="feature_divider"></div>
  </div>
</div>

{% if sidebar %}
  {% include 'sidebar' %}
  <div class="twelve columns page">
{% else %}
  <div class="sixteen columns page">
{% endif %}
  <div class="section clearfix">
    {{ page.content }}
  </div>
</div> 

Is the grid system issue related to the additional clearfix? 

0 Likes
Shopify Partner
25 0 5

Hi Clint,

Instead of <div class="clearfix"></div> kindly try to wrap your section content to new div with a class "container". So, your code can be like this:

{% comment %}
** Sidebar page - custom view **
- Page template
- Uses blocks
{% endcomment %}

<a name="pagecontent" id="pagecontent"></a>

{% comment %}Check to see if sidebar should be enabled{% endcomment %}
{% if section.blocks.size > 0 %}
  {% assign sidebar = true %}
{% else %}
  {% assign sidebar = false %}
{% endif %}

<div class="container">
  <div class="sixteen columns">
    <div class="section clearfix">
      <h1>{{ page.title }}</h1>
      <div class="feature_divider"></div>
    </div>
  </div>

  {% if sidebar %}
    {% include 'sidebar' %}
    <div class="twelve columns page">
  {% else %}
    <div class="sixteen columns page">
  {% endif %}
    <div class="section clearfix">
      {{ page.content }}
    </div>
  </div> 
</div>

 

0 Likes
Shopify Partner
6 0 0

Ahh, you're wonderful Sasha. Thank you :D It's working now.

0 Likes
Highlighted
New Member
1 0 0

Hello Sasha! It seems you know what you 're doing so I thought I'd ask a quick question. I'm a developer (front end) and designer building a store for a client. The store is mostly shipped products, but there are also 3 'products' in the form of 3 different kinds of tours through their factory. So I found an app in the Shopify app store that turns renting time into a product so that it literally shows up in the product list. So that is done.

 

But the problem is I don't need the buttons: quantity, add to cart and buy it now (see image below). All I need for the 3 tour products is a 'schedule' button. There are two way of adding that .. 1) in the template page called 'product-form.liquid' and 2) in the individual product pages themselves in the description section (by toggling the button to HTML editing).

 

In #1 the 'schedule' button will show up on ALL product pages, which is what I don't want. But I did try to work around that and try to create some conditional JavaScript that removes the classes of the unwanted buttons on the 3 tour product pages (but keeps the buttons on all other product pages), but I don't know how to write that kind of conditional JavaScript.

 

So my first question is do you know how to write conditional JavaScript that targets just three product pages, to remove the quantity, add to cart and buy it now buttons? If I had that I could manually add the 'schedule' button in the HTML section of the description section on the product pages.

 

The problem with conditional JavaScript is that I believe it has to access the entire DOM of the page the content is on, not just part of the page .. meaning I don't think I can implement JavaScript in the HTML section of the description section of the product pages (unless it can access the entire DOM from there). I think the JavaScript has to be written into the liquid parent page product-form.liquid in order to successfully conditionally remove classes.

 

Are you with me? Ha .. hope this makes sense! If you need links I can send them.

 

One other thought .. this thread I'm replying in .. he said he was able to duplicate liquid pages. THAT would be great .. then I could take a single duplicated page and strip it down to only the one button I need for the tour pages and I'd be good to go. But I called Shopify tech support and they told me that's not possible .. that I can only duplicate an entire theme. Has to be a way though .. this is Shopify!

 

Attached is a screenshot of the buttons on a product page I'm referring to. This particular page is a tour page .. so I'd need conditional JavaScript to remove the top three buttons and just keep the bottom 'schedule' button (which was coded into the HTML section of the description section of that product page.)

 

Kind regards,
Marcus

 

Screen Shot 2019-08-24 at 2.41.10 AM.png

0 Likes