Shopify Header- Debut

HOW TO:

STEP ONE: Go to Shopify online and go Edit code for Debut Theme under ACTIONS.

STEP TWO: Open THEME.SCSS.LIQUD under ASSEST Floder.

STEP THREE: Copy the code below and add it to the bottom of THEME file

STEP FOUR: SAVE

STEP FIVE: If you want to change the colors go to the link below and choose your color and enter it in the code.

HTML Color Pick:
https://htmlcolorcodes.com/

.site-header__logo {
    color: #ffffff​;
}

header.site-header {
  background-color: #ADA74D​ ;
}
  
.site-header__mobile-nav {
  background-color: #ADA74D​ !important;
}

footer.site-footer {
   background-color: #212F3D​  ;
}

div#shopify​-section-header.shopify-section {
  background-color: #212F3D​  ;
}

#AccessibleNav​ .site-nav__link {
 color: #fff​;
}

body.index #Header​ #Logo​ {color:#ffffff​}

.icon-search {
  color: white;
  
}

.icon-cart {
  color: white;
  
}

.icon-login {
  color: white;
  
}


.icon-hamburger {
  color: white;
  
}

#SearchDrawer​ {
  z-index:1001;
}

#shopify​-section-header {
  position: fixed;
  z-index:1000;
  left:0;
  right:0;
  -webkit-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  -moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  -ms-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  -o-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  background-color: {{ settings.color_body_bg }};
}

#PageContainer​ {
  padding-top: 80px;
}

@media screen and (max-width: 749px) {
#PageContainer​ {
  padding-top: 70px;
}
}

@media screen and (max-width: 769px){
  .slideshow__title, .slideshow__subtitle {
     display: block !important;;
  }
  .slideshow__text-wrap--mobile{
    display: none !important;;
  }
}

Bleeding Edge 1,000 Gamerscore

Hey All,

Today we are talking about Bleeding Edge walk through. Fastest way to get to 1000 Gamerscore.

So lets get started.

Bleeding Edge is a online only multiplayer game 4v4. As soon as you install the game you will be asked to play the tutorial. Make sure you play the tutorial so you can unlock the Certified Achievement – Play all the tutorials.

Now lets go ahead and start a multiplayer game. You will get one of the two type of game modes. capture the cells or capture the objective. If you are new to fighting games I recommend playing Zero Cool Medic character you will be able to heal your players when they are in a fight and as soon as they are low on health you can take your auto lock on gun and shoot a few times. With this you will be going for First Aid Achievement and Fiddy Achievement. Try to team up 2v1.If you are in a big fight try to heal everyone that is low as fast and possible and switch keep switching to other players so you can get heal points up.

For Advanced Players you can use Miko. Get into a fight and you can double click RB to heal yourself and it keeps fast. This is the fast way to get the achievement but requires more skills. Know not to pick fights you will lose against big tank players and if you get in big battles you play now the outside.

For the Territorial Achievement. You can get this petty quick as the objectives changes after a specific time and you can see where they will spawn by looking at the mini map and using your board to get there quicker. If you see a big fight and there are three objectives go for the other two objectives. NO Specific character is need. If you still cant get it then use Daemon as you can go invisible and run away fast and go to other objectives.

For Battery-Powered Achievement you can get this using any character but fast way is use Daemon Character to rush as soon as the cells spawn and just don’t get in big fights or be with your team. Rush all the cells spawn fast. Don’t get in fights just rush the cells spawns they show up in the mini map.

For Hurt Locker Achievement using character Daemon is a high damage but low health character so you don’t want to get in big fights. Be a tiger sneak up on your pray and go after the medics. They do the less damage to you.

For A Winner Is You and Dime In The Pocket Achievements you will get this in the time it takes to play this.

For the Gnarly and Custom Fittings Achievements Go to “Workshops” go to boards. If you play a few online games you should have a free board from challenges or enough money to buy a new board.

  • From the Main Menu, Press “Workshop” – Press the “Mods” Tab
  • By Default, you have Active 3 Mods (You can have 3 active at 1 time). You can see these in the lower right of the Mods Menu.
  • You need to Press RB to edit “Mod Build 2” or “Mod Build 3”
  • You can fill the 3 slots with the 3 mods you started with.
  • Swap all 3 Mods in for your Achievement.

Shopify Hover on Debut Theme

Add the code below code to the bottom of Theme.scss.liquid which is located under Assets folder:


/* ====== Product image swap module ====== */

.product-card__hover-image img.product-hover_image { display: none; }
li.grid__item:hover img.product-hover_image { display: block; position: absolute; top: 0px; }
div.grid-view-item:hover img.grid-view-item__image { display: none; }

Look for this code in Product-card-grid.liquid  under the Snippets folder.

          <img id="{{ img_id }}"
                class="grid-view-item__image lazyload"
                alt="{{ preview_image.alt }}"
                data-src="{{ img_url }}"
                data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                data-aspectratio="{{ preview_image.aspect_ratio }}"
                data-sizes="auto"
                data-image>
*/

Replace the code above with the code below:

          <div class="product-card__hover-image">
              <img id="{{ img_id }}"
                    class="grid-view-item__image lazyload"
                    alt="{{ preview_image.alt }}"
                    data-src="{{ img_url }}"
                    data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                    data-aspectratio="{{ preview_image.aspect_ratio }}"
                    data-sizes="auto"
                    data-image>
              <img class="product-hover_image" src="{{ product.images[1] | img_url: '450x450' }}" alt="{{ product.images[1].alt | escape }}" />
          </div>

THE END. Please don’t forget to subscribe and donate. I just saved you $5 a month for X number of months. Enjoy!

Shopify Hover on Product Brooklyn

Add the code below code to the bottom of Theme.scss.liquid which is located under Assets folder:

/* ===============================================
// Reveal module
// =============================================== */
.has-secondary.grid-view-item__link img.secondary{
 display:none;
}

.has-secondary.grid-view-item__link:hover img.secondary{
 display:block;
}

.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
 display:none;
}

@media screen and (min-width:767px){
.has-secondary.grid-view-item__link img.secondary{
 display:none;
}

.has-secondary.grid-view-item__link:hover img.secondary{
 display:block;
}

.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
 display:none;
}
}

@media screen and (max-width:767px){
.has-secondary.grid-view-item__link img.secondary{
 display:none;
}
}

Add the code below to Product-grid-item.liquid under Snippets folder. Delete everything in this file just paste the code below(this one has no dash and bigger price):

{% unless grid_item_width %}
  {% assign grid_item_width = 'large--one-third medium--one-half' %}
{% endunless %}

{% unless width %}
  {%- assign width = 310 -%}
{% endunless %}
{% unless height %}
  {%- assign height = 415 -%}
{% endunless %}

{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
  {% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% if product.available %}
  {% assign sold_out = false %}
{% endif %}

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






<div class="grid__item grid-product {{ grid_item_width }}{% if sold_out %} is-sold-out{% endif %}">
  <div class="grid-product__wrapper">
   

    <a href="{{ product.url | within: collection }}" class="grid-product__meta">
      
          
          
        </span>

        
      </span>
      {% if section.settings.product_vendor_enable %}
        <p class="grid-product__vendor">{{ product.vendor }}</p>
      {% endif %}
      
      {% unless grid_image_width %}
  {%- assign grid_image_width = '600x600' -%}
{% endunless %}
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link {% if product.images.size > 1 %} has-secondary{% endif %}" href="{{ product.url | within: collection }}">
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width }}" alt="{{ product.featured_image.alt }}">
    {% if product.images.size > 1 %}
     <img class="secondary" src="{{ product.images.last | img_url: grid_image_width }}" alt="{{ product.images.last.alt | escape }}">
    {% endif %}
    <div class="grid-view-item__title">{{ product.title }}</div>
    {% if section.settings.show_vendor %}
      <div class="grid-view-item__vendor">{{ product.vendor }}</div>
    {% endif %}
    <div class="grid-view-item__meta">
      {% include 'product-price', variant: product %}
    </div>
  </a>
</div>

    </a>
  </div>
</div>

Add the code below to Product-grid-item.liquid under Snippets folder. Delete everything in this file just paste the code below( (this one has dash and smaller price):

{% unless grid_item_width %}
  {% assign grid_item_width = 'large--one-third medium--one-half' %}
{% endunless %}

{% unless width %}
  {%- assign width = 310 -%}
{% endunless %}
{% unless height %}
  {%- assign height = 415 -%}
{% endunless %}

{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
  {% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% if product.available %}
  {% assign sold_out = false %}
{% endif %}

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






<div class="grid__item grid-product {{ grid_item_width }}{% if sold_out %} is-sold-out{% endif %}">
  <div class="grid-product__wrapper">
   

    <a href="{{ product.url | within: collection }}" class="grid-product__meta">
      
          
          
        </span>

        
      </span>
      {% if section.settings.product_vendor_enable %}
        <p class="grid-product__vendor">{{ product.vendor }}</p>
      {% endif %}
      
      {% unless grid_image_width %}
  {%- assign grid_image_width = '600x600' -%}
{% endunless %}
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link {% if product.images.size > 1 %} has-secondary{% endif %}" href="{{ product.url | within: collection }}">
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width }}" alt="{{ product.featured_image.alt }}">
    {% if product.images.size > 1 %}
     <img class="secondary" src="{{ product.images.last | img_url: grid_image_width }}" alt="{{ product.images.last.alt | escape }}">
    {% endif %}
    <div class="grid-view-item__title">{{ product.title }}</div>
            <span class="long-dash">—</span>
        <span class="grid-product__price">
          {% if on_sale %}
            <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
          {% else %}
             <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
          {% endif %}
          {% if product.price_varies %}
            {{ product.price_min | money_without_trailing_zeros }}
            <span class="icon-fallback-text">
              <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
              <span class="fallback-text">+</span>
            </span>
          {% else %}
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}
        </span>
    {% if section.settings.show_vendor %}
      <div class="grid-view-item__vendor">{{ product.vendor }}</div>
    {% endif %}
  </a>
</div>
  
          {%- if product.price_varies == false 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 -%}
      </span>
      {% if section.settings.product_vendor_enable %}
        <p class="grid-product__vendor">{{ product.vendor }}</p>
      {% endif %}
    </a>
  </div>

THE END. Please don’t forget to subscribe and donate. I just saved you $5 a month for X number of months. Enjoy!