A user is trying to create separate landing pages for four different service offerings that currently all redirect to the same collection page. The initial setup used a collection list section on the homepage, causing all services to share identical content and design.
Solution implemented:
Technical fixes provided:
icon-caret.liquid snippet file to resolve mobile carousel errorCurrent status:
The user successfully created multiple pages with different templates. The final step involves updating the navigation menu to redirect the “service” header links to the new multicolumn section by changing the section ID reference from the old collection list to the new multicolumn section ID.
Hi,
I have 4 different types of services, but each one of them show the same page.
How can I separate each one of them to show a different page?
right now all the services redirect to the same page, so each change apply on all the services.
I want different page for different services.
all get me to the same page:
https://wmqgez-r2.myshopify.com/
Warm regards.
Hey, it sounds like all your services are using the same page or template, which is why changes affect all of them right. To separate them, you can create individual pages for each service by going to Online Store > Pages and adding a new page for each one. After that, update your menu under Navigation to link each service to its unique page. If you want more control over how each page looks, using a page builder to design custom layouts for each service. This setup usually works well, but it might depend on your theme’s structure too, hope this works
Hi @Artez
I see your 4 services redirect to 4 collections page but it has the same design, you should edit the content for each of them
or I think you should replace the Collection list section at home page to use Multicolumn section
then on Admin → Sale Channels → Online Stores → Pages , you create each page of them here
after that, you can define the content for each services as you want.
Btw, I can support you style for Multiplecolumn section look like your current list service on the homepage.
I hope this help.
Thanks
Hi, I listened to that option, i recreated it as multicolumn row,
I created pages for each one of them and linked them.
But somehow i can’t click on each page and access to it.
Can you please help me with that?
Warm regards
Oh It seems required us to fill the Link label to display the link for that button. Not for entire the column
Do you really want to link for entirely column?
Something is quiet off, I set pages for each one of them, yet no one redirect to the exact page set.
Yes because it required to fill the Link label . I will support you fix this by edit code. let follow step by step below:
When code editor opened, set replace the code with this:
{{ 'section-multicolumn.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{%- liquid
assign columns_mobile_int = section.settings.columns_mobile | plus: 0
assign show_mobile_slider = false
if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int
assign show_mobile_slider = true
endif
-%}
{%- unless section.settings.title == blank -%}
##
{{ section.settings.title }}
{%- if section.settings.button_label != blank and show_mobile_slider -%}
{{- section.settings.button_label | escape -}}
{%- endif -%}
{%- endunless -%}
{%- if section.settings.button_label != blank -%}
{{ section.settings.button_label | escape }}
{%- endif -%}
{% schema %}
{
"name": "t:sections.multicolumn.name",
"class": "section",
"tag": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "inline_richtext",
"id": "title",
"default": "Multicolumn",
"label": "t:sections.multicolumn.settings.title.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "select",
"id": "image_width",
"options": [
{
"value": "third",
"label": "t:sections.multicolumn.settings.image_width.options__1.label"
},
{
"value": "half",
"label": "t:sections.multicolumn.settings.image_width.options__2.label"
},
{
"value": "full",
"label": "t:sections.multicolumn.settings.image_width.options__3.label"
}
],
"default": "full",
"label": "t:sections.multicolumn.settings.image_width.label"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.multicolumn.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.multicolumn.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.multicolumn.settings.image_ratio.options__3.label"
},
{
"value": "circle",
"label": "t:sections.multicolumn.settings.image_ratio.options__4.label"
}
],
"default": "adapt",
"label": "t:sections.multicolumn.settings.image_ratio.label"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 6,
"step": 1,
"default": 3,
"label": "t:sections.multicolumn.settings.columns_desktop.label"
},
{
"type": "select",
"id": "column_alignment",
"options": [
{
"value": "left",
"label": "t:sections.multicolumn.settings.column_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.multicolumn.settings.column_alignment.options__2.label"
}
],
"default": "left",
"label": "t:sections.multicolumn.settings.column_alignment.label"
},
{
"type": "select",
"id": "background_style",
"options": [
{
"value": "none",
"label": "t:sections.multicolumn.settings.background_style.options__1.label"
},
{
"value": "primary",
"label": "t:sections.multicolumn.settings.background_style.options__2.label"
}
],
"default": "primary",
"label": "t:sections.multicolumn.settings.background_style.label"
},
{
"type": "text",
"id": "button_label",
"default": "Button label",
"label": "t:sections.multicolumn.settings.button_label.label"
},
{
"type": "url",
"id": "button_link",
"label": "t:sections.multicolumn.settings.button_link.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "background-1"
},
{
"type": "header",
"content": "t:sections.multicolumn.settings.header_mobile.content"
},
{
"type": "select",
"id": "columns_mobile",
"options": [
{
"value": "1",
"label": "t:sections.multicolumn.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.multicolumn.settings.columns_mobile.options__2.label"
}
],
"default": "1",
"label": "t:sections.multicolumn.settings.columns_mobile.label"
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.multicolumn.settings.swipe_on_mobile.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"blocks": [
{
"type": "column",
"name": "t:sections.multicolumn.blocks.column.name",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.multicolumn.blocks.column.settings.image.label"
},
{
"type": "inline_richtext",
"id": "title",
"default": "Column",
"label": "t:sections.multicolumn.blocks.column.settings.title.label"
},
{
"type": "richtext",
"id": "text",
"default": "
Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.
",
"label": "t:sections.multicolumn.blocks.column.settings.text.label"
},
{
"type": "text",
"id": "link_label",
"label": "t:sections.multicolumn.blocks.column.settings.link_label.label"
},
{
"type": "url",
"id": "link",
"label": "t:sections.multicolumn.blocks.column.settings.link.label"
}
]
}
],
"presets": [
{
"name": "t:sections.multicolumn.presets.name",
"blocks": [
{
"type": "column"
},
{
"type": "column"
},
{
"type": "column"
}
]
}
]
}
{% endschema %}
Click save then go back to storefront and see the result
Thank you for the huge effort dear, now each page is different by title, but somehow the template is the same in the four pages.
this columns are supposed to be only in the fashion design page, and somehow it appear in every four pages, any changement on the template affect the four pages even if the title of the page is different, is there any way to have four totaly separated pages so i can design each one separatly?
warm regards dear.
Yes you can create each page have a template by yourself here
After that, go back to your page and select each page corresponding with each template.
You can easier design each template on Theme Cusomization
By the way I have a small error on mobile bellow the carrousel.
https://wmqgez-r2.myshopify.com/
Warm regards.
The icon-caret.liquid seems not exist in file sections/multicolumn.liquid line 157
Let open code editor, go to snippets at the left side click create new file with name: icon-caret
paste the content of that file:
Incon-caret Done, thank you dear friend. will check about the pages after lunch. Warm regards.
That’s cool. Let me know if you need any assistance. I will support 
I tried to create multiple page and to link them but unfortunately when one is linked it update all the rest of the pages 
Wait, I succeeded!!!
it is from the pages setting
but now we have to redirect the “service” header to that one lol.
how do we redirect it dear friend? @BiDeal-Discount
Yes because services section was replaced so the id was changed.
Let replace the id of menu & the js code I suggested you on other topic from #shopify-section-template–18541339115701__collection_list_TJVYQQ to: shopify-section-template–18541339115701__multicolumn_3UaXzU
