Shopify themes, liquid, logos, and UX
Can someone give me a code that will allow me to have a second a announce bar that is under my slideshow and is constantly spinning no stopping. (I have added some other codes to my sections so It might not be compatible with each other. If you want to know what I have just ask). Example Picture below of what I want
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
It is not an issue. I just want to be able to have another announcement bar
My store is shoputech.com. I'm not finished designing my store I'm planning to rebuild my Home page.
yes please add
https://shopify.github.io/liquid-code-examples/example/announcement-bar
I've added it but how do I get it to auto rotate. I USE DEBUTIFY
Where do I put it so it's located under My slideshow. This is my theme.liquid file code
<!doctype html>
<html lang="{{ shop.locale }}">
<head>
<!-- Basic page needs -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="{{ settings.color_body_bg }}">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="author" content="Debutify">
<!-- Preconnect external resources -->
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
<link rel="preconnect" href="https://shop.app" crossorigin>
<link rel="preconnect" href="https://monorail-edge.shopifysvc.com">
{%- if content_for_layout contains "product-template" -%}
<link rel="preconnect" href="https://godog.shopifycloud.com">
{%- if settings.enable_payment_button -%}
<link rel="preconnect" href="https://pay.google.com" crossorigin>
<link rel="preconnect" href="https://play.google.com" crossorigin>
{%- endif -%}
{%- endif -%}
{%- if content_for_layout contains "featured-video" -%}
<link rel="preconnect" href="https://www.youtube.com">
{%- endif -%}
{%- if content_for_layout contains "map" -%}
<link rel="preconnect" href="https://maps.googleapis.com">
{%- endif -%}
{%- if request.page_type == "contact" or request.page_type == "product" or request.page_type == "captcha" -%}
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://www.gstatic.com">
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://www.recaptcha.net" crossorigin>
{%- endif -%}
{%- if content_for_header contains "debutify" -%}
<link rel="preconnect" href="https://debutify.com">
{%- if settings.dbtfy_automatic_geolocation -%}
<link rel="preconnect" href="https://api.teathemes.net" crossorigin>
{%- endif -%}
{%- if settings.dbtfy_instagram_feed -%}
<link rel="preconnect" href="https://graph.instagram.com/" crossorigin>
{%- endif -%}
{%- if settings.dbtfy_facebook_messenger -%}
<link rel="preconnect" href="https://www.facebook.com/" crossorigin>
<link rel="preconnect" href="https://www.facebook.com/">
{%- endif -%}
{%- endif -%}
{%- liquid
assign accent_family = settings.accent_family
assign base_family = settings.base_family
assign header_family = settings.header_family
assign base_family_bold = base_family | font_modify: "weight", "bolder"
assign base_family_italic = base_family | font_modify: "style", "italic"
assign base_family_bold_italic = base_family_bold | font_modify: "style", "italic"
assign accent_family_bold = accent_family | font_modify: "weight", "bolder"
assign icon_split = settings.icon | split: "-"
capture icon_family
for icon in icon_split
unless forloop.last == true
echo icon | capitalize | append: " "
else
echo icon | capitalize
endunless
endfor
endcapture
-%}
<!-- Preload assets -->
<link rel="preload" href="{{ "theme.scss.css" | asset_url }}" as="style">
<link rel="preload" as="font" href="{{ header_family | font_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" href="{{ accent_family | font_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" href="{{ base_family | font_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" href="{{ settings.icon | append: ".woff2" | asset_url }}" type="font/woff2" crossorigin>
<link rel="preload" href="{{ "jquery-2.2.3.min.js" | asset_url }}" as="script">
<link rel="preload" href="{{ "theme.min.js" | asset_url }}" as="script">
<link rel="preload" href="{{ "lazysizes.min.js" | asset_url }}" as="script">
{%- if content_for_header contains "debutify" -%}
<link rel="preload" href="{{ "dbtfy-addons.min.js" | asset_url }}" as="script">
{%- endif -%}
{%- if canonical_url != blank -%}
<link rel="canonical" href="{{ canonical_url }}">
{%- endif -%}
<!-- Fav icon -->
{%- assign favicon_url = settings.favicon | img_url: "192x192" -%}
{%- if settings.favicon == blank -%}
{%- assign favicon_url = "data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=" -%}
{%- endif -%}
<link sizes="192x192" rel="shortcut icon" type="image/png" id="favicon" href="{{ favicon_url }}">
<!-- Title and description -->
<title>
{{ page_title }}{% if current_tags %}{%- assign meta_tags = current_tags | join: ", " -%} – {{ "general.meta.tags" | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} – {{ "general.meta.page" | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %}
</title>
{%- if page_description -%}
<meta name="description" content="{{ page_description | escape }}">
{%- endif -%}
<!-- Social meta -->
{%- render "social-meta-tags" -%}
<!-- CSS -->
{{ "theme.scss.css" | asset_url | stylesheet_tag }}
<!-- Load fonts independently to prevent rendering blocks -->
<style>
{{ header_family | font_face: font_display: "swap" }}
{{ accent_family | font_face: font_display: "swap" }}
{{ base_family | font_face: font_display: "swap" }}
{{ base_family_bold | font_face: font_display: "swap" }}
{{ base_family_italic | font_face: font_display: "swap" }}
{{ base_family_bold_italic | font_face: font_display: "swap" }}
{{ accent_family_bold | font_face: font_display: "swap" }}
@font-face {
font-family: {{ icon_family }};
font-weight: 400;
font-style: normal;
font-display: block;
src: url({{ settings.icon | append: ".woff2" | asset_url }}) format("woff2");
}
</style>
<!-- Theme strings and settings -->
{%- render "translations-js" -%}
<!-- JS -->
{{ "jquery-2.2.3.min.js" | asset_url | script_tag }}
<script src="{{ 'theme.min.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>
{%- if content_for_header contains "debutify" -%}
{%- if settings.show_currency_selector -%}
{%- if settings.dbtfy_custom_currencies or shop.enabled_currencies.size > 1 and settings.dbtfy_cart_goal -%}
<script type="text/javascript" src="/services/javascripts/currencies.js" data-no-instant></script>
<script src="{{ 'jquery.currencies.min.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
{%- endif -%}
<script src="{{ 'dbtfy-addons.min.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
{%- if request.page_type contains "customers/" -%}
{{ "shopify_common.js" | shopify_asset_url | script_tag }}
{%- endif -%}
<!-- Header hook for plugins -->
{{ content_for_header }}
{% render 'review-head' %}
{% include 'buddha-megamenu' %}
{{ shop.metafields.loox["global_html_head"] }}
</head>
<body id="{{ page_title | handle }}"
class="{% if settings.sticky_header %}sticky-header{% endif %}
{% include 'dg-flash-infos' %}
{%- liquid
render "toasts"
render "drawer-cart"
render "drawer-search"
render "dbtfy-age-check"
render "dbtfy-cookie-box"
render "dbtfy-facebook-messenger"
render "dbtfy-newsletter-popup"
render "dbtfy-page-transition"
render "dbtfy-quick-view", type: "container"
render "dbtfy-sales-pop"
render "dbtfy-social-discount"
section "dbtfy-bullet-points"
section "dbtfy-cart-goal"
section "dbtfy-cart-upsell"
if request.page_type == "collection"
section "dbtfy-collection-filters"
endif
section "dbtfy-color-swatches"
section "dbtfy-customizable-products"
section "dbtfy-delivery-time"
section "dbtfy-product-swatches"
section "dbtfy-quantity-breaks"
section "dbtfy-sales-countdown"
section "dbtfy-size-chart"
section "dbtfy-upsell-popup"
section "drawer-menu"
-%}
<div id="PageContainer" class="page-container">
<a class="visually-hidden event-focus-box" href="#mainContent">{{ "shopify.checkout.general.skip_to_content" | t }}</a>
{%- liquid
section "announcement"
section "header"
render "dbtfy-menu-bar"
unless request.page_type == "collection"
render "breadcrumbs"
endunless
-%}
<main id="mainContent" class="main-content fadeIn" role="main">
{%- if request.page_type == "captcha" or request.page_type == "policy" -%}
<div class="box">
<div class="wrapper">
<div class="grid">
<div class="grid__item large--eight-twelfths push--large--two-twelfths">
{%- endif -%}
{%- if template == 'index' -%}
<div class="index-sections">
{%- endif -%}
{{ content_for_layout }}
{%- if template == 'index' -%}
</div>
{%- endif -%}
{%- if request.page_type == "captcha" or request.page_type == "policy" -%}
</div>
</div>
</div>
</div>
{%- endif -%}
</main>
{%- liquid
render "dbtfy-recently-viewed"
section "dbtfy-instagram-feed"
-%}
<!-- Beginning of the code - Pre footer trust badges -->
<style>
#gd-pre-footer { overflow:hidden; clear:both; margin-top:35px; margin-bottom:10px; padding-bottom:0; }
#gd-pre-footer .col-item { padding:15px 25px; text-align:center; list-style:none; }
#gd-pre-footer ul { padding-left:0 !important; }
#gd-pre-footer center { background:#none; }
@media screen and (min-width: 768px) {
#gd-pre-footer .col-item {
width:25%;
text-align:center;
float:left;
padding:5px 15px;
}
}
</style>
<div id="gd-pre-footer" class="pre_footer index-section home-section">
<div class="wrapper">
<div>
<ul class="footer-badges-list">
<li class="col-item">
<div class="text-center">
<img src="https://cdn.shopify.com/s/files/1/0533/3834/1574/files/shipping.png?v=1612535028" style="height: 75px;">
<h3 class="h4">Free Shipping</h3>
</div>
<p></p><center>You worried about shipping costs, don’t worry, we offer free shipping worldwide!</center><p></p>
</li>
<li class="col-item">
<div class="text-center">
<img class="" src="https://cdn.shopify.com/s/files/1/0533/3834/1574/files/satisfaction-guaranteed.png?v=1612535028" style="height: 75px;">
<h3 class="h4">Satisfaction Guaranteed</h3>
</div>
<p></p><center>Is something wrong? You have 14 days to change your mind, or 30 days refund for broken goods.</center><p></p>
</li>
<li class="col-item">
<div class="text-center">
<img class="img90" src="https://cdn.shopify.com/s/files/1/0533/3834/1574/files/client-support.png?v=1612535028" style="height: 75px;">
<h3 class="h4">24/7 Client Support</h3>
</div>
<p></p><center>Need help? Our team will gladly help you anytime!</center><p></p>
</li>
<li class="col-item">
<div class="text-center">
<img class="img90" src="https://cdn.shopify.com/s/files/1/0533/3834/1574/files/secure-payments.png?v=1612535028" style="height: 75px;">
<h3 class="h4">Secure Payments</h3>
</div>
<p></p><center>We use SSL encryption to ensure a secure shopping experience.</center><p></p>
</li>
</ul>
</div>
</div>
</div>
<!-- Ending of the code - Pre footer trust badges -->
{%- liquid
section "guarantee"
section "footer"
-%}
{%- if settings.show_top_button -%}
<button type="button" class="btn-top scroll-top btn btn--square btn-top-{{ settings.top_button_position }} {% if settings.top_button_mobile %}small--hide{% endif %}">
<span class="{{ settings.icon }}" aria-hidden="true">keyboard_arrow_up</span>
</button>
{%- endif -%}
</div>
{% include 'smile-initializer' %}
</body>
</html>
<script src="//cdn.codeblackbelt.com/js/modules/frequently-bought-together/main.min.js?shop=shop-utech.myshopify.com" defer></script>
{% include 'smile-initializer' %}
{% include 'sticky-cart-by-uplinkly' %}
{{ shop.metafields.loox["global_html_body"] }}
add your code below this code
Nope it stayed on the top
do you need below slideshow?
Yes that’s what I’ve been saying under the slideshow
So what do I do?
It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024