Shopify Partners shopifypartners
shopifypartners
/ mobile-logo-styles.scss
Created
September 25, 2019 07:22
How to use Shopify theme settings to create mobile-specific logos |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*================ 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
/ mobile-logo-markup.liquid
Created
September 25, 2019 07:19
How to use Shopify theme settings to create mobile-specific logos |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
shopifypartners
/ duplicate-logo-markup.liquid
Created
September 25, 2019 07:16
How to use Shopify theme settings to create mobile-specific logos |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {% 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 %} | |
| {% if section.settings.mobile_logo != blank %} |
shopifypartners
/ mobile-logo-settings.json
Created
September 25, 2019 07:10
How to use Shopify theme settings to create mobile-specific logos |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "type": "image_picker", | |
| "id": "logo", | |
| "label": "Logo image" | |
| }, | |
| { | |
| "type": "range", | |
| "id": "logo_max_width", | |
| "min": 50, | |
| "max": 450, |
shopifypartners
/ duplicate-logo-settings.json
Last active
September 25, 2019 07:09
How to use Shopify theme settings to create mobile-specific logos |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "type": "image_picker", | |
| "id": "logo", | |
| "label": "Logo image" | |
| }, | |
| { | |
| "type": "range", | |
| "id": "logo_max_width", | |
| "min": 50, | |
| "max": 450, |
shopifypartners
/ logo-markup.liquid
Created
September 25, 2019 07:05
How to use Shopify theme settings to create mobile-specific logos |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {% 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 %} |
shopifypartners
/ logo-settings.json
Created
September 25, 2019 07:04
How to use Shopify theme settings to create mobile-specific logos |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "type": "image_picker", | |
| "id": "logo", | |
| "label": "Logo image" | |
| }, | |
| { | |
| "type": "range", | |
| "id": "logo_max_width", | |
| "min": 50, | |
| "max": 450, |
shopifypartners
/ gallery.liquid
Last active
September 26, 2019 14:58
Example of a product gallery that has been updated to support for media
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {% for media in product.media %} | |
| <div> | |
| {% capture img_id %}FeaturedImage-{{ section.id }}-{{ media.id }}{% endcapture %} | |
| {% case media.media_type %} | |
| {% when 'image' %} | |
| <img id="{{ img_id }}" | |
| class="feature-row__image" | |
| src="{{ media | img_url: '300x300' }}" | |
| data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" | |
| data-aspectratio="{{ media.aspect_ratio }}" |
shopifypartners
/ show_product_recommendations.liquid
Created
July 30, 2019 15:24
Turn of product recommendations | https://www.shopify.com/partners/blog/related-products
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "type": "checkbox", | |
| "id": "show_product_recommendations", | |
| "label": "Turn on product recommendations", | |
| "default": false | |
| } |
shopifypartners
/ progressive-enhancement-3.css
Created
July 29, 2019 14:09
— forked from zastrow/progressive-enhancement-3.css
Progressive enhancement 3 | https://www.shopify.com/partners/blog/css-resources
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .layout-main { | |
| display: inline-block; | |
| display: flex; | |
| display: grid; | |
| width: 100%; | |
| } | |
| .layout-main__left { | |
| float: left; | |
| width: 75%; |