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

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

Adjust Main and Thumbnail Product Images in the Product Page for Dawn Theme

Dawn Theme issues with large images? Solve that using this video tutorial

Product Slider for Dawn Theme - No apps or subscript- Just a little bit of code

Add a product slider for Dawn theme, almost like Debut theme slider. No app or subscription neede...

Tab Component Section - Pure CSS

Add a tab component as a section which means, you can add it to any pages in Shopify 2.0, like pr...

Add WhatsApp to Shopify for Free - No App or Subscription

Add WhatsApp to your Shopify website without app or subscription. Personalize the icon with your ...

Product / Card Automatic Swipeable Carousel / Slider for Most of Shopify Theme

Add a carousel / slider for your product or card without an app or external library. This work in...

Awesome slideshow for most of Shopify Themes - Work well with Dawn

Awesome slideshow with 11 unique designs to choose from. No app or subscription needed. No coding...

Adding a Gallery Section for Shopify Website

Add your images as a gallery using grid. This should work in most of the shopify theme.

Update your Product Page to Shopify 2.0 - Just like Dawn

Not ready for Dawn Theme but would like to update your Debut theme's product page just like Dawn?...

1 comment

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

Nicky Bonin

Leave a comment