/** Shopify CDN: Minification failed

Line 16:8 Expected identifier but found "."
Line 19:82 Unterminated string token
Line 31:1 Expected identifier but found "%"
Line 33:1 Expected identifier but found "%"
Line 35:0 Unexpected "<"
Line 153:0 Unexpected "<"
Line 212:88 Unterminated string token
Line 217:44 Unterminated string token
Line 233:130 Unterminated string token
Line 244:71 Unterminated string token
... and 3 more hidden warnings

**/
Loading...
Robot
Hey Harshit, Quick input needed :
Perfect! 🎉 Now let's add the Features section with the FREE Shipping highlight!

📌 CODE #3: FEATURES SECTION (Free Shipping Highlighted)
WHERE TO ADD THIS:
In Shopify theme editor (same place)
Scroll down past your products section
Click "Add section"
Choose "Custom Liquid"
Copy EVERYTHING below
Paste it in the text box
Click "Save"
COPY THIS CODE:
{% comment %}
  TINARAA KIDS Features Section with Free Shipping
{% endcomment %}

<style>
  .tinaraa-features {
    padding: 4rem 2rem;
    background: linear-gradient(to bottom, rgba(243, 232, 255, 0.3), white);
  }
  
  .tinaraa-features__container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .tinaraa-features__header {
    text-align: center;
    margin-bottom: 3rem;
  }
  
  .tinaraa-features__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #f3e8ff;
    color: #9333ea;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-weight: 600;
    margin-bottom: 1rem;
  }
  
  .tinaraa-features__title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 1rem;
  }
  
  .tinaraa-features__subtitle {
    font-size: 1.125rem;
    color: #6b7280;
    max-width: 600px;
    margin: 0 auto;
  }
  
  .tinaraa-features__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
  }
  
  .tinaraa-feature-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
  }
  
  .tinaraa-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }
  
  .tinaraa-feature-card--highlight {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 2px solid #10b981;
  }
  
  .tinaraa-feature-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
  }
  
  .tinaraa-feature-card__icon--purple {
    background: #f3e8ff;
  }
  
  .tinaraa-feature-card__icon--green {
    background: #d1fae5;
  }
  
  .tinaraa-feature-card__icon--pink {
    background: #fce7f3;
  }
  
  .tinaraa-feature-card__content h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
  }
  
  .tinaraa-feature-card__content p {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
  }
  
  .tinaraa-feature-card--highlight h3 {
    color: #065f46;
  }
  
  .tinaraa-feature-card--highlight p {
    color: #047857;
  }
  
  @media (max-width: 768px) {
    .tinaraa-features__title {
      font-size: 2rem;
    }
  }
</style>

<div class="tinaraa-features">
  <div class="tinaraa-features__container">
    <div class="tinaraa-features__header">
      <div class="tinaraa-features__badge">
        <span>✨</span>
        <span>Why Choose TINARAA</span>
      </div>
      <h2 class="tinaraa-features__title">Where Little Dreams Come True</h2>
      <p class="tinaraa-features__subtitle">
        One-stop solution for kids fashion at very affordable pricing with high-quality products
      </p>
    </div>
    
    <div class="tinaraa-features__grid">
      <div class="tinaraa-feature-card">
        <div class="tinaraa-feature-card__icon tinaraa-feature-card__icon--purple">
          ❤️
        </div>
        <div class="tinaraa-feature-card__content">
          <h3>Quality First</h3>
          <p>Premium materials that last</p>
        </div>
      </div>
      
      <div class="tinaraa-feature-card tinaraa-feature-card--highlight">
        <div class="tinaraa-feature-card__icon tinaraa-feature-card__icon--green">
          🚚
        </div>
        <div class="tinaraa-feature-card__content">
          <h3>FREE Shipping</h3>
          <p>On all orders, always!</p>
        </div>
      </div>
      
      <div class="tinaraa-feature-card">
        <div class="tinaraa-feature-card__icon tinaraa-feature-card__icon--purple">
          🏆
        </div>
        <div class="tinaraa-feature-card__content">
          <h3>Trendy Designs</h3>
          <p>Latest styles for kids</p>
        </div>
      </div>
      
      <div class="tinaraa-feature-card">
        <div class="tinaraa-feature-card__icon tinaraa-feature-card__icon--pink">
          ✨
        </div>
        <div class="tinaraa-feature-card__content">
          <h3>Ages 1-16</h3>
          <p>Perfect fit for all sizes</p>
        </div>
      </div>
    </div>
  </div>
</div>
✅ WHAT YOU SHOULD SEE:
After saving, you'll see 4 feature boxes with "FREE Shipping" highlighted in green! 💚

Great progress! 3 sections done! Now tell me:

"Done! Show me Code #4" for the CSS styling (makes everything purple!)
OR "I see the features!" and we'll continue!
Feb 19, 08:45 AM

Rollback
Rollback

Copy
"Done! Show me Code #4" for the CSS styling (makes everything purple!)

Feb 19, 08:53 AM

Copy
Robot
Hey Harshit, Quick input needed :
Ask Question
Agent will continue working after your reply
Excellent! 🎉 Now let's add the CSS to make everything purple and beautiful! This one is added differently - in the code editor.

📌 CODE #4: PURPLE THEME STYLING (CSS)
⚠️ IMPORTANT: Different Process for CSS
This code goes in a different place - not Custom Liquid!

STEP-BY-STEP:
STEP 1: Go to Code Editor
In the theme editor, look at TOP LEFT
Click the 3 dots menu (⋮)
Click "Edit code"
✅ You're now in the code editor (looks different - file list on left)

STEP 2: Create CSS File
On the left sidebar, find "Assets" folder
Click "Add a new asset" (button near top)
Choose "Create a blank file"
In the popup, name it exactly: tinaraa-custom-styles.css
Click "Add asset"
✅ Empty CSS file created!

STEP 3: Paste CSS Code
Copy EVERYTHING below and paste in that empty CSS file:

/* TINARAA KIDS Custom Styles for Shopify Dawn Theme */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* Override Dawn theme fonts with Poppins */
body,
.button,
.product-card,
.header,
.footer {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Purple brand colors */
:root {
  --color-tinaraa-purple: #9333ea;
  --color-tinaraa-pink: #ec4899;
  --color-tinaraa-purple-light: #f3e8ff;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #9333ea, #ec4899);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #7e22ce, #db2777);
}

/* Button overrides for purple theme */
.button--primary,
.shopify-payment-button__button,
.product-form__submit {
  background: linear-gradient(to right, #9333ea, #ec4899) !important;
  color: white !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 1rem 2rem !important;
  font-weight: 600 !important;
  transition: all 0.3s !important;
}

.button--primary:hover,
.shopify-payment-button__button:hover,
.product-form__submit:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(147, 51, 234, 0.3) !important;
}

/* Product cards styling */
.product-card {
  border-radius: 1rem !important;
  overflow: hidden;
  transition: all 0.3s;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

/* Free shipping badge */
.tinaraa-free-shipping-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #065f46;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.875rem;
  border: 2px solid #10b981;
}

/* Price styling */
.price {
  color: var(--color-tinaraa-purple) !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
}

/* Header customization */
.header {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

/* Footer customization */
.footer {
  background: linear-gradient(135deg, #581c87, #831843);
  color: white;
}

.footer a {
  color: #e9d5ff;
  transition: color 0.2s;
}

.footer a:hover {
  color: white;
}

/* Announcement bar for promo */
.announcement-bar {
  background: linear-gradient(90deg, #9333ea, #ec4899, #9333ea);
  color: white;
  font-weight: 600;
}

/* Product page enhancements */
.product__title {
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: #1f2937 !important;
}

.product-form__input {
  border-radius: 0.5rem !important;
  border: 2px solid #e5e7eb !important;
}

.product-form__input:focus {
  border-color: var(--color-tinaraa-purple) !important;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1) !important;
}

/* Cart drawer customization */
.cart-drawer {
  border-left: 3px solid var(--color-tinaraa-purple);
}

.cart__checkout-button {
  background: linear-gradient(to right, #9333ea, #ec4899) !important;
  border-radius: 9999px !important;
}

/* Collection page grid */
.collection-grid {
  gap: 2rem;
}

/* Smooth animations */
* {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .product__title {
    font-size: 1.75rem !important;
  }
  
  .button--primary {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.875rem !important;
  }
}
Click "Save" (top right)

STEP 4: Link the CSS to Your Theme
Now we need to connect this CSS file:

Still in "Edit code" view
On left sidebar, find "Layout" folder
Click on "theme.liquid"
Press Ctrl+F (or Cmd+F on Mac) to search
Type: </head> and press Enter
It will highlight the </head> tag (usually near line 100-200)
Click to create a new line ABOVE </head>
Paste this line exactly:
{{ 'tinaraa-custom-styles.css' | asset_url | stylesheet_tag }}