Nutrition Warehouse Blog

Welcome to our Nutrition Warehouse Shopify Admin Code Snippets library, tailored specifically for our e-commerce team. Here, you'll find a curated collection of concise code snippets designed to enhance your blog page layouts effortlessly. Simplify your workflow and elevate your online store's aesthetics with these small yet powerful coding gems.

NWH Buttons

Buttons classes to match the NWH website. Recommended to keep consistency throughout design

  <a class="nwh-btn" href="/">Shop Now</a>

Preview

Nutrition Warehouse Buttons Preview image

This code snippet cleverly arranges a clickable banner image creating an engaging and balanced design.

  <a href="/">
    <div class="banner-wrapper">
      <img src="https://cdn.shopify.com/s/files/1/0479/9892/7003/files/Force_T_Back_Sports_Bra2.jpg?v=1693370662" alt="banner-image">
    </div>
  </a>

Preview

Add these CSS snippets to the blog for the lists with links.

<ul class="nwh-fittalk-lists-wrapper">
  <li>
    <a href="#">Gain Muscle</a>
  </li>
  <li>
    <a href="#">Weight Loss</a>
  </li>
  <li>
    <a href="#">Nutrition</a>
  </li>
  <li>
    <a href="#">Lifestyle</a>
  </li>
  <li>
    <a href="#">Receipes</a>
  </li>
  <li>
    <a href="#">Supplements</a>
  </li>
</ul>

Preview

Lists By Links Section Preview

Product - Text Template

This code snippet cleverly arranges product card with text template creating an engaging and balanced design.

<div class="fittalk-prod-text-wrapper">
  <h3>Hydroxy lean By Genetix Nutrition</h3>
  <div class="fittalk-prod-text-outer">
    <div class="fittalk-prod-text-img">
      <a href="/">
        <img src="https://res.cloudinary.com/nutrition-warehouse/image/upload/v1633921947/Supplements/546/genetix-hydroxylean-rasp.jpg" alt="product-featured-image">
        <span class="nwh-btn">Shop Now</span>
      </a>
    </div>
    <div class="fittalk-prod-text-content">
      <p>Genetix Nutrition has crafted Hydroxy Lean with a combination of ingredients designed to take your fitness and health journey to new heights. This supplement provides everything you need to help you reach your body composition goals with an added bonus; no jitters or post-stimulant crash!</p>
    </div>
  </div>
</div>

Preview

Product Text Template

Split Image With Text

This code snippet cleverly arranges split image with text creating an engaging and balanced design.

    <h1 style="text-transform: uppercase;">Split Image With text</h1>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
      <div class="split-image-wrapper">
        <div class="split-image--grid">
          <img src="https://fittalk.vercel.app/_next/image?url=https%3A%2F%2Ffittalk-media.s3.ap-southeast-2.amazonaws.com%2FInspired_Blog_Pre_Workout_89423625b9.jpg&w=1080&q=70" alt="splitfeatured-image">
        </div>
        <div class="split-image--grid">
          <img src="https://fittalk.vercel.app/_next/image?url=https%3A%2F%2Ffittalk-media.s3.ap-southeast-2.amazonaws.com%2FBest_Probiotics_Blog_21fce686b8.jpg&w=640&q=75" alt="split-featured-image">
        </div>
      </div>
      <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>

Preview