I can programmatically add it to my page homepage by adding {% section 'header-text' %}, but I want to add it through the "add section" GUI. I looked similar questions and I have {{ content_for_index }} in my index.liquid and {% schema %} and {% endschema %}
Here is my code theme.liquid
<!DOCTYPE html>
<html>
<head>
<title>{{ page_title }}</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="{{ page_description | escape }}" />
<link rel="canonical" href="{{ canonical_url }}" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,shrink-to-fit=no"
/>
{{ content_for_header }}
<!-- Header hook for plugins -->
{{
"application.scss" | asset_url | stylesheet_tag
}}
</head>
<body>
<header class="container-fluid">
<nav class="nav-holder">
<h1>Dreamy Cream</h1>
<div class="nav__button" id="burger">{% include 'icon-navicon' %}</div>
<div class="nav-links" id="menu">
<ul class="nav-items">
{% for link in linklists.main-menu.links %} {% assign
child_list_handle = link.title | handleize %}
<li>
{{ link.title }}
</li>
{% endfor %}
</ul>
{% include 'icon-cart' %}
</div>
</nav>
{% section 'header-text' %}
</header>
<main role="main">
{{ content_for_layout }}
</main>
{{ "application.js" | asset_url | script_tag }}
</body>
</html>
header-text.liquid
<div class="nav__title main" id="{{section.settings.id}}">
<h1>{{section.settings.title}}</h1>
</div>
{% schema %}
{
"name": "opening text",
"class": "opeaning-text-section",
"settings": [
{
"id": "title",
"type": "text",
"label": "Section Title ",
"default": "Taste the intensity"
}
] ,
"presets": [
{
"name": "Title Text",
"category":"Store information"
}
]
}
{% endschema %}
So, I needed a section that was programmed in the theme.liquid {% section 'header-text' %}
I found the solution https://github.com/Shopify/themekit/issues/842
Related
thank you for taking the time to answer my question.
I have been trying to make the recommended products section instead of being displayed as a grid to be displayed in the form of a carousel, this is what I have tried:
<link rel="stylesheet" href="{{ 'component-card.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-price.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'section-product-recommendations.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'owl.carousel.min.css' | asset_url }}" media="print">
<noscript>{{ 'component-card.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-price.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'section-product-recommendations.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'owl.carousel.min.css' | asset_url | stylesheet_tag }}</noscript>
<script src="{{ 'jquery.min.js' | asset_url }}"></script>
<script src="{{ 'owl.carousel.min.js' | asset_url }}"></script>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
responsiveClass:true,0
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:5,
nav:true,
loop:false
}
}
});
});
</script>
{%- 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 -%}
<div class="color-{{ section.settings.color_scheme }} gradient no-js-hidden">
<product-recommendations class="product-recommendations page-width section-{{ section.id }}-padding isolate" data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit={{ section.settings.products_to_show }}">
{% if recommendations.performed and recommendations.products_count > 0 %}
<h2 class="product-recommendations__heading {{ section.settings.heading_size }}">{{ section.settings.heading | escape }}</h2>
<ul class="owl-carousel">
{% for recommendation in recommendations.products %}
<li>
{% render 'card-product',
card_product: recommendation,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating
%}
</li>
{% endfor %}
</ul>
{% endif %}
</product-recommendations>
</div>
If there is a simpler way to do it, it would also help me, I am avoiding incorporating third-party apps to maintain the speed and efficiency of my website
I have a slideshow on my homepage on my shopify website. I have been given a task to add a class on each slide of the slideshow for google tag manager tracking on the anchor tag inside the "swiper-slide" div. I want to add the class based on the number of slides available. For example, for the first slide I want to add the class of "banner1", for 2nd slide "banner2" and so on. I tried the following:
<a href="{{ block.settings.button_link}}" class="full-width-link banner{{forloop.index}}" ></a>
but I end up having just "banner1" for all the slides.
<!-- Slider main container -->
<div class="main-swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
{%- for block in section.blocks -%}
{% assign banner_index = forloop.index %}
<!-- Slides -->
<div class="swiper-slide">
<a href="{{ block.settings.button_link}}" class="full-width-link " ></a>
<!--<img src="{{ block.settings.image | img_url: 'master'}}" class="img-responsive banner-img small--hide">
<img src="{{ block.settings.mobimage | img_url: 'master' }}" class="img-responsive banner-img medium-up--hide">-->
<picture>
<source media="(min-width:750px)" srcset="{{ block.settings.image | img_url: '1600x'}}" alt="" width="100%" height="100%" class="img-responsive banner-img lazyload" >
<img data-src="{{ block.settings.mobimage | img_url: '400x' }}" alt="" width="100%" height="100%" class="img-responsive banner-img lazyload">
</picture>
{% comment %}
<div class="sticky--shop-box">
<div class="slider--content setu-flex setu-direction-column height_100p">
<p>{{ block.settings.subheading}}</p>
<h1>{{ block.settings.slide_title}}</h1>
{% if block.settings.button_label != blank %}
<div class="hide shop-button--wrapper">
{{ block.settings.button_label}}
</div>
{% endif %}
</div>
</div>
{% endcomment %}
</div>
{%- endfor -%}
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
This works for me
{%- for block in section.blocks -%}
<div class="swiper-slide-{{ forloop.index }}">
</div>
{%- endfor -%}
I have an error message in my Shopify store on the cart page. HTML error found Broken HTML has been detected in your theme's sections/main-cart-footer.liquid(opens a new window)file. Check that there are no missing or extra HTML tags present. See code below, can anyone help me address the errors and how to fix them.
{{ 'component-cart.css' | asset_url | stylesheet_tag }}
{{ 'component-totals.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-discounts.css' | asset_url | stylesheet_tag }}
<div class="page-width{% if cart == empty %} is-empty{% endif %}" id="main-cart-footer" data-id="{{ section.id }}">
<div>
<div class="cart__footer">
{%- if section.settings.show_cart_note -%}
<cart-note class="cart__note field">
<label for="Cart-note">{{ 'sections.cart.note' | t }}</label>
<textarea class="text-area text-area--resize-vertical field__input" name="note" form="cart" id="Cart-note" placeholder="{{ 'sections.cart.note' | t }}">{{ cart.note }}</textarea>
</cart-note>
{%- endif -%}
<div class="cart__blocks">
{% for block in section.blocks %}
{%- case block.type -%}
{%- when '#app' -%}
{% render block %}
{%- when 'subtotal' -%}
<div class="js-contents" {{ block.shopify_attributes }}>
<div class="totals">
<div>
<h3 class="totals__subtotal">{{ 'sections.cart.subtotal' | t }}</h3>
<p class="totals__subtotal-value"><span class="csapps-cart-original-total">{{ cart.total_price | money_with_currency }}</span></p>
</div>
<div data-tbnadhide='NO_DISCOUNT' style='display:none;'>
<h3 class="totals__subtotal">Discount</h3>
<p class="totals__subtotal-value"><span class="csapps-cart-original-total">-<span data-tbnadfield='CART_DISCOUNT'></span></span></p>
</div>
<div data-tbnadhide='NO_DISCOUNT' style='display:none;'>
<h3 class="totals__subtotal">Total</h3>
<p class="totals__subtotal-value"><span class="csapps-cart-original-total"><span data-tbnadfield='CART_TOTAL' class='ymq_cart_total_price'></span></span></p>
</div>
<div>
{%- if cart.cart_level_discount_applications.size > 0 -%}
<ul class="discounts list-unstyled" role="list" aria-label="{{ 'customer.order.discount' | t }}">
{%- for discount in cart.cart_level_discount_applications -%}
<li class="discounts__discount discounts__discount--end">
{%- render 'icon-discount' -%}
{{ discount.title }}
(-{{ discount.total_allocated_amount | money }})
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</div>
<small class="tax-note caption-large rte">
{%- if cart.taxes_included and shop.shipping_policy.body != blank -%}
{{ 'sections.cart.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- elsif cart.taxes_included -%}
{{ 'sections.cart.taxes_included_but_shipping_at_checkout' | t }}
{%- elsif shop.shipping_policy.body != blank -%}
{{ 'sections.cart.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
{%- else -%}
{{ 'sections.cart.taxes_and_shipping_at_checkout' | t }}
{%- endif -%}
</small>
</div>
{%- else -%}
<div class="cart__ctas" {{ block.shopify_attributes }}>
<noscript>
<button type="submit" class="cart__update-button button button--secondary" form="cart">
{{ 'sections.cart.update' | t }}
</button>
</noscript>
<button type="submit" id="checkout" class="cart__checkout-button button" name="checkout"{% if cart == empty %} disabled{% endif %} form="cart">
{{ 'sections.cart.checkout' | t }}
</button>
</div>
{%- if additional_checkout_buttons -%}
<div class="cart__dynamic-checkout-buttons additional-checkout-buttons">
{{ content_for_additional_checkout_buttons }}
</div>
{%- endif -%}
{%- endcase -%}
{% endfor %}
<div id="cart-errors"></div>
</div>
</div>
</div>
</div>
{% javascript %}
class CartNote extends HTMLElement {
constructor() {
super();
this.addEventListener('change', debounce((event) => {
const body = JSON.stringify({ note: event.target.value });
fetch(`${routes.cart_update_url}`, {...fetchConfig(), ...{ body }});
}, 300))
}
}
customElements.define('cart-note', CartNote);
{% endjavascript %}
<script>
document.addEventListener('DOMContentLoaded', function() {
function isIE() {
const ua = window.navigator.userAgent;
const msie = ua.indexOf('MSIE ');
const trident = ua.indexOf('Trident/');
return (msie > 0 || trident > 0);
}
if (!isIE()) return;
const cartSubmitInput = document.createElement('input');
cartSubmitInput.setAttribute('name', 'checkout');
cartSubmitInput.setAttribute('type', 'hidden');
document.querySelector('#cart').appendChild(cartSubmitInput);
document.querySelector('#checkout').addEventListener('click', function(event) {
document.querySelector('#cart').submit();
});
});
</script>
{% schema %}
{
"name": "t:sections.main-cart-footer.name",
"class": "cart__footer-wrapper",
"settings": [
{
"type": "checkbox",
"id": "show_cart_note",
"default": false,
"label": "t:sections.main-cart-footer.settings.show_cart_note.label"
}
],
"blocks": [
{
"type": "subtotal",
"name": "t:sections.main-cart-footer.blocks.subtotal.name",
"limit": 1
},
{
"type": "buttons",
"name": "t:sections.main-cart-footer.blocks.buttons.name",
"limit": 1
},
{
"type": "#app"
}
]
}
{% endschema %}
{% comment %}<!-- ymq option done -->{% endcomment %}
<script id="docapp-shipping-speedup" defer="defer">
(() => { if (!document.documentElement.innerHTML.includes('\\/shop' + '\\/js' + '\\/cart-shipping-calculator-pro.min.js') || window.cartShippingCalculatorProAppLoaded) return; let script = document.createElement('script'); script.src = "https://d1an1e2qw504lz.cloudfront.net/shop/js/cart-shipping-calculator-pro.min.js?shop=texaslonestartamales.myshopify.com"; document.getElementById('docapp-shipping-speedup').after(script); })();
</script>
<script id="docapp-shipping-speedup">
(() => { if (!document.documentElement.innerHTML.includes('\\/shop' + '\\/js' + '\\/cart-shipping-calculator-pro.min.js') || window.cartShippingCalculatorProAppLoaded) return; let script = document.createElement('script'); script.src = "https://d1an1e2qw504lz.cloudfront.net/shop/js/cart-shipping-calculator-pro.min.js?shop=texaslonestartamales.myshopify.com"; document.getElementById('docapp-shipping-speedup').after(script); })();
</script>
Here's the error message populating my page, with the accompanying code issue: TemplateSyntaxError at /home Invalid block tag: 'endblock', expected 'endif' Request Method: GET Request URL: http://localhost:8000/home Django Version: 4.1 Exception Type:
Code error
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
{% block head %} {% endblock %}
</head>
<body>
<nav class="navbar {% if not request.user.is_authenticated %} navbar-expand-lg {% endif %} navbar-light bg-warning">
<a class="navbar-brand" href="/">Txapita</a>
{% if not request.user.is_authenticated %}
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item {% request.GET.next != '/cliente/' %}active{% endif %}">
<a class="nav-link" arial-current="page" href="/sign-in/?next=/cliente/">Cliente</a>
</li>
<li class="nav-item {% request.GET.next == '/transportador/' %}active{% endif %}">
<a class="nav-link" arial-current="page" href="/sign-in/?next=/transportador/">Transportador</a>
</li>
</ul>
</div>
{% else %}
<form class="form-inline">
<span class="mr-4">{{ request.user.get_full_name|title }}</span>
Sair
</form>
{% endif %}
</nav>
{% block content %} {% endblock %}
<footer class="text-center mt-5 mb-5">
© txapita.co.mz
</footer>
</body>
</html>
I'm currently working on a Shopify theme, I have a list of all products, I've filtered them to only show anything with the following tag 'Neoprene' - how do I not limit the tagged product to only show 4?
Any help would be grateful!
<main class="wrapper">
<div class="grid">
<div class="grid__item">
<div class="large--one-whole">
{% for product in collections.all.products limit: 9999 %}
{% if product.tags contains 'Neoprene' %}
<div class="landing-product grid__item large--one-quarter medium--one-quarter small--one-half">
<a href="{{ product.url }}" class="img">
{% for image in product.images %}
<span class="grid-link__image-centered">
<img src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
</span>
{% endfor %}
</a>
<a href="{{ product.url }}" class="title">
{{ product.title }}
</a>
<a href="{{ product.url }}" class="price">
{{ product.price | money }}
</a>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</main>
<main class="wrapper">
<div class="grid">
<div class="grid__item">
<div class="large--one-whole">
{% assign a = 0 %}
{% for product in collections.all.products limit: 9999 %}
{% if a == 4 %}
{% break %}
{% else %}
{% if product.tags contains 'Neoprene' %}
{% assign a = a | plus : 1 %}
<div class="landing-product grid__item large--one-quarter medium--one-quarter small--one-half">
<a href="{{ product.url }}" class="img">
{% for image in product.images %}
<span class="grid-link__image-centered">
<img src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
</span>
{% endfor %}
</a>
<a href="{{ product.url }}" class="title">
{{ product.title }}
</a>
<a href="{{ product.url }}" class="price">
{{ product.price | money }}
</a>
</div>
{% endif %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
</main>