How can I make a full-width section without the classic page title?

[Einars]

Hello,

We are trying to add a page as a section, but unfortunately, we also need to remove the classic Shopify page title and make this page full-width. Could someone please assist us? Below is an image and the “page.liquid” code, in case that’s the right now…

https://swish.eu/products/gb50-basketbola-grozs

password: swi

{{ ‘component-rte.css’ | asset_url | stylesheet_tag }}
{{ ‘section-main-page.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 -%}

{%- if section.settings.page.title != blank -%} {{ section.settings.page.title | escape }} {%- else -%} {{ 'sections.page.title' | t }} {%- endif -%}

{%- if section.settings.page.content != blank -%} {{ section.settings.page.content }} {%- else -%}

{{ 'page' | placeholder_svg_tag: 'page-placeholder' }}

{%- endif -%}

{% schema %}
{
“name”: “t:sections.page.name”,
“tag”: “section”,
“class”: “section”,
“settings”: [
{
“type”: “page”,
“id”: “page”,
“label”: “t:sections.page.settings.page.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”: “color_scheme”,
“options”: [
{
“value”: “accent-1”,
“label”: “t:sections.all.colors.accent_1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.all.colors.accent_2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.all.colors.background_1.label”
},
{
“value”: “background-2”,
“label”: “t:sections.all.colors.background_2.label”
},
{
“value”: “inverse”,
“label”: “t:sections.all.colors.inverse.label”
}
],
“default”: “background-1”,
“label”: “t:sections.all.colors.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
}
],
“presets”: [
{
“name”: “t:sections.page.presets.name”
}
]
}
{% endschema %}

Have a great day!

[PageFly-Victor]

Hi @Einars

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

You can replace code

Hope my solution works perfectly for you!

Best Regards;

PageFly

[KetanKumar]

@Einars

where is this used this section

[Einars]

Hi @PageFly-Victor ,

Thank you very much for your effort! It works for pc, but unfortunately, there is still a margin for mobile devices. Like in a screenshot below. Any ideas to make it full-wide?

[Einars]

Hi @KetanKumar ,

I want to add this section to a few product pages.

[PageFly-Victor]

you can add CSS at the bottom of file base.css

@media(max-width:767px){

#s-1052d86d-de4d-49c5-a35a-8a993eb489f6{height:450px !important}

}

you can change different 450px by 500px or 600px

[Einars]

Hey @PageFly-Victor ,

Thank you very much!

May I kindly ask if this will change anything else than Page formatting? We would like to impact only the section for added pages. Hope it makes sense.

EDIT: sorry, we just noticed that your new code doesn’t remove the side margin as you can still see the white lines on the sides of this section.

[PageFly-Victor]

you are welcome, do you need any more help?

[Cedcommerce]

Hello @Einars ,

To get this fixed you need to add the below-provided code to your theme.liquid file:

1. Go to your Shopify admin > Sales channel > Online store
2. Select your theme > Click on action > Edit code
3. Open theme.liquid in layout folder
4. Paste the code below, just before the in the theme.liquid file
5. Save the changes

Code:-

{% if template.name == “product” %}

.page-width{ max-width: 100% !important; } .page-title{ display: none; }

{% endif %}

Result:-

image.png

Note: You are advised to follow the above instructions only if you have knowledge of liquid code or else you can hire a Shopify expert agency like us who can fix this for you.

Hope it helps, if you have any doubts please connect with us.

Al the best,

CedCommerce