Hi folks,
So the customiser preview is fine to check and update sections around the site etc. but it’s not great at rendering pages with complex JavaScript front-end stuff going on. This is often compounded by inexperienced developers not listening for section change emitters etc. and reinitialising libraries like Flickity etc. Merchants also cannot share preview links to PDPs for example with others unless the theme is published and the template created in the customiser is assigned to the product.
This is starting to pose issues for me and my collegues as it’s very difficult to share previews of unpublished themes without making “dummy” templates in the live theme to trick Shopify into thinking the preview theme has templates assigned to the actual products. Very hacky and imposes a silly amount of overhead.
Am I missing something here? With the development of OS2.0 which seems to have taken years of internal wrangling and pontification before delivering a pretty solid solution to sections everywhere, I’m at a loss as to why the previewing of themes effectively in the browser outside of the customiser frame appears to have just not been considered.
My question to the community (and Shopify if they actually read any of these posts) is how do you get around this problem?
thanks!
1 Like
… tumbleweeds …
So, I spoke to a very knowledgable front-end developer who just happens to know Shopify inside-out and she gave me this excellent solution:
https://www.shopify.com/partners/blog/shopify-alternate-templates
Specifically, this part:
Switch templates via the URL
Finally, there’s one other option for template selection that you have at your disposal. That is being able to select a particular template using the view querystring.
This will allow you to view a product or page on an alternative template by adding the templates name to the URL of the page. The format we would use here is ?view=alternative_template_name and this would be added to the end of the page URL.
Here’s an example for you to review (NB: these links are for demo purposes only):
https://partner-demo-alt-templates.myshopify.com/products/led-high-tops?view=special
In this instance, Shopify will load a product template called: product.special.liquid.
If the requested template doesn’t exist, Shopify will fail gracefully and use the default template, or the template specified in the admin. A really common use case for this technique is switching between a list and grid view within a product collection.
This works really well with preview links too so something like this:
https://1a2b3c4d5e6f7g8h9i-123456789.shopifypreview.com/product/my-fancy-product?view=my-alt-template
will load the unassigned template from the preview theme. Hope this helps anyone out there with the same issue I had (which doesn’t seem to be too many by the dearth of responses to my original post!)
4 Likes