Skip to content

Instantly share code, notes, and snippets.

Shopify Partners shopifypartners

Block or report user

Report or block shopifypartners

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
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.