Why does my Debutify theme header color and product image display change unexpectedly?

Store Design
1

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

Show More

{% capture sb %}{% include “Secomapp-Description” %}{% endcapture %}{% unless sb contains “Liquid error” %}{% include “Secomapp-Description” %}{% endunless %} {% if settings.favicon %} {% endif %} {% if page_description %} {% endif %} {% include ‘social-meta-tags’ %} {{ ‘theme.scss.css’ | asset_url | stylesheet_tag }} {{ ‘jquery-2.2.3.min.js’ | asset_url | script_tag }} {% include ‘currency-detection’ %} {{ content_for_header }} {{ ‘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 %} {% include ‘loadify_loader’ %} {% include ‘qikify-navigator’ %} {% include ‘qikify-smartmenu-data’ %} {% include “loyaltylion” %} {% include ‘talkable-partial’ %} {{ ‘sca_affiliate.js’ | asset_url | script_tag }} {% comment %} Add the page template as a class for easy page or template specific styling. {% endcomment %}

{% include ‘search-bar’, input_type: ‘input-group-full’, search_location: ‘drawer’ %}

{% section ‘drawer-menu’ %}

{{ ‘cart.general.title’ | t }}

{{ ‘cart.general.empty’ | t }}

{{ ‘cart.general.continue_browsing_html’ | t }}

{{ ‘cart.general.cookies_required’ | t }}

{% include ‘announcement’ %} {% section ‘header’ %} {% unless template == ‘collection’ or template == ‘article’ %} {% include ‘breadcrumbs’ %} {% endunless %} {% section ‘guarantee’ %} {% section ‘footer’ %} {% if settings.show_top_button %} {% endif %}

{% comment %} Template-specific js {% endcomment %} {% 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’ %} {% endif %} {% if template.name == ‘collection’ %} {% endif %} {% if template.name == ‘cart’ and settings.cart_top_button %} {% 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 }}

2

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.

1 Like
3

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

1 Like
4

@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>
2 Likes
5

Thank you for your Immediate Reply but My theme is not “debut” it’s “debutify”

6

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

1 Like
7

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
Untitled.png1891×913 139 KB

1 Like
8

@BFYJ

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

1 Like
9

www.beadsforyourjewelry.com

10

@BFYJ

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

1 Like
11

Sir, I have sent you message

1 Like
12

@BFYJ

thanka i will check and reply message

1 Like
13

@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 -%}

  

    

      
        {%- if product.images != blank -%}
          

            
          

          {%- if image_hover -%}
            
              
            

          {%- endif -%}
        {%- elsif product.images.size < 1 or emptyState -%}
          {{ 'product-' | append: current | placeholder_svg_tag: 'card-image placeholder-svg' }}
        {%- endif -%}
      

      {%- unless settings.tag_placement == 'none' -%}
        {%- if sold_out -%}
          
            watch_later
            
              {{ 'products.product.sold_out_html' | t }}
            
          
        {%- elsif on_sale -%}
          {%- capture saved_amount -%}
            {%- if settings.sale_type == 'amount' -%}
             {{ compare_at_price | minus: price | money }}
            {%- elsif settings.sale_type == 'percentage' -%}
              {{ compare_at_price | minus: price | times: 100 | divided_by: compare_at_price }}%
            {%- endif -%}
          {%- endcapture -%}
          
            local_offer
            
              {{ 'products.general.save_html' | t: saved_amount: saved_amount }}
            
          
        {%- endif -%}
      {%- endunless -%}

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

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

    
      {%- if has_color_swatches -%}
        {%- render "dbtfy-color-swatches" with product as product, type: 'product_grid' -%}
      {%- endif -%}

      

{{ title }}

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

      

        

          
            {%- if product.price_varies and emptyState == false -%}
            {{ product.price_min | money }}+
            {%- else -%}
            {{ price | money }}
            {%- endif -%}
          

          
            {%- if on_sale -%}
              {{ compare_at_price | money }}
            {%- else -%}
            
            {%- endif -%}
          
        

        {%- if variant.available and variant.unit_price_measurement -%}
        {%- capture unit_price_separator -%}
        / {{ 'general.accessibility.unit_price_separator' | t }} 
        {%- endcapture -%}

        {%- capture unit_price_base_unit -%}
        
          {%- if variant.unit_price_measurement.reference_value != 1 -%}
          {{- variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ variant.unit_price_measurement.reference_unit }}
        
        {%- endcapture -%}
        
          {{ 'products.general.unit_price' | t }}
          {{ variant.unit_price | money }}{{- unit_price_separator -}}{{- unit_price_base_unit -}}
        
        {%- endif -%}
      

    

    {%- if settings.grid_product_vendor -%}
    

      

{{ vendor }}

    

    {%- endif -%}
    
    
    
  


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

Perfect!!! Its working. Thank you so Much

1 Like
15

@BFYJ

it’s my pleasure to help us

16

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

17

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

18

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 image

Add to cart button.PNG
Add to cart button.PNG1178×450 184 KB

1 Like
19

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

add t0 cart.PNG
add t0 cart.PNG905×520 110 KB

20

@Mudasar

oh sorry for that issue can you please share store url

1 Like