Create a Landing Page that has no header or footer with several options of sections to use, not blocks, that can be customize and rearrange. The homepage replacement will have a changeable sections.
Note: The alternate page will show some code when customizing but disregard. It should disappear once you click save.
Shopify does not allow a nested section or having a section inside a section. The code is merely replacing the existing section. Warnings should be gone once section is SAVE, it means replacement is successful.
1. Home > Online Store > Themes > (Choose the theme to edit) > Actions > Edit code
2. Go to Section folder and create a new section, call it custom-section. Paste the code below, then click SAVE
<div class="page-width"> {{ page.content }} {% if section.settings.section_select == "featured-collection"%} %%featured-collection%% {% endif %} {% if section.settings.section_select == "slideshow"%} %%slideshow%% {% endif %} {% if section.settings.section_select == "collection-list"%} %%collection-list%% {% endif %} {% if section.settings.section_select == "custom-content"%} %%custom-content%% {% endif %} {% if section.settings.section_select == "featured-product"%} %%featured-product%% {% endif %} </div> {% schema %} { "name": { "en": "Custom Section" }, "class": "index-section", "settings": [ { "type": "text", "id": "title", "label": { "en": "Heading" }, "default": { "en": "Custom Section" } }, { "type": "select", "id": "section_select", "label": { "en": "Select Section" }, "default": "featured-collection", "info": { "en": "Please select the section here and click SAVE. Then go back to 'Custom Section' then customized section." }, "options": [ { "label": { "en": "Featured Collection" }, "value": "featured-collection" }, { "label": { "en": "Slideshow" }, "value": "slideshow" }, { "label": { "en": "Custom Content" }, "value": "custom-content" }, { "label": { "en": "Featured Product" }, "value": "featured-product" }, { "label": { "en": "Collection List" }, "value": "collection-list" } ] } ] } {% endschema %} |
3. Go to Template folder, click "add a new template"
Create a new template for = page
Template type = liquid
File name = alternate-home
4. Replace the code with the code below.
{% capture featured-collection %}{% section 'collection' %}{% endcapture %} {% capture slideshow %}{% section 'slideshow' %}{% endcapture %} {% capture collection-list %}{% section 'collection-list' %}{% endcapture %} {% capture custom-content %}{% section 'custom-content' %}{% endcapture %} {% capture featured-product %}{% section 'featured-product' %}{% endcapture %} {% assign featured-collection = featured-collection |replace: 'data-shopify-editor-section', '' %} {% assign slideshow = slideshow | replace: 'data-shopify-editor-section', '' %} {% assign collection-list = collection-list | replace: 'data-shopify-editor-section', '' %} {% assign custom-content = custom-content | replace: 'data-shopify-editor-section', '' %} {% assign featured-product = featured-product | replace: 'data-shopify-editor-section', '' %} {% capture custom-section %} {% section 'custom-section' %} {% endcapture %} {% assign custom-section = custom-section | replace: "%%featured-collection%%", featured-collection %} {% assign custom-section = custom-section | replace: "%%slideshow%%", slideshow %} {% assign custom-section = custom-section | replace: "%%collection-list%%", collection-list%} {% assign custom-section = custom-section | replace: "%%custom-content%%", custom-content %} {% assign custom-section = custom-section | replace: "%%featured-product%%", featured-product %} {{custom-section}} |
5. Go to Layout folder and add a new layout > Create a layout from = theme, and call it "alternate-home". It should appear as theme.alternate-home.liquid
6. Go to Layout folder and click theme.liquid
7. Delete the {% section 'header' %} and {% section 'footer' %}
8. Go to Template folder and add the code below at the very top to all templates in the folder, except index.liquid, password.liquid, search.lquid
| {% layout 'theme.alternate-home' %} |
9. Publish your theme before proceeding. (You will not see the page template as an option if theme is not published)
10. Go to your Online store > Pages > Add page > Name it as Alternate Home, then change the theme template as a alternate-home
10. Go to your Online store > Navigation > Main menu > next to home, click edit. Change the link to Pages > alternate-home
11. Customized your theme.
Thank you (",)
2 comments
Hi, this doesn’t seem to work for Dawn theme anymore, do you have any update by any chance?
How do I get rid of the /landing/pages as the home page url?