Categories v1

Posted on: 17/04/2025
Updated on: 17/04/2025
Code Preview
How to add your shopify Code
<div class='section-template--16651111629049__1663859377890f7915-settings'>
    <div class='circle-slider-wrapper-template--16651111629049__1663859377890f7915'>
     <div class='swiper circle-slider-template--16651111629049__1663859377890f7915 preview'>
      <div class='swiper-wrapper'>
       <div class='circle-item-template--16651111629049__1663859377890f7915 swiper-slide'>
        <a class='circle-icon-template--16651111629049__1663859377890f7915' href='/products/snow-peak-titanium-single-wall-cup'>
         <img alt='' src='//section.store/cdn/shop/products/mug.jpg?v=1663855357'/>
        </a>
        <p class='circle-text-template--16651111629049__1663859377890f7915'>
         Mugs
        </p>
       </div>
       <div class='circle-item-template--16651111629049__1663859377890f7915 swiper-slide'>
        <a class='circle-icon-template--16651111629049__1663859377890f7915' href='/products/5-panel-hat'>
         <img alt='' src='//section.store/cdn/shop/files/5-panel-hat_4ee20a27-8d5a-490e-a2fc-1f9c3beb7bf5.webp?v=1663859540'/>
        </a>
        <p class='circle-text-template--16651111629049__1663859377890f7915'>
         Hats
        </p>
       </div>
       <div class='circle-item-template--16651111629049__1663859377890f7915 swiper-slide'>
        <a class='circle-icon-template--16651111629049__1663859377890f7915' href='/products/camp-stool'>
         <img alt='' src='//section.store/cdn/shop/files/campstool-1.webp?v=1663859592'/>
        </a>
        <p class='circle-text-template--16651111629049__1663859377890f7915'>
         Stools
        </p>
       </div>
       <div class='circle-item-template--16651111629049__1663859377890f7915 swiper-slide'>
        <a class='circle-icon-template--16651111629049__1663859377890f7915' href='/products/canvas-lunch-bag'>
         <img alt='' src='//section.store/cdn/shop/files/Lunchbag_Khaki_Front_8ae0e1f4-407d-4ac0-89e6-961b306ef351.jpg?v=1663859624'/>
        </a>
        <p class='circle-text-template--16651111629049__1663859377890f7915'>
         Bags
        </p>
       </div>
       <div class='circle-item-template--16651111629049__1663859377890f7915 swiper-slide'>
        <a class='circle-icon-template--16651111629049__1663859377890f7915' href='/products/foraker-canvas-coat'>
         <img alt='' src='//section.store/cdn/shop/files/woolfill-jacket_6c39ae23-c0c8-4821-85f4-4b5d64333c62.webp?v=1663859701'/>
        </a>
        <p class='circle-text-template--16651111629049__1663859377890f7915'>
         Jackets
        </p>
       </div>
       <div class='circle-item-template--16651111629049__1663859377890f7915 swiper-slide'>
        <div class='circle-icon-template--16651111629049__1663859377890f7915'>
         <img alt='' src='//section.store/cdn/shop/products/1_637c75a8-33f9-4c38-aebf-5a3dc31162dc.png?v=1706026914'/>
        </div>
        <p class='circle-text-template--16651111629049__1663859377890f7915'>
         Throws
        </p>
       </div>
       <div class='circle-item-template--16651111629049__1663859377890f7915 swiper-slide'>
        <div class='circle-icon-template--16651111629049__1663859377890f7915'>
         <img alt='' src='//section.store/cdn/shop/products/2_c196c504-dfa8-41e9-b151-1094c4962009.png?v=1706026914'/>
        </div>
        <p class='circle-text-template--16651111629049__1663859377890f7915'>
         Rugs
        </p>
       </div>
      </div>
     </div>
    </div>
   </div>
   <style>
       .circle-icon-template--16651111629049__1663859377890f7915,
       .circle-icon-template--16651111629049__1663859377890f7915 img,
       .circle-icon-template--16651111629049__1663859377890f7915 svg {
         border-radius: 50%;
       }
   
       .circle-icon-template--16651111629049__1663859377890f7915 img,
       .circle-icon-template--16651111629049__1663859377890f7915 svg {
         border-radius: 50%;
       }
       
     </style><style>
       .circle-icon-template--16651111629049__1663859377890f7915 {
         background-image: linear-gradient(133deg, rgba(250, 220, 54, 1) 11%, rgba(254, 98, 146, 1) 49%, rgba(250, 220, 54, 1) 87%);
         border: 0px;
         padding: 2px;
       }
     </style><style>@font-face {
     font-family: 'Josefin Sans';
     font-weight: 400;
     font-style: normal;
     font-display: swap;
     src: url('//section.store/cdn/fonts/josefin_sans/josefinsans_n4.c8300d95fd4ce72542a6efba9c682da40d144fba.woff2?h1=c2VjdGlvbi5zdG9yZQ&h2=c2VjdGlvbi1zdG9yZS1hcHAuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=1081bc13bac779d73b77022741d8b8608aa5451af6a05907fc023625940c00f1') format('woff2'),
          url('//section.store/cdn/fonts/josefin_sans/josefinsans_n4.ed7230a86e75b34b997bd12a5e1b87fcaf7104d8.woff?h1=c2VjdGlvbi5zdG9yZQ&h2=c2VjdGlvbi1zdG9yZS1hcHAuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=3f19a3e11bab2423756ce410220df09957f15affd53a78fa0ec435e5660aa636') format('woff');
   }
   
   
     .section-template--16651111629049__1663859377890f7915 {
       border-top: solid #000000 0px;
       border-bottom: solid #000000 0px;
       margin-top: 0px;
       margin-bottom: 0px;
       overflow: hidden;
     }
     
     .section-template--16651111629049__1663859377890f7915-settings {
       margin: 0 auto;
       padding-top: 27px;
       padding-bottom: 27px;
       padding-left: 1.5rem;
       padding-right: 1.5rem;
     }
   
     .circle-slider-wrapper-template--16651111629049__1663859377890f7915 {
       margin: 0px auto;
       width: 100%;
     }
   
     .circle-slider-template--16651111629049__1663859377890f7915 {
       margin: 0px auto;
       width: 100% !important;
       max-width: fit-content !important;
       overflow:visible;
     }
   
     .circle-item-template--16651111629049__1663859377890f7915 {
       width: 100%;
       max-width: 66px;
       box-sizing: border-box;
     }
   
     .circle-item-template--16651111629049__1663859377890f7915:last-child {
       margin-right: 0!important;
     }
   
     .circle-icon-template--16651111629049__1663859377890f7915 {
       margin: 0px auto;
       display: block;
       width: 66px;
       height: 66px;
       border: 2px solid #000000;
       overflow: hidden;
     }
   
     .circle-icon-template--16651111629049__1663859377890f7915 img,
     .circle-icon-template--16651111629049__1663859377890f7915 svg {
       display: block;
       width: 100%;
       height: 100%;
       object-fit: cover;
       border: 4px solid #ffffff;
     }
   
     .circle-icon-template--16651111629049__1663859377890f7915 svg {
       background-color: #DADADA;
     }
   
     .circle-text-template--16651111629049__1663859377890f7915 {
       margin: 0;
       margin-top: 6px;
       font-size: 10px;
       color: #121212;
       line-height: 130%;
       text-transform: unset;
       word-wrap: break-word;
       text-align: center;
     }
   
     .circle-item-template--16651111629049__1663859377890f7915 {
       box-sizing: border-box !important;
     }
   
     @media screen and (min-width: 1024px) {
       
       .section-template--16651111629049__1663859377890f7915 {
         margin-top: 0px;
         margin-bottom: 0px;
       }
       
       .section-template--16651111629049__1663859377890f7915-settings {
         padding: 0 5rem;
         padding-top: 36px;
         padding-bottom: 36px;
         padding-left: 0rem;
         padding-right: 0rem;
       }
   
       .circle-item-template--16651111629049__1663859377890f7915 {
         max-width: 100px;
       }
   
       .circle-icon-template--16651111629049__1663859377890f7915 {
         width: 100px;
         height: 100px;
       }
   
       .circle-icon-template--16651111629049__1663859377890f7915 img,
       .circle-icon-template--16651111629049__1663859377890f7915 svg {
         border: 4px solid #ffffff;
       }
   
       .circle-text-template--16651111629049__1663859377890f7915 {
         margin-top: 8px;
         font-size: 12px;
       }
   
       .circle-slider-wrapper-template--16651111629049__1663859377890f7915 {
         max-width: 100%;
       }
       
     }</style><style>
     .circle-slider-template--16651111629049__ss_instagram_menu_NWJX7Q.preview .swiper-wrapper {
       display: flex;
       align-items: top;
       justify-content: space-between;
       overflow: hidden;
     }
   
     .circle-slider-template--16651111629049__ss_instagram_menu_NWJX7Q.preview .circle-item-template--16651111629049__ss_instagram_menu_NWJX7Q {
       width: 40%;
     }
   
     .circle-slider-template--16651111629049__ss_instagram_menu_NWJX7Q.preview .circle-item-template--16651111629049__ss_instagram_menu_NWJX7Q:not(:first-child) {
       margin-left: 16px;
     } 
   
     @media(min-width: 1024px) {
       .circle-slider-template--16651111629049__ss_instagram_menu_NWJX7Q.preview .circle-item-template--16651111629049__ss_instagram_menu_NWJX7Q:not(:first-child) {
         margin-left: 16px;
       } 
   
     .circle-slider-template--16651111629049__ss_instagram_menu_NWJX7Q {
       overflow:hidden;
     }
   
       .circle-slider-template--16651111629049__ss_instagram_menu_NWJX7Q.preview .circle-item-template--16651111629049__ss_instagram_menu_NWJX7Q {
         width: 15%;
       }
     }
   </style><style>
     .circle-slider-template--16651111629049__1663859377890f7915.preview .swiper-wrapper {
       display: flex;
       align-items: top;
       justify-content: space-between;
       overflow: hidden;
     }
   
     .circle-slider-template--16651111629049__1663859377890f7915.preview .circle-item-template--16651111629049__1663859377890f7915 {
       width: 40%;
     }
   
     .circle-slider-template--16651111629049__1663859377890f7915.preview .circle-item-template--16651111629049__1663859377890f7915:not(:first-child) {
       margin-left: 16px;
     } 
   
     @media(min-width: 1024px) {
       .circle-slider-template--16651111629049__1663859377890f7915.preview .circle-item-template--16651111629049__1663859377890f7915:not(:first-child) {
         margin-left: 16px;
       } 
   
     .circle-slider-template--16651111629049__1663859377890f7915 {
       overflow:hidden;
     }
   
       .circle-slider-template--16651111629049__1663859377890f7915.preview .circle-item-template--16651111629049__1663859377890f7915 {
         width: 15%;
       }
     }
   </style>

Other Elements

Copyright Jumping Monkey © 2025 All Rights Reserved
bookmark