Hi, could somebody tell me how to make this https://8thwndr.com type of homepage?
Hi @Domas3 ,
This is David at SalesHunterThemes.
Thank you for your question.
You can try to follow these steps:
Go to Online Store â Themes â Actions â Edit code.
Go Assets folder â base.css file or style.css file.
Add this following code at the bottom of page.
/* Homepage with full width photo */
.image-with-text-overlay .image-with-text-overlay__banner {
height: 100% !important;
width: 100% !important;
}
.image-element__wrap[style*=".png"] {
height: 100% !important;
width: 100% !important;
}
.img.transition--color.is-hidden-mobile-only.lazyautosizes.ls-is-cached.lazyloaded {
height: 100% !important;
width: 100% !important;
}
/* change menu to top */
.navbar.dropdown-click--false.is-align-center.is-justify-space-between.vertical-alignment-center.one-whole.column {
top: 0 !important;
transform: translateX(-50%) !important;
}
Hopefully, this proves useful.
David | SalesHunterThemes team
Hi, it shows no changes when I paste the code. Are there more things I should do like adding a different section to my home page or something else?
Hi @Domas3 ,
This is David at SalesHunterThemes.
You can try to follow these steps:
Go to Online Store â Themes â Actions â Edit code.
Go Assets folder â theme.liquid file.
Add this following code at the bottom of page.
I have tried customizing your website using the âinspect elementâ browser feature. You can refer to https://www.loom.com/share/7067a9afbd7048eeaef2d99c2b279465
Hi, David thank you for the help, but still, when I post this code and preview the page I see no changes..
Hi @Domas3 ,
Im so sorry to hear about that it doesnât work from your end. Can you kindly let me know how you add that code please? Im afraid of maybe it has some mistake on processâŚ
I Go to Online Store â Themes â Actions â Edit code.
Then to Assets folder â theme.liquid file.
Add the code at the bottom of the page. Then save and press preview. And then I see no changes.
Hi @Domas3
Can you share which theme, that you are using for your store, and
Please share your store URL, page URL and also password (if your store has one) so we can help you.
Hi, @David_SHT Iâm using Dawn theme. store: https://dynastyclothing.shop/ and password: skisto
Hi @Domas3 ,
This is David at SalesHunterThemes.
You can try to follow these steps:
Go to Online Store â Themes â Actions â Edit code.
Then add new section in folder template and paste this code into, so you can make the layout as you want
{%- if settings.logo != blank -%}
{%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
{%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
{% capture sizes %}(max-width: {{ settings.logo_width | times: 2 }}px) 50vw, {{ settings.logo_width }}px{% endcapture %}
{% capture widths %}
{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %}
{{ settings.logo | image_url: width: 600 | image_tag:
class: 'header__heading-logo motion-reduce',
widths: widths,
height: logo_height,
width: settings.logo_width,
alt: logo_alt,
sizes: sizes,
preload: true }}
{%- else -%}
{{ shop.name }}
{%- endif -%}
{%- for link in section.settings.menu.links -%}
- {{- link.title | escape -}}
{%- endfor -%}
{% schema %}
{
"name": "Section fullscreen",
"settings": [
{
"type": "link_list",
"id": "menu",
"label": "Menu",
"default": "main-menu"
}, {
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "background-1"
}, {
"type": "image_picker",
"id": "background_image",
"label": "Background image"
}
],
"presets": [
{
"name": "Section fullscreen"
}
]
}
{% endschema %}
Hi, It writes this when I create a new template>page>liqui
Liquid syntax error (line 68): Unexpected outer âelseâ tag
Hi @Domas3
Sorry, My mistake
You need create a new section in folder section and paste this code into
After that you can open theme customize then add section: âSection fullscreenâ to use
{%- if settings.logo != blank -%}
{%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
{%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
{% capture sizes %}(max-width: {{ settings.logo_width | times: 2 }}px) 50vw, {{ settings.logo_width }}px{% endcapture %}
{% capture widths %}
{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %}
{{ settings.logo | image_url: width: 600 | image_tag:
class: 'header__heading-logo motion-reduce',
widths: widths,
height: logo_height,
width: settings.logo_width,
alt: logo_alt,
sizes: sizes,
preload: true }}
{%- else -%}
{{ shop.name }}
{%- endif -%}
{%- for link in section.settings.menu.links -%}
- {{- link.title | escape -}}
{%- endfor -%}
{% schema %}
{
"name": "Section fullscreen",
"settings": [
{
"type": "link_list",
"id": "menu",
"label": "Menu",
"default": "main-menu"
}, {
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "background-1"
}, {
"type": "image_picker",
"id": "background_image",
"label": "Background image"
}
],
"presets": [
{
"name": "Section fullscreen"
}
]
}
{% endschema %}
Hi, @David_SHT I LOVE YOU! Thank you a lot! could you help me more? I change the cart logo and it changes on the computer but doesnât show at all on the phone.. Where the problem could be?
Hi @Domas3
Youâre welcome. Iâm so glad that it can be your solution
Regarding to the logo problem, Iâm still not clear about that.
Can you share more detail about it?
So, I get the svg code for my logo, I paste it into icon-cart and icon-cart-empty then save that. I go on the website with the computer it shows the logo then I check on my phone and there is no logo, just like a blank place.
Hi @Domas3
Sorry, Iâm still not clear about your problem.