Shopify themes, liquid, logos, and UX
Hey, everytime I create a new Product Page, this top section clones.
I can remove the bottom section, but then the Cart Icon goes away also.
So how can I remove this top part (I cant make it invisible or delete it there).
URL: https://jovenclothing.de/password
PASSWORD: leagep
I dont understand what you mean. I dont even have a header.liquid
Ok, what to do here?
is there any other way I can share the code with you?
can I copy and paste it here
article-header.liquid:
<h1
class="article-title"
style="color:{{ section.settings.article_title_txt_color }}; text-align:{{ section.settings.article_title_alignment }}"
>
{{ article.title }}
</h1>
{% if section.settings.show_divider %}
<div class="article-divider" style="background-color:{{ section.settings.article_divider_color }}"></div>
{% endif %}
<div class="article-metadata-container" style="flex-direction:{{ section.settings.article_metadata_alignment }}">
{% if section.settings.show_author %}
<p style="color:{{ section.settings.article_author_txt_color }};">By: {{ article.author }}</p>
{% endif %}
{% if section.settings.show_create_date %}
<P style="color:{{ section.settings.article_date_txt_color }};">
{{- article.created_at | date: format: 'abbreviated_date' -}}
</P>
{% endif %}
{% if section.settings.show_next_btn %}
{% if blog.previous_article.url == null %}
{% assign firstArticleArray = blog.articles | limit: 1 %}
{% assign url = firstArticleArray[0].url %}
{% else %}
{% assign url = blog.previous_article.url %}
{% endif %}
<a style="text-decoration:none; color:black;" href="{{ url }}">
<p
class="article-next-button"
style="{% if settings.disable_highlight_animation %} animation-duration: 0s; {% endif %} --article-next-btn-hover-txt-color: {{ section.settings.article_next_highlight_txt_color }}; --article-next-btn-hover-bg-color:{{ section.settings.article_next_highlight_color }}; --article-next-txt-color:{{ section.settings.article_next_txt_color }};"
>
next article >
</p>
</a>
{% endif %}
</div>
{% schema %}
{
"name": "Header",
"tag": "div",
"settings": [
{
"type": "header",
"content": "Alignment"
},
{
"type": "radio",
"id": "article_title_alignment",
"label": "Article Title Alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Centered"
}
],
"default": "center"
},
{
"type": "header",
"content": "Colors"
},
{
"type": "color",
"id": "article_title_txt_color",
"label": "Article Title Text Color",
"default": "#000000"
},
{
"type": "color",
"id": "article_divider_color",
"label": "Article Divider Text Color",
"default": "#000000"
},
{
"type": "color",
"id": "article_author_txt_color",
"label": "Article Author Color",
"default": "#000000"
},
{
"type": "color",
"id": "article_date_txt_color",
"label": "Article Date Color",
"default": "#000000"
},
{
"type": "color",
"id": "article_next_txt_color",
"label": "Next Article Color",
"default": "#000000"
},
{
"type": "color",
"id": "article_next_highlight_color",
"label": "Next Article Hover Color",
"default": "#FE0000"
},
{
"type": "color",
"id": "article_next_highlight_txt_color",
"label": "Next Article Hover Text Color",
"default": "#FFF"
},
{
"type": "checkbox",
"id": "show_divider",
"label": "Show Article Divider",
"default": true
},
{
"type": "checkbox",
"id": "show_next_btn",
"label": "Show \"Next Article\" Link",
"default": true
},
{
"type": "checkbox",
"id": "show_create_date",
"label": "Show Article Date",
"default": true
},
{
"type": "checkbox",
"id": "show_author",
"label": "Show Article Author",
"default": true
},
{
"type": "header",
"content": "Metadata"
},
{
"type": "paragraph",
"content": "Note: On mobile, metadata alignment is vertical only"
},
{
"type": "radio",
"id": "article_metadata_alignment",
"label": "Article Metadata Alignment",
"options": [
{
"value": "row",
"label": "Horizontal"
},
{
"value": "column",
"label": "Vertical"
}
],
"default": "row"
}
]
}
{% endschema %}
lookbook-container.liquid:
<div class="column-7 w-col w-col-3 w-col-stack" style="justify-content: flex-end;">
<div class="logo-container lookbook-page">
<a style="margin-top: 0;" href="{{ routes.root_url }}" class="logo-link w-inline-block">
{% if section.settings.lookbook_logo %}
<img src="{{ section.settings.lookbook_logo | image_url }}" style="margin-top: 0; width:{{ section.settings.lookbook_logo_size }}px;" alt="" class="logo">
{% else %}
<img style="margin-top: 0;" src="{{ 'Supreme-dummy.png' | asset_url }}" loading="lazy" alt="" class="logo">
{% endif %}
</a>
{% if section.settings.show_date_time %}
<div class="date-time-container">
<div class="date" style="color: {{ section.settings.date_color }}">{{ 'tn7d8e379f' | t }}</div>
<div class="time" style="color: {{ section.settings.time_color }}">{{ 't589b2285' | t }}</div>
</div>
{% endif %}
</div>
</div>
<div class="column-6 w-col w-col-7 w-col-stack" style="display: flex; flex-direction: column; justify-content: flex-end;">
<h1 style="margin-top: 0; color: {{ section.settings.title_color }}" class="heading-4">{{ section.settings.lookbook_title }}</h1>
<div style="color: {{ section.settings.description_color }}" class="text-block-18">{{ section.settings.lookbook_description | newline_to_br }}</div>
</div>
<div class="column-5 w-col w-col-2 w-col-stack" style="align-items: flex-end;">
<div class="div-block-7">
{% if section.settings.shop_now_link %}
<a href="{{ section.settings.shop_now_link }}" class="btn small shop-now w-button" style="margin-top: 0; height: 40px; text-transform: none; color:{{ section.settings.shop_now_text_color }}; background-color: {{ section.settings.shop_now_button_color }};">{{ section.settings.shop_now_link_text }}</a>
{% else %}
<a href="{{ routes.all_products_collection_url}}" class="btn small shop-now w-button" style="margin-top: 0; height: 40px; text-transform: none; color:{{ section.settings.shop_now_text_color }}; background-color: {{ section.settings.shop_now_button_color }};">{{ section.settings.shop_now_link_text }}</a>
{% endif %}
<a href="{{ routes.root_url }}" class="btn small w-button" style="margin-top: 0; height: 40px; text-transform: none; color:{{ section.settings.back_home_text_color }}; background-color: {{ section.settings.back_home_button_color }};">{{ 'tnc0d2788' | t }}</a>
</div>
</div>
<div class="lookbook-details-container mobile w-row">
<div class="w-col w-col-6 w-col-stack">
<h1 class="heading-4">{{ 'tn437bd530' | t }}</h1>
<div class="text-block-9">{{ 't502cc34d' | t }}</div>
</div>
<div class="w-col w-col-6 w-col-stack">
<div class="btn-container mobile">
<a style="text-transform: none; background-color: {{ section.settings.shop_now_button_color }}; color:{{ section.settings.shop_now_text_color }} href="{{ section.settings.shop_now_link }}" class="btn small shop-now w-button">{{ 'tn10d26d54' | t }}</a>
<a style="text-transform: none; background-color: {{ section.settings.back_home_button_color }}; color:{{ section.settings.back_home_text_color }}" href="{{ routes.root_url }}" class="btn small w-button">{{ 'tnc0d2788' | t }}</a>
</div>
</div>
</div>
<script>var currentSection = document.currentScript.closest('.shopify-section');currentSection.setAttribute("class","lookbook-details-container desktop w-row");</script>
{% schema %}
{
"name": "Lookbook Header",
"tag": "div",
"class": "lookbook-details-container desktop w-row",
"settings": [
{
"type": "image_picker",
"id": "lookbook_logo",
"label": "Lookbook Logo"
},
{
"type": "range",
"id": "lookbook_logo_size",
"label": "Lookbook Logo Size",
"min": 50,
"max": 172,
"unit": "px",
"step": 2,
"default": 120
},
{
"type": "text",
"id": "lookbook_title",
"label": "Lookbook Title",
"default": "Lookbook Title"
},
{
"type": "color",
"id": "title_color",
"label": "Title Color",
"default": "#000000"
},
{
"type": "textarea",
"id": "lookbook_description",
"label": "Lookbook Description",
"default": "Write a description of your collection here"
},
{
"type": "color",
"id": "description_color",
"label": "Description Color",
"default": "#000000"
},
{
"type": "header",
"content": "Button Settings"
},
{
"type": "paragraph",
"content": "By default, the Shop Now button will take customers to all items. Set a specific collection here if needed."
},
{
"type": "url",
"id": "shop_now_link",
"label": "Shop Now Link"
},
{
"type": "text",
"id": "shop_now_link_text",
"label": "Shop Now Link Text",
"default": "Shop Now"
},
{
"type": "color",
"id": "shop_now_button_color",
"label": "Shop Now BG Color",
"default": "#F71500"
},
{
"type": "color",
"id": "shop_now_text_color",
"label": "Shop Now Text Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "back_home_button_color",
"label": "Back Home BG Color",
"default": "#000000"
},
{
"type": "color",
"id": "back_home_text_color",
"label": "Back Home Text Color",
"default": "#ffffff"
},
{
"type": "checkbox",
"id": "show_date_time",
"label": "Show Date/Time",
"default": true
},
{
"type": "color",
"id": "date_color",
"label": "Date Color",
"default": "#000000"
},
{
"type": "color",
"id": "time_color",
"label": "Time Color",
"default": "#000000"
}
]
}
{% endschema %}
product.zipper-black.liquid:
/*
* ------------------------------------------------------------
* IMPORTANT: The contents of this file are auto-generated.
*
* This file may be updated by the Shopify admin theme editor
* or related systems. Please exercise caution as any changes
* made to this file may be overwritten.
* ------------------------------------------------------------
*/
{
"sections": {
"announcement": {
"type": "announcement-bar",
"settings": {
}
},
"background": {
"type": "product-page-background",
"settings": {
"show_background_image": true,
"show_background_image_mobile": true,
"video_url": "",
"show_background_video": false,
"bg_color": "#ffffff",
"bg_color_mobile": "#ffffff",
"overlay_top_color": "#000000",
"overlay_top_opacity": 0,
"overlay_bottom_color": "#000000",
"overlay_bottom_opacity": 0,
"overlay_top_color_mobile": "#000000",
"overlay_top_opacity_mobile": 0.9,
"overlay_bottom_color_mobile": "#000000",
"overlay_bottom_opacity_mobile": 0.9
}
},
"header": {
"type": "product-logo-section",
"settings": {
"cart_text_color": "#000000",
"cart_number_color": "#ffffff",
"cart_number_bg_color": "#000000",
"show_date_time": true,
"index_date_color": "#000000",
"index_time_color": "#000000"
}
},
"f24fee3c-963f-499e-a65c-378b790abca9": {
"type": "product-section-2",
"blocks": {
"template--20852784955674__f24fee3c-963f-499e-a65c-378b790abca9-on_sale_label-1": {
"type": "on_sale_label",
"settings": {
"on_sale_bg_color": "#fe0000",
"on_sale_text_color": "#ffffff",
"on_sale_label_margin": 0,
"on_sale_label_margin_mobile": 8
}
},
"template--20852784955674__f24fee3c-963f-499e-a65c-378b790abca9-product_header-1": {
"type": "product_header",
"settings": {
"product_title": "#000000",
"product_header_margin": 3,
"product_header_margin_mobile": 0
}
},
"template--20852784955674__f24fee3c-963f-499e-a65c-378b790abca9-product_description-1": {
"type": "product_description",
"settings": {
"product_description": "#000000",
"description_margin": 0,
"description_margin_mobile": 4
}
},
"template--20852784955674__f24fee3c-963f-499e-a65c-378b790abca9-product_gallery-1": {
"type": "product_gallery",
"settings": {
}
},
"template--20852784955674__f24fee3c-963f-499e-a65c-378b790abca9-product_price-1": {
"type": "product_price",
"settings": {
"product_price": "#000000",
"price_font_size": 18,
"currency_format": "without_currency",
"product_was_text": "#000000",
"product_before_price": "#ff0000",
"sales_price_font_size": 16,
"price_margin": 20,
"price_margin_mobile": 20
}
},
"template--20852784955674__f24fee3c-963f-499e-a65c-378b790abca9-product_variations-1": {
"type": "product_variations",
"settings": {
"add_to_cart_bg": "#000000",
"add_to_cart_text": "#ffffff",
"keep_shopping_bg": "#ffffff",
"keep_shopping_text": "#000000",
"next_item_text_color": "#000000",
"next_item_highlight_color": "#000000",
"next_item_highlight_txt_color": "#ffffff",
"out_of_stock_bg": "#fe0000",
"out_of_stock_text": "#ffffff",
"variation_margin": 1,
"variation_margin_mobile": 7
}
},
"template--20852784955674__f24fee3c-963f-499e-a65c-378b790abca9-product_accordion-1": {
"type": "product_accordion",
"settings": {
"accordion_title": "Details",
"accordion_color": "#ffffff",
"accordion_title_color": "#000000",
"accordion_drop_title_color": "#000000",
"accordion_drop_content_color": "#000000",
"accordion_arrow_color": "#000000",
"accordion_description": "<p>-460gsm</p><p>-80% cotton, 20% polyester</p><p>-boxy, oversized fit</p><p>-chenille embroidery</p><p>-custom zip-up</p>",
"accordion_page": "",
"accordion_margin": 20,
"accordion_margin_mobile": 15
}
},
"product_accordion_RWhPeh": {
"type": "product_accordion",
"settings": {
"accordion_title": "Size Chart",
"accordion_color": "#ffffff",
"accordion_title_color": "#000000",
"accordion_drop_title_color": "#000000",
"accordion_drop_content_color": "#000000",
"accordion_arrow_color": "#000000",
"accordion_description": "",
"accordion_page": "size-chart-1",
"accordion_margin": 20,
"accordion_margin_mobile": 15
}
},
"product_accordion_7WUX9T": {
"type": "product_accordion",
"settings": {
"accordion_title": "Care Instructions",
"accordion_color": "#ffffff",
"accordion_title_color": "#000000",
"accordion_drop_title_color": "#000000",
"accordion_drop_content_color": "#000000",
"accordion_arrow_color": "#000000",
"accordion_description": "<p>-maschine wash at 30°</p><p>-wash inside out</p><p>-do not bleach</p><p>-iron with low heat</p>",
"accordion_page": "",
"accordion_margin": 20,
"accordion_margin_mobile": 15
}
},
"product_accordion_KR9kBd": {
"type": "product_accordion",
"settings": {
"accordion_title": "Shipping",
"accordion_color": "#ffffff",
"accordion_title_color": "#000000",
"accordion_drop_title_color": "#000000",
"accordion_drop_content_color": "#000000",
"accordion_arrow_color": "#000000",
"accordion_description": "<p>GERMANY: 2-4 working days</p><p>EUROPE: 2-5 working days</p><p>WORLDWIDE: 4-10 working days</p>",
"accordion_page": "",
"accordion_margin": 20,
"accordion_margin_mobile": 15
}
}
},
"block_order": [
"template--20852784955674__f24fee3c-963f-499e-a65c-378b790abca9-on_sale_label-1",
"template--20852784955674__f24fee3c-963f-499e-a65c-378b790abca9-product_header-1",
"template--20852784955674__f24fee3c-963f-499e-a65c-378b790abca9-product_description-1",
"template--20852784955674__f24fee3c-963f-499e-a65c-378b790abca9-product_gallery-1",
"template--20852784955674__f24fee3c-963f-499e-a65c-378b790abca9-product_price-1",
"template--20852784955674__f24fee3c-963f-499e-a65c-378b790abca9-product_variations-1",
"template--20852784955674__f24fee3c-963f-499e-a65c-378b790abca9-product_accordion-1",
"product_accordion_RWhPeh",
"product_accordion_7WUX9T",
"product_accordion_KR9kBd"
],
"settings": {
"switch_productinfo_image": false,
"place_additional_photos_under_main": false,
"reverse_additional_photos_and_main": false,
"product_info_alignment": "left",
"magnifier_frame_color": "#000000",
"fade_duration": 1,
"gallery_column_amount": 3,
"gallery_desktop_image_size": 50,
"gallery_mobile_image_size": 40,
"gallery_margin": 26,
"gallery_margin_mobile": 15
}
},
"related_products": {
"type": "related-products",
"settings": {
"related_title_color": "#000000",
"related_title_size": 18,
"show-related-title": true,
"related_product_title_color": "#000000",
"related_product_title_hover_color": "#ffffff",
"related_product_title_highlight_color": "#fe0100",
"related_product_title_size": 18,
"show-related-product-title": true,
"related_product_price_color": "#000000",
"related_product_price_size": 12,
"show_related_price": true,
"related_currency_format": "without_currency"
}
},
"music": {
"type": "music-player",
"settings": {
}
}
},
"order": [
"announcement",
"background",
"header",
"f24fee3c-963f-499e-a65c-378b790abca9",
"related_products",
"music"
]
}
How do I give you this access?
now after I pasted your code, the default Product Page header is missing the logo and cart.
Normally it looks like this:
And I can´t press the Cart Button and also the announcement bar is too small:
I just need the Header of the new product page to look like the header of deafault product page.
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025