Add sticky social media icons to Shopify Parallax theme

pop over to this site Sticky social icons in Shopify Parallax theme

my review here If you need to add sticky social media icons to Shopify there are many options in the App Store, and many of them are free. One App I had set up for a client was free to install, but included a self-promotion icon that appeared when hovering over any of the icons. The Parallax theme the website was using already had options for adding social media icons to the footer, so I considered the idea of modifying the theme to include sticky social settings.

opcje binarne bet365 I came up with some benefits of adding the settings to the theme:

  1. Take advantage of existing social media settings within the theme
  2. Editing and adding new icons is done once
  3. Icons match the theme’s design
  4. No advertising

Notes

azioni The Parallax Theme is required for this tutorial, but you may be able to modify the code to work with other themes.

Tastylia Spain The code for this tutorial is also available on GitHub

Here’s how to do it

live forex Sign in to Shopify, and go to Online Store. Make sure Parallax theme is the published theme, and click Edit HTML/CSS in the ellipses drop down button.

Assets

  1. Copy the above code below to your clipboard
  2. In Shopify, open the Assets folder and click the Add a new asset link
  3. In the modal pop-up window, click the Create a blank file tab, enter sticky-social into the name field, and choose .scss.liquid from the file format selection menu. Click the Add asset button
  4. Paste in the code from your clipboard
  5. Click Save

http://beachgroupcommercial.com/?kachalka=invita-amico-iq-option&a6e=bc .sticky-social-icons { position: fixed; {{ settings.sticky_social_side}}: 0; top: 60px; z-index: 10; } @media (min-width: 768px) { .sticky-social-icons { top: {{ settings.sticky_social_margin}}px; } } .sticky-social-icons .social-icons { margin-bottom: 0; } .sticky-social-icons .ss-icon { color: {{ settings.sticky_social_icon_color }}; display: block; font-size: 30px; } .sticky-social-icons .ss-icon:hover { color: {{ settings.sticky_social_icon_hover }}; } .sticky-social-icons [class^="icon-"] { margin-right: 4px; margin-left: 4px; padding: 0; } @media (min-width: 768px) { .sticky-social-icons [class^="icon-"] { margin-right: 10px; margin-left: 10px; } } {% if settings.sticky_social_mobile %} @media (max-width: 767px) { .sticky-social-icons { display: none; } } {% endif %}

Config

  1. Copy the code below to your clipboard
  2. In Shopify, open the Config folder, and open settings_schema.json. Search for “Social media” (including quotations)
  3. Below “name”: “Social media”, “settings”: [ paste in the code from your clipboard
  4. Click Save

browse this site { "type": "checkbox", "id": "sticky_social", "label": "Enable sticky social buttons", "info": "Add sticky social buttons to the side of your website" }, { "type": "select", "id": "sticky_social_side", "label": "Side", "info": "Select which side to show the buttons", "options": [ { "value": "left", "label": "Left" }, { "value": "right", "label": "Right" } ], "default": "right" }, { "type": "text", "id": "sticky_social_margin", "label": "Distance from top (in pixels)", "default": "200" }, { "type": "color", "id": "sticky_social_icon_color", "label": "Icon color", "default": "#333333" }, { "type": "color", "id": "sticky_social_icon_hover", "label": "Icon hover color", "default": "#000000" }, { "type": "checkbox", "id": "sticky_social_mobile", "label": "Enable on mobile", "info": "Show sticky social buttons on mobile devices" },

Layout

  1. Copy the code below to your clipboard
  2. In Shopify, open the Layout folder, and open theme.liquid. Search for body to find the opening tag
  3. Just after the opening tag, paste in the code from your clipboard
  4. Click Save

go to these guys {% if settings.sticky_social %} {% include 'sticky-social' %} {{ 'sticky-social.scss' | asset_url | stylesheet_tag }} {% endif %}

Snippets

  1. Copy the code below to your clipboard
  2. In Shopify, open the Snippets folder and click the Add a new snippet link
  3. After Create a new snippet called type sticky-social and click the Create snippet button
  4. Paste in the code from your clipboard
  5. Click Save

this article

{% include 'social-icons' %}

http://unter2grad.de/?debilizm=binary-options-forex-factory&0e2=d7 Now go to Customize theme, and on the General Tab, open Social media. Make any modifications to the settings, and click Save.

index As mentioned in the notes above, the code for this tutorial is also available on GitHub