Why does my Shopify theme header change color and not display product images correctly?

MozzafiatoStore
Visitor
2 0 0

Hi everyone,

my theme has an option to change header color, in my site its set to black, but sometimes in the main page it turn transparent... also in the main page  sometimes when i click on the images of the main product, it doesnt display them in big . my site is www.mozzafiatostore.com , so you can check what i mean

i also add my theme.liquid:

thanks for your help

 

Click to expand...
<!doctype html> <html class="no-js" lang="{{ shop.locale }}"> <head> {% capture sb %}{% include "Secomapp-Description" %}{% endcapture %}{% unless sb contains "Liquid error" %}{% include "Secomapp-Description" %}{% endunless %} <!-- Basic page needs ================================================== --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link rel="canonical" href="{{ canonical_url }}"> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> <meta name="theme-color" content="{{ settings.color_primary }}"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <meta name="author" content="Debutify"> <!-- Fav icon ================================================== --> {% if settings.favicon %} <link sizes="192x192" rel="shortcut icon" href="{{ settings.favicon | img_url: '192x192' }}" type="image/png"> {% endif %} <!-- Title and description ================================================== --> <title> {{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} &ndash; {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %} </title> {% if page_description %} {% endif %} <!-- Social meta ================================================== --> {% include 'social-meta-tags' %} <!-- CSS ================================================== --> {{ 'theme.scss.css' | asset_url | stylesheet_tag }} <!-- Vendors ================================================== --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <!-- Sections ================================================== --> <script> window.theme = window.theme || {}; theme.strings = { zoomClose: {{ "products.zoom.close" | t | json }}, zoomPrev: {{ "products.zoom.prev" | t | json }}, zoomNext: {{ "products.zoom.next" | t | json }}, moneyFormat: {{ shop.money_format | json }}, addressError: {{ 'home_page.map.address_error' | t | json }}, addressNoResults: {{ 'home_page.map.address_no_results' | t | json }}, addressQueryLimit: {{ 'home_page.map.address_query_limit_html' | t | json }}, authError: {{ 'home_page.map.auth_error_html' | t | json }}, cartCookie: {{ 'cart.general.cookies_required' | t | json }} }; theme.settings = { cartType: {{ settings.cart_type | json }}, gridType: {{ settings.collection_products_grid | json }} }; </script> {{ 'jquery-2.2.3.min.js' | asset_url | script_tag }} {% include 'currency-detection' %} <script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script> <script src="{{ 'theme.js' | asset_url }}" defer="defer"></script> <!-- Header hook for plugins ================================================== --> {{ content_for_header }} <script>window.beans_cjs_id = '{{ customer.id }}'; window.beans_cjs_email = '{{ customer.email }}';</script> {{ 'modernizr.min.js' | asset_url | script_tag }} {% comment %} If you store has customer accounts disabled, you can remove the following JS file {% endcomment %} {% if template.directory == 'customers' %} {{ 'shopify_common.js' | shopify_asset_url | script_tag }} {% endif %} <meta name="google-site-verification" content="NWXfaLE1FvnY5ObvzsNG6q6H9WrE-GhCMn2WNcuqM3I" /> {% include 'loadify_loader' %} {% include 'qikify-navigator' %} {% include 'qikify-smartmenu-data' %} <script type="text/javascript" src="https://sdk.qikify.com/tmenu/app-v5.js?token=y9yo264N9PA5DlEwXvo3RBxx9Uk3uwiq&shop=mozzafiatostore.m..." defer="defer"></script> {% include "loyaltylion" %} {% include 'talkable-partial' %} <script>var scaaffCheck = false;</script> {{ 'sca_affiliate.js' | asset_url | script_tag }} </head> {% comment %} Add the page template as a class for easy page or template specific styling. {% endcomment %} <body id="{{ page_title | handle }}" class="{% if settings.show_announcement %}announcement-active{% endif %} {% if settings.hide_announcement_mobile %}announcement-mobile-hide{% endif %} {% if settings.sticky_header %}sticky-header{% endif %} {% if settings.hero_header %}transparent-header{% endif %} {% if customer %}customer-logged-in {% endif %} template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}"> <div id="SearchDrawer" class="drawer drawer--top"> <div class="drawer__inner"> {% include 'search-bar', input_type: 'input-group-full', search_location: 'drawer' %} </div> </div> {% section 'drawer-menu' %} <div id="CartDrawer" class="drawer drawer--right drawer--has-fixed-header drawer--has-fixed-footer"> <div class="drawer__fixed-header"> <div class="drawer__header"> <div class="drawer__title"> <a href="{{ routes.cart_url }}"> <span class="fas fa-shopping-{{ settings.cart_icon }}" aria-hidden="true"></span> {{ 'cart.general.title' | t }} </a> </div> <div class="drawer__close"> <button type="button" class="btn btn-square-small icon-fallback-text drawer__close-button js-drawer-close"> <span class="fas fa-times" aria-hidden="true"></span> <span class="fallback-text">{{ 'cart.general.close_cart' | t }}</span> </button> </div> </div> </div> <div class="drawer__inner"> <p class="ajaxcart-loading-icon fas fa-spinner fa-spin text-center"></p> <div class="cart-empty-container text-center"> <p class="cart--empty-message">{{ 'cart.general.empty' | t }}</p> <a href="{{ settings.browsing_link }}" class="btn {{ settings.browsing_button_style }} cart--continue-browsing">{{ 'cart.general.continue_browsing_html' | t }}</a> <p class="cookie-message">{{ 'cart.general.cookies_required' | t }}</p> </div> <div id="CartContainer" class="drawer__cart"></div> </div> </div> <div id="PageContainer" class="page-container"> {% include 'announcement' %} {% section 'header' %} {% unless template == 'collection' or template == 'article' %} {% include 'breadcrumbs' %} {% endunless %} <main class="main-content" role="main"> <div class="{% if template == 'index' or template == 'collection' or template == 'product' or template == 'article' %}wrapper-full {% elsif template == 'page.full-width' %}wrapper-fluid {% else %} wrapper{% endif %}"> {{ content_for_layout }} {% include 'station-tabs' %} </div> </main> {% section 'guarantee' %} {% section 'footer' %} {% if settings.show_top_button %} <a href="#" class="btn-top btn btn--square btn-top-{{ settings.top_button_position }} {% if settings.top_button_mobile %}small--hide{% endif %}"> <span class="fas fa-arrow-up"></span> </a> {% endif %} <div class="overlay-drawer"></div> </div> {% comment %} Template-specific js {% endcomment %} <script> {% if resetPassword %} $(function() { timber.resetPasswordSuccess(); }); {% endif %} </script> {% comment %} Ajaxify your cart with this plugin. Documentation: - http://shopify.com/timber#ajax-cart {% endcomment %} {% if settings.cart_type == 'drawer' %} {% include 'ajax-cart-template' %} {% endif %} {% if template.name == 'product' or template.name == 'index' %} <script> // Override default values of shop.strings for each template. // Alternate product templates can change values of // add to cart button, sold out, and unavailable states here. theme.productStrings = { addToCart: {{ 'products.product.add_to_cart' | t | json }}, soldOut: {{ 'products.product.sold_out' | t | json }}, unavailable: {{ 'products.product.unavailable' | t | json }} } </script> {% endif %} {% if template.name == 'collection' %} <script> /* Product Tag Filters - Good for any number of filters on any type of collection pages */ var collFilters = jQuery('.tag-filter'); collFilters.change(function() { var newTags = []; collFilters.each(function() { if (jQuery(this).val()) { newTags.push(jQuery(this).val()); } }); if (newTags.length) { var query = newTags.join('+'); window.location.href = jQuery('{{ 'tag' | link_to_tag: 'tag' }}').attr('href').replace('/' + 'tag', '/' + query); } else { {% if collection.handle %} window.location.href = '/collections/{{ collection.handle }}'; {% elsif collection.products.first.type == collection.title %} window.location.href = '{{ collection.title | url_for_type }}'; {% elsif collection.products.first.vendor == collection.title %} window.location.href = '{{ collection.title | url_for_vendor }}'; {% endif %} } }); </script> {% endif %} {% if template.name == 'cart' and settings.cart_top_button %} <script> $('document').ready(function(){ $('#topCheckoutButton').click(function(event){ event.preventDefault(); $('.cart__checkout').click(); }); }); </script> {% endif %} {% include 'gtranslate', float: 'yes' %} {{ '//cdn.shopify.com/s/files/1/0194/1736/6592/t/1/assets/booster-page-speed-optimizer.js?23' | script_tag }} </body> </html>
Replies 21 (21)

KetanKumar
Shopify Partner
36839 3635 11972

Hello, @MozzafiatoStore 

Thanks for post.

i have check sorry but i don't know the issue can you please provide a screen short of our video.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
BFYJ
Tourist
7 0 4

How to Add to Cart Button in Collection page of Debutify Theme? 

KetanKumar
Shopify Partner
36839 3635 11972

@BFYJ 

can you please try this 

Just follow the steps for Debut theme for Add to cart button on collection pages.

  • From Shopify Admin select Online Store and click on Themes
  • Choose your main theme
  • Click the . . . on the top left-right (see below) and hit Edit code
  • Open Snippets -> product-card-grid.liquid File and paste below code at the end of the page.
    <form method="post" action="/cart/add">
      <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
      <input min="1" type="number" id="quantity" name="quantity" value="1"/>
      <input type="submit" value="Add to cart" class="btn" />
    </form>
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
BFYJ
Tourist
7 0 4

Thank you for your Immediate Reply but My theme is not "debut" it's "debutify"

KetanKumar
Shopify Partner
36839 3635 11972

yes i know but some code style both are theme just add code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
BFYJ
Tourist
7 0 4

Yes it's working, Thank you! But there is Placement Issue ATC button is next to the product not below it, can you please help me in that part.

Untitled.png

KetanKumar
Shopify Partner
36839 3635 11972

@BFYJ 

can you please share store url so i will check and update code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
BFYJ
Tourist
7 0 4
KetanKumar
Shopify Partner
36839 3635 11972

@BFYJ 

thanks bt you have something is missing code it cab be done some custom code can you please share pm details 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
BFYJ
Tourist
7 0 4

Sir, I have sent you message

KetanKumar
Shopify Partner
36839 3635 11972

@BFYJ 

thanka i will check and reply message 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
36839 3635 11972

@BFYJ 

i have done this please check also someone same require please add this code

the flow above step just add this file 

product-grid-item.liquid 

 

 

{% assign has_color_swatches = false %}

{%- if content_for_header contains 'debutify' and settings.dbtfy_color_swatches -%}
  {%- if settings.dbtfy_color_swatches_grid != blank -%}
    {%- if product.available and product.variants.size > 1 -%}
      {% assign has_color_swatches = true %}
    {%- endif -%}
  {%- endif -%}
{%- endif -%}

{%- if emptyState -%}
  {%- assign product_link = '/admin/products' -%}
  {%- assign vendor = 'home_page.onboarding.product_vendor' | t -%}
  {%- assign title = 'home_page.onboarding.product_title' | t -%}
  {%- assign compare_at_price = 2999 -%}
  {%- assign price = 1999 -%}
{%- else -%}
  {%- assign variant = product.first_available_variant -%}
  {%- assign product_link = product.url | within: collection -%}
  {%- assign vendor = product.vendor -%}
  {%- assign title = product.title -%}

  {% if has_color_swatches %}
    {%- assign compare_at_price = variant.compare_at_price -%}
    {%- assign price = variant.price -%}
  {% else %}
    {%- assign compare_at_price = product.compare_at_price -%}
    {%- assign price = product.price -%}
  {% endif %}
{%- endif -%}

{%- if compare_at_price > price -%}
  {%- assign on_sale = true -%}
{%- else -%}
  {%- assign on_sale = false -%}
{%- endif -%}

{%- if product.available or emptyState -%}
  {%- assign sold_out = false -%}
{%- else -%}
  {%- assign sold_out = true -%}
{%- endif -%}

{%- if settings.grid_product_hover and product.images.size > 1 -%}
  {%- assign image_hover = true -%}
{%- else -%}
  {%- assign image_hover = false -%}
{%- endif -%}

{%- assign variant = product.selected_or_first_available_variant -%}

<div class="grid__item grid-product flex {{ grid_item_width }}{% if sold_out %} is-sold-out{% endif %}" data-product-card data-product-handle="{{ product.handle }}" data-product-id="{{ product.id }}">
  <div class="card grid-product__wrapper {% if image_hover %} has-hover-image{% endif %}">
    <div class="grid-product__image-wrapper">
      <a href="{{ product_link }}?variant={{ product.first_available_variant.id }}" class="grid-product__image-link">
        {%- if product.images != blank -%}
          <div id="ProductImageWrapper-{{ product.featured_image.id }}" class="product--wrapper card-image grid-product--wrapper media-wrapper" style="padding-top:{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100 }}%;">
            <img class="product--image media lazyload ProductImage-{{ product.featured_image.id }}"
            {% render 'lazysizes', img: product.featured_image, img_type: 'responsive' %}
            alt="{{ product.featured_image.alt }}"
            data-image>
          </div>

          {%- if image_hover -%}
            <div class="product--wrapper card-image grid-product--wrapper media-wrapper product-hover-image" style="padding-top:{{ 1 | divided_by: product.images[1].aspect_ratio | times: 100 }}%;">
              <img class="product--image media lazyload"
              {% render 'lazysizes', img: product.images[1], img_type: 'responsive', add_on_crop: settings.dbtfy_product_image_crop %}
              alt="{{ product.images[1].alt }}">
            </div>
          {%- endif -%}
        {%- elsif product.images.size < 1 or emptyState -%}
          {{ 'product-' | append: current | placeholder_svg_tag: 'card-image placeholder-svg' }}
        {%- endif -%}
      </a>

      {%- unless settings.tag_placement == 'none' -%}
        {%- if sold_out -%}
          <span class="badge grid-product__badge grid-product__badge-{{ settings.tag_placement }} disabled">
            <span class="{{settings.icon}}">watch_later</span>
            <span class="product-badge-text tooltip-position-bottom">
              {{ 'products.product.sold_out_html' | t }}
            </span>
          </span>
        {%- elsif on_sale -%}
          {%- capture saved_amount -%}
            {%- if settings.sale_type == 'amount' -%}
             <span class="money">{{ compare_at_price | minus: price | money }}</span>
            {%- elsif settings.sale_type == 'percentage' -%}
              {{ compare_at_price | minus: price | times: 100 | divided_by: compare_at_price }}%
            {%- endif -%}
          {%- endcapture -%}
          <span class="badge grid-product__badge grid-product__badge-{{ settings.tag_placement }}">
            <span class="{{settings.icon}}">local_offer</span>
            <span class="product-badge-text tooltip-position-bottom">
              {{ 'products.general.save_html' | t: saved_amount: saved_amount }}
            </span>
          </span>
        {%- endif -%}
      {%- endunless -%}

      {%- unless emptyState -%}
        {%- render "dbtfy-quick-view" with product as product -%}
        {%- render "dbtfy-wish-list" with product as product -%}
      {%- endunless -%}
    </div>

    {%- unless emptyState -%}
      {%- render "dbtfy-collection-addtocart" with product as product, sold_out: sold_out -%}
    {%- endunless -%}

    <a href="{{ product_link }}?variant={{ product.first_available_variant.id }}" class="card-body flex flex-column justify-center grid-product__meta spacer-auto-xs text-center">
      {%- if has_color_swatches -%}
        {%- render "dbtfy-color-swatches" with product as product, type: 'product_grid' -%}
      {%- endif -%}

      <p class="grid-product__title h6{% if settings.grid_product_truncate %} text-ellipsis{% endif %}">{{ title }}</p>

      {%- if settings.review_badge_product_grid -%}
        {%- unless emptyState -%}
          {%- render 'review-badge' with product as product, position: 'product_grid' -%}
        {%- endunless -%}
      {%- endif -%}

      <p class="grid-product__price-wrap">
        <span class="grid-product__price text-money">

          <span class="price-regular{% if on_sale %} on-sale text-secondary{% endif %}"
                {% if on_sale %}
                aria-label="{{ 'products.general.sale_price' | t }}"
                {% else %}
                aria-label="{{ 'products.general.regular_price' | t }}"
                {% endif %}>
            {%- if product.price_varies and emptyState == false -%}
            <span class="money">{{ product.price_min | money }}+</span>
            {%- else -%}
            <span class="money">{{ price | money }}</span>
            {%- endif -%}
          </span>

          <span class="price-compare text-strike text-muted {% unless on_sale %}hide{% endunless %}"
                aria-label="{{ 'products.general.regular_price' | t }}">
            {%- if on_sale -%}
              <span class="money">{{ compare_at_price | money }}</span>
            {%- else -%}
            <span class="money"></span>
            {%- endif -%}
          </span>
        </span>

        {%- if variant.available and variant.unit_price_measurement -%}
        {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
        {%- endcapture -%}

        {%- capture unit_price_base_unit -%}
        <span>
          {%- if variant.unit_price_measurement.reference_value != 1 -%}
          {{- variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ variant.unit_price_measurement.reference_unit }}
        </span>
        {%- endcapture -%}
        <span class="product-unit-price">
          <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
          <span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
        </span>
        {%- endif -%}
      </p>
    </a>

    {%- if settings.grid_product_vendor -%}
    <div class="card-footer text-center">
      <p class="vendor grid-product__vendor text-small text-italic">{{ vendor }}</p>
    </div>
    {%- endif -%}
    
    <form method="post" action="/cart/add">
      <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
      <input min="1" type="number" id="quantity" name="quantity" value="1"/>
      <input type="submit" value="Add to cart" class="btn" />
    </form>
    
  </div>
</div>

 

 

 

 

 

.grid-product__wrapper form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.grid-product__wrapper form input.btn {
    margin: 15px 0px;
}

 

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
BFYJ
Tourist
7 0 4

Perfect!!! Its working. Thank you so Much 

KetanKumar
Shopify Partner
36839 3635 11972

@BFYJ 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
BFYJ
Tourist
7 0 4

Hi KetanKumar, In the above code how to remove Quantity Picker?

Mudasar
Shopify Partner
4 0 1

i have use the above code but its duplicating the product any solution please

add t0 cart.PNG

 

Mudasar kamboh
Mudasar
Shopify Partner
4 0 1

Hey ketan kumar i have added the same code in my code file but i am facing an issue that i want add to cart button below the product price but its showing on side you can check on imageAdd to cart button.PNG

Mudasar kamboh
KetanKumar
Shopify Partner
36839 3635 11972

@Mudasar 

oh sorry for that issue can you please share store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Mudasar
Shopify Partner
4 0 1
  1. Thank you ketan kumar i solved it by myself now its working fine 
Mudasar kamboh
Mudasar
Shopify Partner
4 0 1

Hey Ketan Kumar

Hope you are doing well

i want to add sticky add to cart like this in my sense theme.

can you please provide me the code

sticky cart.jpg

My store Link:https://mudasir-practice-store.myshopify.com/products/blue-brine

 

password= cart

 

 

Mudasar kamboh
thezihni
Visitor
1 0 0

Hello sir, i got bug when i use debutify theme i send you a screen shot maybe you can help me

 

my website: gourmetware.net