Customizable Landing Page with a Changeable Section - NO App or Subscription

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 (",)

1 comentário

How do I get rid of the /landing/pages as the home page url?

Nicky Bonin

Deixe um comentário