Shopping Cart
Log in | Create account

How to set up cool, feature rich Pages in Shopify

Posted by Oliver Schönbett on

We have been working a lot with Shopify and set up countless shops, and we really love the platform. The one thing that is bothering us though is the page editor and the limitation that it (still) brings when designing your Webstore.

This post is about our lessons learned and subsequent workarounds that we are using to enable beautiful shopify pages - and this will help you brining some flexibility to your setup, but you have to keep in mind that shopify is a e-commerce platform and it’s not intending to replace a „normal“ CMS. If your page requires complex content structures, you might think about using Wordpress as your base system and integrate shopify(https://www.shopify.com/blog/113145925-introducing-shopify-for-wordpress)

For many merchants out there eCommerce will be the center of their attention, and Shopify probably needs to be the single CMS to use.

 

In order to enable a more complex page design, here are some tricks that we have used in the past.

 

Merge several pages into one

If you want to set up a page that includes different logical parts and requires dynamic content from other sources than the page text, you will quickly run into limitations. The content of a page is rendered into a shopify page with one single statement:

 

{% include page.content%}

 

With this approach it is not possible to split the content and add additional features to a page, e.g. galleries, forms or similar items, because we can’t render any liquid here.

What can be done however is use several page contents and render them together into one page:

 

{% include pages['page1'].content%}

//add some liquid in-between

{% include pages['page2'].content%}

//add some liquid in-between

{% include pages['page3'].content%}

 

We used this approach very extensively on www.goldenmoontea.com/pages/tea-club, where we needed to enable tabbed areas for two clubs, we needed to reuse a snippet from the start page (maintain the info only once) and additionally included buy buttons.

 

This approach has several advantages:
  • Merchants can use the simple editor to make changes in the texts. For many clients that is considerably easier than changing items in the assets e.g.
  • Content can contain images and html-tags, what is not possible using metafields

 

So this is our suggestion of how to enhance the editor, we’d love to hear what ways of working you figured out!

 


Older Post Newer Post