Skip to content

Instantly share code, notes, and snippets.

Avatar

Shopify Partners shopifypartners

View GitHub Profile
@shopifypartners
shopifypartners / content-options.liquid
Created Oct 25, 2019
How to Create a Customizable Announcement Bar Section
View content-options.liquid
{%- if section.settings.link == blank -%}
<div class="announcement-bar">
{%- else -%}
<a href="{{ section.settings.link }}" >
{%- endif -%}
<p class="announcement-bar__message">{{ section.settings.text | escape }}</p>
{%- if section.settings.link == blank -%}
</div>
@shopifypartners
shopifypartners / schema-checkbox-settings.liquid
Created Oct 25, 2019
How to Create a Customizable Announcement Bar Section
View schema-checkbox-settings.liquid
{% schema %}
{
"name": "Announcement bar",
"settings": [
{
"type": "checkbox",
"id": "show_announcement",
"label": "Show announcement",
"default": false
},
@shopifypartners
shopifypartners / basic-markup.liquid
Created Oct 25, 2019
How to Create a Customizable Announcement Bar Section
View basic-markup.liquid
{%- if section.settings.show_announcement -%}
{%- if section.settings.home_page_only == false or template.name == 'index' -%}
<div class="announcement-bar">
<p class="announcement-bar__message"></p>
</div>
{%- endif -%}
{%- endif -%}
View image-zoom-add-styles.css
.image-container {
display: -ms-grid;
display: grid;
grid-gap: 30px;
-ms-grid-columns: 200px 30px auto;
grid-template-columns: 480px auto;
}
.image-details {
position: relative;
View image-zoom-init-drift.js
new Drift(document.querySelector('.image-zoom'), {
paneContainer: document.querySelector('.image-details')
});
View image-zoom-add-markup.liquid
<div class=”image-container”>
<img class=”image-zoom” src=”{{ featured_image | img_url: '480x480' }}” alt="{{ image.alt | escape }} data-zoom="{{ featured_image | img_url: '1024x1024', scale: 2 }}>
<div class="image-details"></div>
</div>
@shopifypartners
shopifypartners / label-language-settings.json
Created Sep 25, 2019
How to use Shopify theme settings to create mobile-specific logos |
View label-language-settings.json
"label": {
"de": "Logo-Foto",
"en": "Logo image",
"es": "Logotipo",
"fr": "Image du logo",
"it": "Immagine del logo",
"ja": "ロゴ画像",
"pt-BR": "Imagem do logotipo"
}
@shopifypartners
shopifypartners / mobile-logo-styles.scss
Created Sep 25, 2019
How to use Shopify theme settings to create mobile-specific logos |
View mobile-logo-styles.scss
/*================ Display and hide logo images on header ================*/
/* Large devices (over 700 px) */
@media only screen and (min-width: 701px) {
#mobile{
display:none;
}
}
/* Small devices (under 700 px) */
@shopifypartners
shopifypartners / mobile-logo-markup.liquid
Created Sep 25, 2019
How to use Shopify theme settings to create mobile-specific logos |
View mobile-logo-markup.liquid
<div id="desktop">
{% if section.settings.logo != blank %}
{% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
<img src="{{ section.settings.logo | img_url: image_size }}"
srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ section.settings.logo.alt | default: shop.name }}">
{% else %}
{{ shop.name }}
{% endif %}
</div>
You can’t perform that action at this time.