Celebrating 10 issues of Shopify Development Goodness 

Shopify Development news and articles

 
Liquid Weekly

Karl Says


Today is a big milestone - issue #10!
Starting this list has been a lot of fun. My favorite part has been meeting many great people doing all kinds of interesting work. We are lucky to have a vibrant and kind community.

News & Articles

How to Work With Shopify Theme Blocks
Learn how to build basic blocks into a section, what best practices to follow and see some example code using the new Dawn theme.
Shopify App Challenge Past Participants: Where Are They Now?
What happens after you participate in the Shopify App Challenge? Catch up with four participants from the 2020 challenge to learn how building an app impacted their unique journeys as Shopify Partners and Developers.
Commerce+ 2021: A Recap of What’s Next in Commerce
Hear how some of the biggest global brands are thinking about the future of their businesses, and how Shopify is building products to support their growth
Developing with Shopify CLI and Online Store 2.0 (with GitHub) Workflow
Learn how you can integrate GitHub into your Shopify theme development workflow using the new Github integration with Shopify Themes and the updated Shopify CLI.
Important Product Updates for Shopify Developers
Get more details on recent developer updates at Shopify including:
  • Post-purchase support for Subscriptions
  • Payment Flexibility API
  • Gift Card API
  • New featured apps collection: Works with Shopify Markets
  • Developer documentation redesign and new PHP library
Good Tests Don't Change
Not Shopify specific, but a nice writeup on reasons and techniques for writing tests that don't change. You do write tests, don't you? :-)

Code & Tools

Implement Planned Ship Date using only Liquid
In this quick tutorial TJ shows us how to include a concrete ship date below the buy button using liquid’s date filters.
List of Shopify Packagers / Compilers
A recent conversation on the Shopify Partners Slack regarding web compilers for OS2 resulted in the following list. Maybe some of these are new to you and worth exploring:

Changelog

API
Nothing new this week

Events

Email Marketing AMA with Klaviyo Experts - 10/20/2021
Ask Klaviyo experts @lovevalgeisler & @KrisDaria all things email marketing. Questions on retention strategies, types of emails to send, when to start your holiday campaigns this year, how to promote your offers and more

Jobs

Freelance Shopify Developer, Remote
Voltage is looking to grow our development team. We are seeking remote freelance Shopify developers for the positions listed below.
Senior Backend Developer, Brooklyn
We’re looking for an experienced backend developer to join the Brooklinen team in Dumbo, Brooklyn. As our first dedicated in-house backend developer, you’ll lead the conversations about how to best approach and solve a wide range of business opportunities and cross-functional feature requests.

Tip of the Week

Glowing Icons in CSS
Here's a fun little tip showcased by Gupta Krishna showing how to easily achieve a glowing icon using nothing but CSS. This could be perfect for a little halloween fun or for the holidays.
12c9165e-f6ea-11eb-96e5-06b4694bee2a%2F1634608501957-Screen+Shot+2021-10-17+at+9.50.37+PM.png
<style>
  #apple,
  #twitter,
  #github,
  #facebook {
    font-size: 8em;
    background-color: #18191f;
    color: #fff;
    box-shadow: 2px 2px 2px #00000080, 10px 1px 12px #00000080,
      2px 2px 10px #00000080, 2px 2px 3px #00000080, inset 2px 2px 10px #00000080,
      inset 2px 2px 10px #00000080, inset 2px 2px 10px #00000080,
      inset 2px 2px 10px #00000080;
    border-radius: 29px;
    padding: 11px 19px;
    margin: 0 40px;
    animation: animate 3s linear infinite;
    text-shadow: 0 0 50px #0072ff, 0 0 100px #0072ff, 0 0 150px #0072ff,
      0 0 200px #0072ff;
  }
  #twitter {
    animation-delay: 0.3s;
  }
  #facebook {
    animation-delay: 0.7s;
  }
  #github {
    animation-delay: 0.1s;
  }

  @keyframes animate {
    from {
      filter: hue-rotate(0deg);
    }
    to {
      filter: hue-rotate(360deg);
    }
  }
</style>


<div class="container">
  <i class="fa fa-apple" id="apple"></i>
  <i class="fa fa-twitter" id="twitter"></i>
  <i class="fa fa-github-square github" id="github"></i>
  <i class="fa fa-facebook-square" id="facebook"></i>
</div>