- Thread starter
- #31
JAJT
Legendary Contributor
FASTLANE INSIDER
EPIC CONTRIBUTOR
Read Fastlane!
Read Unscripted!
Summit Attendee
Speedway Pass
Thought I'd post this because it might help some of you who use Shopify in the future:
The share page I linked to in the first post (www.boneowl.com/pages/share) was a TOTAL PAIN to get working in Shopify.
Shopify is FANTASTIC when you use the tools they give you to make minor modifications to their themes but is TERRIBLE for doing anything "traditional" with.
For example - I had the html for my "easy share" page and it took me hours to figure out how to get it to talk to shopify. Hours. To get HTML onto a website. Just think about how stupid that sounds. Traditionally it would literally be as easy as uploading to ftp in 10 seconds. Shopify has NO OPTION to let you do this that I can tell. They don't even let you upload HTML files to their file section.
The page editor in shopify lets you view and edit the HTML for a page but it won't let you use all the normal tags and so trying to paste the html into the html section on the page editor just breaks the html in HORRIBLE ways with extra characters being added in as it tries to interpret what you gave it. horrible.
Here's the fix:
1. Get a third party page editor like Shogun. There are a bunch but this is the one I use.
2. Go into you "edit html/css" section on the theme you've chosen, create a new page template, name it whatever you want.
3. Delete the pre-populated crap in the template and replace it with this and save it:
4. Go to your pages section in shopify and create a new page. Select the page template you made, and then under "more actions" open the page in shogun.
5. Use the HTML drag-and-drop widget to put an HTML entry onto the page.
6. Past your HTML into the html section.
7. Save and publish the page.
If you have css/js files that need referencing (as I did), then:
8. Open up one of your other, normal pages, or home page, or whatever and view the source code.
9. Find reference to a css file like "styles.css" somewhere in the code, like this: "//cdn.shopify.com/s/files/1/1891/5565/t/5/assets/styles.css"
10. Copy the path up until "styles.css" - this is your assets path for your store (is this stupid yet?)
11. Upload your css/js files to the assets section of your shopify store.
12. Go back into your HTML through shogun as before and replace all the paths pointing to css and js files to the path you copied from step 9, and just throw the file name of your css/js file at the end to make one complete file path.
Now it should work.
If it doesn't, check to make sure shogun didn't accidentally select a different page template along the way to one of your default ones that apply a ton of themes settings to every page.
Thank goodness Shopify didn't give us some easy way to do this. Think of all the problem solving we'd miss out on.
The share page I linked to in the first post (www.boneowl.com/pages/share) was a TOTAL PAIN to get working in Shopify.
Shopify is FANTASTIC when you use the tools they give you to make minor modifications to their themes but is TERRIBLE for doing anything "traditional" with.
For example - I had the html for my "easy share" page and it took me hours to figure out how to get it to talk to shopify. Hours. To get HTML onto a website. Just think about how stupid that sounds. Traditionally it would literally be as easy as uploading to ftp in 10 seconds. Shopify has NO OPTION to let you do this that I can tell. They don't even let you upload HTML files to their file section.
The page editor in shopify lets you view and edit the HTML for a page but it won't let you use all the normal tags and so trying to paste the html into the html section on the page editor just breaks the html in HORRIBLE ways with extra characters being added in as it tries to interpret what you gave it. horrible.
Here's the fix:
1. Get a third party page editor like Shogun. There are a bunch but this is the one I use.
2. Go into you "edit html/css" section on the theme you've chosen, create a new page template, name it whatever you want.
3. Delete the pre-populated crap in the template and replace it with this and save it:
<style>
nav { display:none; }
header { display:none; }
footer { display:none; }
</style>
{% layout none %}
{{ page.content }}
4. Go to your pages section in shopify and create a new page. Select the page template you made, and then under "more actions" open the page in shogun.
5. Use the HTML drag-and-drop widget to put an HTML entry onto the page.
6. Past your HTML into the html section.
7. Save and publish the page.
If you have css/js files that need referencing (as I did), then:
8. Open up one of your other, normal pages, or home page, or whatever and view the source code.
9. Find reference to a css file like "styles.css" somewhere in the code, like this: "//cdn.shopify.com/s/files/1/1891/5565/t/5/assets/styles.css"
10. Copy the path up until "styles.css" - this is your assets path for your store (is this stupid yet?)
11. Upload your css/js files to the assets section of your shopify store.
12. Go back into your HTML through shogun as before and replace all the paths pointing to css and js files to the path you copied from step 9, and just throw the file name of your css/js file at the end to make one complete file path.
Now it should work.
If it doesn't, check to make sure shogun didn't accidentally select a different page template along the way to one of your default ones that apply a ton of themes settings to every page.
Thank goodness Shopify didn't give us some easy way to do this. Think of all the problem solving we'd miss out on.
Dislike ads? Remove them and support the forum:
Subscribe to Fastlane Insiders.