How can i add sections to a regular page?

Highlighted
Excursionist
18 0 34

I'm not a coder, so i cannot help myself with the text-editor or alternate templates. If i would be a coder, i would not use shopify but code my own stuff. I wonder why shopify doesn't hear to the needs of their clients, cause there are a lot of people who think like i do.

Hey Pat, what you write, sounds interesting. I'm looking forward to see your examples.

 

5 Likes
Highlighted
Tourist
6 0 13

I couldn't agree with you more, I am new to shopify and the lack of customization is unbelievable. I paid 160 dollars for this premium theme with all these "features" just to find out I can only use them on the home page and everything else about the these is extremely cookie cutter. I cannot even change the font size. Anytime i contact shopify about an issue they tell me to buy an app that costs 10-50 dollars a month. It is complete garbage. Then i find out my theme i purchased is non refundable, what kinda crap is that. If I am not happy with the theme and it doesn't do the things its supposed to why should i not be able to return it. Instead of adding simple features shopify instead has these expensive 3rd party themes. It has been a terrible experience so far. Very dissapointed with the lack of customization. Not everyone wants their websites to look the same as 1000's of other people, 

7 Likes
Highlighted
Tourist
6 0 13

I don't suppose you have gotten anywhere with this? I have been endlessly researching how to add some of the features my home page has to my other pages without any luck. I'm not about to pay some "expert" hundreds of dollars for something that should easily be included in this 150 dollar theme i bought. 

3 Likes
Highlighted
Tourist
6 0 13

I couldn't agree with your more. 

2 Likes
Highlighted
Tourist
3 0 2

Well that sucks. Just bought the theme yesterday, set up the home page and boom! here I am. Refund please.

 

2 Likes
Shopify Staff
Shopify Staff
630 16 195

Hi all,

Thanks for all your comments- I totally understand that it would be ideal to have the dynamic sections which appear on the homepage, available on regular pages. Extending the functionality of sections to other areas of Shopify Themes is definitely something we’re looking into, but at the moment, only static sections can appear on regular pages.

As you've seen, static sections can’t be dragged and dropped, or be added from the Theme Editor. It is possible though, with some custom coding, to turn a dynamic section into a static section and include this into a regular page. This will give you the ability to take a dynamic homepage section like a featured product section, and add it to a regular page.

This solution does require working with code and Liquid files, and if this is something you would not be comfortable with, I would advise you to reach out to one of our Experts, or Hey Carson for support. As always, when making code changes to your theme, please remember to create a backup, in case you need to revert back to previous versions of the theme. This workaround will be best for stores which would not have a wide range of different types of sections on a lot of different pages, as this situation could require a creating a cumbersome amount of alternative template files.

1: The first step is to identify which section you would like to have on a specific page. For this example, I will be working on the Debut theme, and looking to add a featured product section to a regular page. I only want this featured product to appear on one specific page, so I am going to create an alternative template file for this page, called page.featured-product.liquid, where I will include the featured product section. Our help docs describe how to create template files if you need detailed info here.

2: Next, I’m going to find the featured product section in my theme’s sections folder and copy all the code for this section. I will create a new section within the same folder, called featured-product-on-page.liquid, paste the code and hit save.

3: Right now, this new section still a dynamic section, so I will need to change it to a static section. To do this I will need to remove the presets from the section. You can find the presets within the schema array which is at the bottom of the section.

When presets are contained within a theme’s schema tags, the Theme recogizes that the section is a dynamic section, and so it becomes an available option on the homepage.

Once I have removed the presets from the section, the schema array looks like this:

{% schema %}
  {
    "name": "Featured product",
    "class": "index-section index-section--featured-product",
    "settings": [
      {
        "type": "product",
        "id": "featured_product",
        "label": "Product"
      },
      {
        "type": "select",
        "id": "image_size",
        "label": "Image size",
        "options": [
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          },
          {
            "value": "full",
            "label": "Extra large"
          }
        ],
        "default": "medium"
      },
      {
        "type": "checkbox",
        "id": "show_quantity_selector",
        "label": "Show quantity selector",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_variant_labels",
        "label": "Show variant labels",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_vendor",
        "label": "Show vendor",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "enable_zoom",
        "label": "Enable image zoom",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_share_buttons",
        "label": "Show social sharing buttons",
        "default": true
      }
    ]
  }
{% endschema %}

4. This featured product section, is now a static section, but it is not connected to any page of my store, so we will need to include this section where we want it to appear. In my case, I want this to appear on a page, but more specifically, the page template I created in step 1, called page.featured-product.liquid.

Sections can be included into template files using the section Liquid tag. For my recently created section, I will be using {% section 'featured-product-on-page' %}. I would like the featured product to appear below the text on my page, so the page.featured-product.liquid template file would look like this:

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>

      <div class="rte">
        {{ page.content }}
      </div>
      
      {% section 'featured-product-on-page' %}
      
    </div>
  </div>
</div>

5. Finally, to apply this template to a page on my store I will need to go back to the main admin, and navigate to the page I want this featured product to appear on, and switch the page’s template from page to page.featured-product.

6. Now, when I am on the theme editor, and on the page I would like to edit, I will see options for adding a featured product. This video demonstrates how this would look. 

You can see this working model on my test store, using the password “sections”. These are a lot of steps, so please let me know if you get stuck on any of these. I hope this helps :)

Liam

Liam Griffin
Shopify | Developer Community Manager
6 Likes
Highlighted
New Member
3 0 0

I initially experienced a lot of your fraustratrations but made 2 good moves that have  really aided me in my devlopement, i went with template monster and purchased a them and paid 99 dollars for6 months premium support it doesnt cover everything i would like but it does really help,  secondly PAGEFLY IS A KILLER APP it really has helped me understand a lot, there is a learing curve dont expect to pick it up and have it figuired in a day play with it for a week totally get to know it,. since making these ammendments i have found out all sorts of stuff, you can design a gradient back ground image in power point and load it up as a global page setting, when using your page editor  set the background to transparent so that your design sits  properly on the pattern, we managed to sync up product calcultors for sq/m for our products page,  using other apps, we design our own slides again using the gradient power point back ground our logo and the relative info and used these as dropdown adverts, i have been working a this hard for 5  months almost and just got there although i have to say we went to town and have also suffered some unforseen set backs not relevent to shopify, now i beleive im in the position that if someone sent me all the  information and had all the social media ect and images i could set up a good site in a matter of 2-3 weeks, dont lose faith in this but like anything thats going to be rewarding there is going to a learning curve,,, in what world do we live into expect spending 200 dollars is going to make us all millionairs,  if you want this be prepared to invest you time and want to learn, dont be beleiving all these bs mentor videos about giving you 20 k in the first week, life just aint so,,, old school rules if it sounds to good to b true its because it is too good to be true

 

0 Likes
Highlighted
New Member
1 0 0

Liam, this is really helpful info! I added slideshow functionality, BUT when I try to add an image I get the following javascript error:

index-7281ca22754462eeb257569031c5b2ac3b4113bfc2b27488ad13423cf2748396.js:30 Uncaught TypeError: Cannot read property 'image' of undefined
    at t.value (index-7281ca22754462eeb257569031c5b2ac3b4113bfc2b27488ad13423cf2748396.js:30)
    at t.action (index-7281ca22754462eeb257569031c5b2ac3b4113bfc2b27488ad13423cf2748396.js:28)
    at n.t.action (index-7281ca22754462eeb257569031c5b2ac3b4113bfc2b27488ad13423cf2748396.js:28)
    at HTMLButtonElement.eval (eval at U (index-7281ca22754462eeb257569031c5b2ac3b4113bfc2b27488ad13423cf2748396.js:4), <anonymous>:3:25)
    at HTMLButtonElement.a (index-7281ca22754462eeb257569031c5b2ac3b4113bfc2b27488ad13423cf2748396.js:4)
    at HTMLButtonElement.dispatch (admin_jquery-1f0f820501c3b7fcb70379d8fa17d2fcfdb3722abc2a5eeedac0f05bfef7705c.js:2)
    at HTMLButtonElement.m.handle (admin_jquery-1f0f820501c3b7fcb70379d8fa17d2fcfdb3722abc2a5eeedac0f05bfef7705c.js:2)
    at HTMLButtonElement.e.bugsnag (index-7281ca22754462eeb257569031c5b2ac3b4113bfc2b27488ad13423cf2748396.js:22)

 

Any thoughts?

0 Likes
Highlighted
New Member
1 0 9

Just throwing my $0.02 in here....

I'm a developer and can work around this using the methods described above. That being said, It's pretty difficult to explain to our marketing folks why they can only customize the home page in this fashion. As far as they can tell, there's no distinction between the home page and others. When they try to edit other pages, they say things like "Shopify's editor is broken! It won't let me add any sections to this page. Can you help?".

Why force your users to transition between an awesome user experience (the home page editor), and a decidedly lame one (every other page editor), with zero explanation or additional information?

As far as I can tell, there isn't a technical reason for this. What gives? Can we pay more to have access to those features on every page? If we can't, then we'll probably ditch Shopify and go with something else.

 

 

 

 

 

9 Likes
Highlighted
New Member
2 0 0

Thank you, Liam! Your tutorial was easy to follow and did the trick for me. I'll be looking forward to see sections as built in option for static pages.

0 Likes