Sticky Navigation Bar On Debut Theme [SOLUTION]

  • ramzan
  • March 12, 2022
  • 1 min read

Follow below steps to add sticky navigation bar in your debut theme of shopify. Go to Theme -> Action -> Layout -> theme.liquid Find </head> closing head tag and just above it paste the below code. <!– Debut theme sticky header :: start –> <style> #shopify-section-header { position: sticky; position: -webkit-sticky; top: 0; z-index: 9; […]

Read More

Follow Below steps to embed a youtube video in your shopify store with autoplay, and loop. Go to customize Click on Add section Select Custom Liquid or Custom HTML Paste below code in the input box in the right sidebar. Replace the ID of your video which is just after embed/ and after playlist= <style> […]

Read More

Follow Below steps to add “Add to Cart” button on collection page. Go to theme -> Action -> Edit Code -> Snippets -> product-card.liquid Paste below code at the end of this file. <!– cart button on collection page :: starts –> <style> .collection-cart-btn { display: none; } .collection-grid-section .collection-cart-btn { display: block; } </style> […]

Read More

Follow Below steps to add “Add to Cart” button on collection page. Go to theme -> Action -> Edit Code -> Snippets -> product-thumbnail.liquid Paste below code at the line mentioned in the video. If you wanted to hide quantity input box then replace type=”number” with type=”hidden” <form method=”post” action=”/cart/add”> <input type=”hidden” name=”id” value=”{{ product.variants.first.id […]

Read More

How to Create a Product Image Slider on Dawn Theme

  • ramzan
  • February 20, 2022
  • 6 min read

Follow Below steps to create product image slider in shopify dawn theme: Go to theme -> Action -> Edit Code -> Layout -> theme.liquid Find </head> and paste below code just above this close head tag <!– CSS –> <link rel=”stylesheet” href=”https://unpkg.com/flickity@2/dist/flickity.min.css”> <!– JavaScript –> <script src=”https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js”></script> 3. Open Sections -> main-product.liquid and find below […]

Read More

Go to header.liquid file. Go to dashboard of shopify store Go to themes -> Actions -> Edit code Open Sections -> header.liquid Go to line: 495 and line: 497 Delete the previous code from the files: icon-cart-empty.liquid and icon-cart.liquid Copy below code and paste in both those files. <style> svg g { fill: red; } […]

Read More

How to Create Product Slider in Shopify Dawn Theme

  • ramzan
  • January 7, 2022
  • 3 min read

Follow Below steps to create product slider in shopify dawn theme: Go to theme -> Action -> Edit Code -> Sections Create section and name it product-slider Paste below code in this new file product-slider.liquid Save changes. <style> .dawn-product-slider { max-width: 1600px; margin: auto; padding: 0 20px; padding-bottom: 32px; margin-top: 55px; } .dawn-product-slider img { […]

Read More

1. Open footer.php file Go to wordpress dashboard Click on Appearance -> Theme Editor -> Footer.php 2. Paste below code just above </body> close body tag. <!– Footer sticky Ad :: starts –> <div class=’NR-Ads jhfdiuh0′ id=’NR-Ads’> <div class=’NR-Ads-close’ onclick=’document.getElementById(“NR-Ads”).style.display=”none”‘><svg viewBox=’0 0 512 512′ xmlns=’http://www.w3.org/2000/svg’><path d=’M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 […]

Read More

1. Go to Themes -> Actions -> Edit code -> Sections 2. Create new file collection-slider.liquid in Sections Copy the code of collection.liquid file and paste complete code to new file collection-slider.liquid 3. Replace this code: {%- assign product_limit = section.settings.grid | times: section.settings.rows -%} Replace with below: {%- assign product_limit = 12 -%} 4. […]

Read More