How to fix a theme section after changing it?

Store Design
1

Hello,

I need help with making this section (of the 1st picture) similar to the 2nd picture. I changed the theme and that section got messed up

Here is the link to my store: https://wowberrybites.com/collections/berrybitesbundles

Pass: berrybites

1st picture

winnado11_2-1652485899831.png
winnado11_2-1652485899831.png3509×1355 170 KB

2nd picture

winnado11_1-1652485442041.png
winnado11_1-1652485442041.png3805×1450 616 KB

Thank you,

Winna

2

Hi @winnado11 ,

You need to change the code for it, please send me the code of main-collection-banner.liquid file, I will change it for you

1 Like
3

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{{ ‘component-collection-hero.css’ | asset_url | stylesheet_tag }}

{%- style -%}
@media screen and (max-width: 749px) {
.collection-hero–with-image .collection-hero__inner {
padding-bottom: calc({{ settings.media_shadow_vertical_offset | at_least: 0 }}px + 2rem);
}
}
{%- endstyle -%}

{{ 'sections.collection_template.title' | t }}: {{- collection.title | escape -}}

{%- if section.settings.show_collection_description -%}

{{ collection.description }}
{%- endif -%}

{%- if section.settings.show_collection_image and collection.image -%}

{{ collection.title | escape }}
{%- endif -%}

{% schema %}
{
“name”: “t:sections.main-collection-banner.name”,
“class”: “section”,
“settings”: [
{
“type”: “paragraph”,
“content”: “t:sections.main-collection-banner.settings.paragraph.content”
},
{
“type”: “checkbox”,
“id”: “show_collection_description”,
“default”: true,
“label”: “t:sections.main-collection-banner.settings.show_collection_description.label”
},
{
“type”: “checkbox”,
“id”: “show_collection_image”,
“default”: false,
“label”: “t:sections.main-collection-banner.settings.show_collection_image.label”,
“info”: “t:sections.main-collection-banner.settings.show_collection_image.info”
},
{
“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”
}
]
}
{% endschema %}

4

Hello @winnado11

I need help with making this section (of the 1st picture) similar to the 2nd picture. I changed the theme and that section got messed up

If you made a theme duplicate, or exported a theme backup before making changes try to use that one instead to see if the issue is only in the current theme.

If not you can also try to rollback some files that may be related to any changes causing the issue.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code#roll-back-to-an-older-version-of-your-theme

If you need debugging services contact me at paull.newton+shopifyforums@gmail.com please provide context: store url, theme name, and project/issue description

5

Hi @winnado11 ,

Please change code:

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{{ 'component-collection-hero.css' | asset_url | stylesheet_tag }}

{%- style -%}
@media screen and (max-width: 749px) {
.collection-hero--with-image .collection-hero__inner {
padding-bottom: calc({{ settings.media_shadow_vertical_offset | at_least: 0 }}px + 2rem);
}
}
{%- endstyle -%}

# 
{{ 'sections.collection_template.title' | t }}: 
{{- collection.title | escape -}}

  

{%- if section.settings.show_collection_image and collection.image -%}

{%- endif -%}

{%- if section.settings.show_collection_description -%}

{{ collection.description }}

{%- endif -%}

{% schema %}
{
"name": "t:sections.main-collection-banner.name",
"class": "section",
"settings": [
{
"type": "paragraph",
"content": "t:sections.main-collection-banner.settings.paragraph.content"
},
{
"type": "checkbox",
"id": "show_collection_description",
"default": true,
"label": "t:sections.main-collection-banner.settings.show_collection_description.label"
},
{
"type": "checkbox",
"id": "show_collection_image",
"default": false,
"label": "t:sections.main-collection-banner.settings.show_collection_image.label",
"info": "t:sections.main-collection-banner.settings.show_collection_image.info"
},
{
"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"
}
]
}
{% endschema %}

Hope it helps!

1 Like
6

@LitCommerce Thanks so much. However, the collection description is not in the center of the page. Do you how to make it center, and change the font size and font color of the body text? Thank you!1

winnado11_0-1652684789947.png
winnado11_0-1652684789947.png3627×1192 553 KB

7

Hi @winnado11 ,

Go to Assets > component-collection-hero.css and paste this at the bottom of the file:

.collection-hero__description {
	padding: 30px 0;
    max-width: 100%;
    text-align: center;
}

.collection-hero__description *{
	text-align: center !important;
}

If you want to change the color or font size, you can add the code in ‘.collection-hero__description *’

Hope it helps!

1 Like
8

Awesome. Thank you so much!

1 Like