Customizing Your TokenGated Store: Make your community feel at home.

published on 01 August 2023
 Customize your Shopify Store with PERCS to elevate your brand and cater to your NFT community!
 Customize your Shopify Store with PERCS to elevate your brand and cater to your NFT community!

Customizing your Shopify store to make it unique and align with your brand is a crucial aspect of creating a memorable shopping experience for your customers. And that's why at PERCS we always look for ways to help brands to create the best web3 campaign for their communities.

In this blog, we will explore how to change the button on the bottom right of your Shopify store to fit your brand, creating a seamless experience for your NFT community.

How to Customize your Shopify store

Step 1: Accessing the Shopify Admin Panel

To begin customizing your Shopify store, log in to your Shopify account and navigate to the admin panel.

Step 2: Go to Online Store

Once you are in the admin panel, locate and click on the "Online Store" option from the left-hand menu.

Screenshot-2023-08-01-at-20.22.20-pgtr9

Step 3: Customize Your Store

Under the "Online Store" section, click on "Customize" to access the customization options for your store.

Frame-2121449215-9e5jz

Step 4: Editing the Products Section

After clicking on "Customize," you will be directed to the customization interface. From here, you will find various sections of your store that you can edit. To customize the button on the bottom right, navigate to the "Products" section.

home-ceck1
search-9il6n

Step 5: Add a Custom Liquid Code Snippet

Within the "Products" section, you can add a custom liquid code snippet to modify the appearance of the button. To do this, follow these steps:

  • Click on "Add block" to create a new block within the "Products" section.
  • Choose "Custom Liquid" from the available options. 
  • Paste the following liquid code snippet into the custom liquid block
custom-liquid-cmu9w

This is our code snippet, edit it by adding your logo in SVG format, then pasting it substituting the current <SVG> in the snippet.

<!-- PERCS block: This is for the PERCS Engage Discount button. -->
{% liquid
    assign percDiscount = false
    for tag in product.tags
      if tag contains 'perc: discount'
        assign percDiscount = true
      endif
    endfor
  %}
  
  {% if percDiscount %}
  
  <style>
        .fab {
          position: fixed;
          bottom: 20px;
          right: 20px;
          width: 56px;
          height: 56px;
          border-radius: 50%;
          background-color: white;
          z-index: 10;
        }

      </style>
      <a href="#" class="fab" onclick="showModal()">
        <svg style="cursor:pointer;" xmlns="http://www.w3.org/2000/svg" version="1.0" width="60px" height="60px" viewBox="0 0 1000.000000 1000.000000" preserveAspectRatio="xMidYMid meet">
    <g transform="translate(0.000000,1000.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
    <path d="M4725 9873 c-448 -23 -958 -127 -1391 -284 -1401 -507 -2500 -1637 -2969 -3054 -269 -814 -316 -1713 -133 -2560 362 -1675 1599 -3049 3233 -3590 814 -269 1713 -316 2560 -133 1675 362 3049 1599 3590 3233 269 814 316 1713 133 2560 -362 1675 -1599 3049 -3233 3590 -557 185 -1191 269 -1790 238z m549 -1105 c-3 -200 -10 -379 -15 -398 -16 -65 -64 -127 -121 -157 -76 -39 -179 -40 -259 -1 -31 16 -64 37 -74 48 -17 19 -16 21 36 83 l54 64 28 -24 c17 -14 42 -23 62 -23 93 0 94 4 102 420 l6 350 94 0 93 0 -6 -362z m718 246 c70 -15 131 -30 137 -33 10 -6 -15 -139 -29 -155 -5 -4 -74 6 -155 24 -80 18 -148 30 -151 28 -9 -9 -47 -198 -41 -204 3 -4 64 -20 133 -35 70 -16 129 -30 130 -32 4 -3 -33 -157 -38 -163 -3 -2 -65 9 -137 24 -91 20 -134 26 -136 18 -17 -55 -44 -201 -38 -206 5 -4 73 -21 152 -38 79 -18 146 -34 149 -36 2 -3 -4 -41 -14 -86 -14 -65 -20 -79 -33 -76 -9 3 -119 28 -246 56 -126 28 -230 52 -232 53 -2 3 194 899 202 923 2 8 35 5 112 -12 59 -13 165 -36 235 -50z m-1639 30 c127 -43 226 -205 262 -429 19 -114 19 -183 -1 -265 -40 -170 -164 -269 -324 -258 -159 12 -267 129 -327 357 -36 135 -38 318 -4 404 34 86 78 137 150 174 53 28 74 33 130 33 37 0 88 -7 114 -16z m-857 -283 c60 -27 119 -94 150 -170 44 -111 42 -174 -10 -291 -5 -12 34 -50 144 -144 83 -71 147 -132 143 -137 -4 -4 -45 -24 -90 -44 l-82 -37 -134 115 -133 115 -30 -16 c-16 -8 -31 -16 -33 -18 -2 -2 27 -66 63 -144 36 -77 66 -143 66 -146 0 -6 -141 -74 -155 -74 -7 0 -101 190 -210 423 -109 232 -200 426 -202 430 -6 10 282 147 332 157 53 11 130 3 181 -19z m3268 -21 c64 -25 139 -88 166 -141 11 -21 20 -40 20 -43 0 -4 -143 -86 -151 -86 -3 0 -13 16 -23 35 -11 20 -35 45 -53 56 -98 61 -231 -38 -304 -226 -56 -141 -49 -268 15 -310 28 -19 95 -25 138 -12 29 8 25 18 54 -135 5 -25 2 -27 -52 -38 -119 -25 -257 23 -325 114 -97 128 -84 303 39 540 68 132 166 224 272 257 50 15 148 9 204 -11z m712 -421 c110 -83 203 -155 208 -160 5 -5 -7 -31 -28 -61 -70 -101 -55 -97 -137 -35 l-73 55 -30 -41 c-233 -320 -429 -583 -436 -585 -15 -5 -141 100 -136 113 2 7 106 151 231 320 209 284 225 308 208 321 -10 7 -42 30 -70 51 -29 21 -53 42 -53 46 0 16 96 136 106 132 7 -2 101 -72 210 -156z m-4708 -10 c68 -34 123 -90 167 -170 22 -42 30 -70 33 -130 4 -67 1 -84 -21 -133 -15 -33 -53 -84 -88 -121 l-61 -64 92 -116 c51 -64 91 -117 89 -119 -2 -1 -34 -26 -71 -55 -37 -29 -72 -50 -78 -46 -16 10 -583 739 -584 752 -1 6 37 41 84 78 173 136 207 153 311 154 54 1 77 -4 127 -30z m5534 -781 c19 -29 42 -65 51 -79 l17 -26 -137 -93 c-76 -52 -148 -101 -160 -110 l-22 -17 60 -89 c32 -49 63 -90 69 -92 5 -2 74 41 152 95 79 55 148 102 155 106 8 5 30 -19 63 -69 29 -41 50 -77 48 -79 -19 -18 -772 -535 -778 -535 -9 0 -86 107 -96 134 -4 9 44 48 150 122 86 59 156 111 156 115 0 19 -116 188 -127 185 -6 -3 -80 -53 -164 -111 -83 -59 -155 -102 -158 -97 -3 5 -26 39 -50 76 -26 40 -40 71 -35 76 7 7 764 537 770 540 1 0 17 -24 36 -52z m-6559 -90 c34 -22 64 -42 66 -44 2 -2 -33 -59 -78 -127 -45 -68 -81 -126 -81 -130 0 -7 141 -104 164 -113 10 -4 38 29 87 103 39 59 73 109 74 111 6 6 135 -83 135 -93 0 -6 -24 -46 -53 -90 -30 -44 -62 -92 -71 -107 l-18 -27 92 -61 92 -60 17 23 c10 12 50 70 90 129 l71 108 70 -46 c42 -28 67 -51 63 -58 -54 -90 -268 -391 -277 -390 -20 2 -781 505 -778 515 4 15 262 399 268 399 3 0 33 -19 67 -42z m3517 -499 c140 -17 199 -55 170 -109 -12 -23 -34 -22 -36 1 0 8 -2 19 -2 25 -4 30 -284 56 -456 43 -409 -30 -806 -207 -1049 -468 -42 -44 -46 -54 -37 -72 14 -25 8 -33 -19 -24 -27 8 -44 41 -37 70 9 35 170 181 278 252 181 119 404 212 604 252 191 39 421 51 584 30z m-949 -84 c-18 -8 -54 -15 -80 -15 -103 0 -221 -56 -221 -106 0 -13 5 -24 11 -24 5 0 7 -4 4 -10 -9 -14 -48 -13 -63 2 -18 18 -15 42 9 72 45 57 159 95 289 95 83 0 84 0 51 -14z m1034 -79 c122 -71 132 -80 80 -69 -70 14 -362 7 -470 -11 -218 -37 -407 -97 -590 -188 -112 -55 -125 -65 -104 -73 8 -3 60 17 114 44 311 153 680 229 973 201 152 -15 189 -23 219 -52 27 -25 103 -147 103 -165 0 -6 -13 -14 -30 -18 -65 -14 -158 -128 -194 -239 -4 -12 -12 -16 -24 -11 -42 17 -78 15 -117 -5 -24 -12 -41 -16 -43 -10 -9 25 -95 130 -127 154 -84 64 -192 84 -273 51 -113 -48 -196 -199 -217 -396 l-6 -56 -167 -61 c-92 -34 -259 -95 -371 -137 -113 -41 -206 -74 -207 -72 -6 6 -54 198 -60 241 -5 39 -4 48 7 44 21 -7 77 -104 84 -147 3 -20 10 -43 15 -51 9 -13 11 -13 20 0 5 8 10 24 10 36 0 36 60 143 98 174 20 16 51 35 69 41 45 15 41 31 -12 53 -79 32 -133 110 -159 229 -4 15 -11 27 -16 27 -8 0 -30 -61 -30 -85 0 -14 -40 -78 -45 -73 -5 4 38 177 53 218 6 14 39 53 74 85 212 199 475 315 858 379 14 2 106 3 205 2 l180 -1 100 -59z m3444 -107 c32 -89 32 -92 14 -109 -10 -9 -72 -66 -138 -125 -66 -60 -121 -112 -123 -117 -2 -4 84 -8 191 -8 l194 0 32 -86 c17 -48 29 -89 27 -92 -3 -2 -144 1 -314 8 l-308 13 -159 -61 c-88 -33 -167 -63 -176 -67 -15 -6 -23 10 -76 161 -2 6 72 39 167 75 l172 64 226 217 c125 120 229 218 232 218 3 0 21 -41 39 -91z m-7298 -13 c72 -22 123 -52 159 -92 35 -40 69 -108 70 -137 0 -15 7 -17 63 -12 113 10 331 24 334 21 1 -1 -13 -45 -31 -97 l-34 -94 -173 -12 c-96 -6 -175 -11 -176 -12 -6 -4 -22 -65 -18 -71 2 -4 68 -31 145 -61 77 -30 140 -58 139 -64 0 -5 -13 -44 -28 -85 -22 -59 -32 -74 -46 -72 -25 5 -848 322 -857 330 -9 9 95 294 123 339 28 45 106 111 143 122 47 14 136 12 187 -3z m2195 -284 c17 -61 39 -89 84 -112 22 -11 40 -24 40 -29 0 -5 -14 -14 -30 -21 -42 -17 -88 -73 -96 -115 -6 -32 -20 -53 -29 -44 -2 2 4 24 12 49 17 52 53 93 94 110 39 16 37 26 -11 50 -22 11 -47 31 -56 45 -23 35 -46 117 -32 113 6 -2 17 -23 24 -46z m2127 -3 c25 -13 77 -60 77 -69 0 -4 -12 -12 -26 -18 -15 -7 -33 -31 -46 -59 -28 -64 -20 -150 25 -268 20 -49 38 -111 42 -137 15 -101 -48 -214 -152 -271 l-50 -26 -35 37 c-40 42 -78 96 -78 109 0 5 21 24 46 41 89 64 106 163 54 325 -51 159 -34 268 50 325 37 25 61 27 93 11z m-751 -66 c24 -16 47 -31 52 -35 5 -3 -3 -21 -19 -40 -76 -90 -84 -179 -29 -321 78 -198 51 -321 -97 -438 l-40 -32 -45 44 c-25 24 -55 59 -66 78 l-21 34 24 19 c89 70 123 126 123 206 0 43 -8 68 -49 147 -76 147 -75 244 2 335 35 40 38 42 80 36 23 -3 62 -18 85 -33z m341 -175 c14 -11 18 -36 21 -138 7 -199 65 -358 172 -471 101 -105 219 -135 322 -81 l42 22 7 -28 c14 -47 9 -667 -5 -780 -24 -189 -51 -259 -134 -358 -168 -198 -470 -304 -865 -304 -124 0 -310 14 -320 24 -2 2 4 18 14 36 14 29 14 40 4 74 -7 23 -16 62 -21 87 -18 100 -104 220 -184 258 -24 12 -85 28 -136 36 -122 20 -141 32 -185 110 -51 91 -75 168 -75 237 0 109 48 174 202 275 54 34 102 72 108 82 17 32 12 103 -10 139 -26 42 -76 72 -120 72 -39 0 -154 -52 -209 -94 -41 -31 -51 -32 -51 -8 0 9 -15 76 -33 148 l-33 131 111 41 c461 169 606 222 614 222 5 0 12 -21 16 -47 28 -190 147 -383 273 -445 37 -18 64 -23 123 -23 66 0 81 4 118 28 124 82 185 225 183 432 0 84 -6 132 -25 205 l-25 95 20 18 c24 20 57 22 81 5z m1165 -325 c14 -19 16 -89 3 -97 -5 -3 -25 1 -45 9 -28 12 -36 21 -36 40 0 30 -20 33 -27 5 -4 -16 -14 -20 -49 -20 -24 0 -44 4 -44 8 0 16 68 73 96 81 35 10 85 -3 102 -26z m-5293 -33 c226 -28 341 -46 380 -61 117 -44 185 -139 185 -260 0 -129 -48 -223 -139 -273 -83 -45 -158 -44 -534 3 -175 21 -320 41 -322 43 -1 1 3 41 9 88 10 75 13 85 31 84 11 0 165 -18 341 -39 279 -34 327 -37 363 -27 99 30 105 158 9 208 -21 11 -631 94 -689 94 -9 0 -10 21 -4 82 4 46 9 86 11 90 7 11 6 12 359 -32z m7805 33 c0 -4 7 -66 16 -138 28 -230 4 -335 -102 -435 -99 -93 -221 -133 -414 -133 -140 -1 -201 15 -285 73 -100 69 -138 152 -165 365 -11 87 -19 159 -17 161 4 3 901 112 935 113 17 1 32 -2 32 -6z m-2392 -29 c29 -20 30 -92 1 -154 -21 -44 -21 -44 -31 -20 -5 13 -15 32 -23 40 -11 13 -12 24 -5 51 6 18 10 49 10 66 0 37 13 42 48 17z m120 -76 c36 -36 -12 -182 -72 -219 -32 -19 -91 -26 -100 -11 -3 5 6 15 20 23 53 28 114 132 114 195 0 26 19 31 38 12z m-305 -48 c65 -24 102 -60 92 -89 -8 -26 -31 -32 -80 -21 -52 12 -126 12 -145 0 -12 -8 -11 -10 5 -10 39 0 188 -58 198 -77 5 -10 18 -25 29 -34 19 -15 19 -16 -9 -35 -21 -14 -53 -20 -123 -24 -94 -5 -94 -5 -58 -18 35 -12 37 -15 26 -35 -26 -49 -134 -144 -199 -175 -67 -32 -183 -65 -193 -54 -3 3 -6 43 -6 88 l0 83 42 12 c138 37 203 115 220 262 13 118 33 146 105 147 23 0 66 -9 96 -20z m-2204 -326 c40 -51 26 -84 -54 -129 -257 -145 -314 -313 -191 -568 62 -130 109 -167 226 -182 131 -16 190 -46 239 -124 63 -98 70 -161 20 -174 -28 -7 -56 21 -100 101 -36 65 -53 79 -75 61 -21 -17 -17 -36 23 -103 66 -112 113 -142 183 -118 32 12 37 5 20 -27 -11 -21 -79 -51 -116 -51 -58 0 -117 54 -169 152 -16 32 -36 60 -44 63 -17 7 -41 -12 -41 -33 0 -28 78 -147 124 -190 43 -39 58 -47 116 -55 25 -3 25 -3 -5 -16 -17 -7 -53 -11 -82 -9 -65 6 -110 38 -155 114 -18 31 -43 68 -54 82 -19 23 -24 24 -38 13 -9 -7 -16 -21 -16 -29 0 -29 79 -150 125 -190 48 -43 46 -58 -6 -47 -42 9 -92 56 -133 123 -43 73 -61 127 -82 249 -10 59 -33 142 -60 210 -76 195 -89 251 -88 398 0 108 4 140 22 188 42 114 124 207 249 281 75 45 132 49 162 10z m-2647 -410 c61 -20 123 -75 156 -138 24 -46 27 -61 27 -156 -1 -114 -20 -185 -68 -244 l-24 -29 -76 48 -76 48 26 33 c34 45 52 99 53 157 0 62 -39 107 -93 107 -51 0 -86 -40 -148 -168 -87 -178 -163 -241 -289 -242 -81 0 -150 30 -201 87 -56 62 -72 114 -67 225 3 82 7 102 36 161 18 37 38 67 43 67 10 0 149 -90 149 -97 0 -2 -12 -22 -27 -44 -38 -57 -44 -143 -13 -181 16 -22 30 -28 59 -28 50 0 84 37 152 169 29 57 71 124 93 149 74 83 183 112 288 76z m7043 -65 c236 -28 432 -52 434 -55 9 -9 -32 -331 -48 -370 -51 -132 -137 -189 -279 -188 -72 1 -90 5 -150 35 -62 31 -120 88 -134 131 -4 10 -53 -3 -193 -49 l-188 -62 8 91 c4 50 9 97 12 104 3 8 78 37 168 66 l163 51 5 36 c2 20 0 38 -4 41 -5 4 -75 14 -156 24 -81 10 -149 18 -149 19 -1 1 3 44 9 95 l11 92 30 -5 c17 -3 224 -28 461 -56z m-6791 -674 c29 -98 30 -112 10 -119 -132 -40 -871 -236 -879 -232 -9 3 -58 157 -52 162 5 5 875 242 889 243 12 1 21 -15 32 -54z m6606 -263 c212 -157 387 -287 389 -288 2 -2 -11 -43 -30 -93 -32 -88 -33 -89 -63 -85 -17 2 -236 22 -486 45 -250 22 -456 41 -458 43 -4 5 45 144 57 165 7 10 25 11 97 2 49 -6 94 -11 100 -11 6 0 15 15 21 33 6 17 24 69 41 114 l31 82 -83 60 -84 61 31 84 c18 51 35 82 41 79 6 -4 184 -135 396 -291z m-2850 147 c-99 -87 -259 -144 -483 -174 -199 -26 -463 -13 -581 28 -31 11 -33 14 -21 31 13 17 18 17 87 5 48 -9 151 -14 303 -14 201 1 243 4 335 23 129 28 261 72 337 111 32 17 60 30 63 30 3 0 -15 -18 -40 -40z m-1058 -208 c41 -11 128 -25 194 -31 65 -7 121 -13 123 -15 6 -6 -159 -123 -279 -198 -108 -68 -130 -98 -45 -63 l38 16 41 -37 c83 -76 106 -115 106 -183 0 -86 -26 -100 -187 -100 -242 0 -327 54 -394 248 -41 120 -30 140 153 264 82 55 151 105 154 109 7 12 10 12 96 -10z m856 -30 c26 -26 63 -74 81 -106 l35 -57 -27 -20 c-15 -11 -27 -26 -27 -34 0 -11 12 -7 43 14 84 58 129 75 207 80 88 5 144 -14 203 -70 39 -37 46 -63 25 -90 -24 -28 -419 -288 -441 -289 -81 -4 -105 14 -209 168 -51 76 -137 196 -191 268 -96 128 -97 130 -70 132 104 10 216 26 258 38 28 7 54 14 58 14 5 1 29 -21 55 -48z m-3351 -187 c57 -120 103 -222 103 -225 0 -6 -828 -396 -851 -402 -8 -2 -209 425 -209 443 0 11 131 71 143 67 6 -2 38 -64 73 -138 40 -86 67 -133 76 -131 7 2 52 22 100 44 l86 40 -55 117 c-30 64 -57 121 -59 127 -4 10 119 74 142 74 6 0 34 -52 64 -115 29 -64 57 -118 62 -121 10 -6 198 81 198 91 0 3 -30 69 -66 147 -37 78 -63 143 -58 145 5 2 36 16 69 32 33 16 65 28 70 27 6 -2 56 -101 112 -222z m5978 -472 l320 -201 48 75 48 76 32 -19 c66 -40 107 -68 107 -76 0 -6 -270 -437 -284 -454 -1 -1 -34 18 -74 43 -81 51 -80 41 -14 142 30 45 33 55 21 66 -8 7 -152 100 -321 205 -170 106 -310 196 -313 201 -7 12 86 152 99 147 6 -3 155 -95 331 -205z m-5661 -48 c78 -104 135 -189 130 -193 -5 -5 -179 -135 -386 -289 l-378 -281 -56 75 c-31 41 -55 76 -53 78 2 1 137 101 299 221 162 120 303 225 312 234 16 15 11 24 -69 130 l-86 115 23 15 c13 9 42 30 64 48 23 18 46 32 51 32 6 1 73 -82 149 -185z m5366 -498 c187 -170 339 -314 337 -320 -5 -15 -101 -125 -109 -125 -12 -1 -688 619 -688 630 0 14 103 129 113 126 4 -1 161 -141 347 -311z m-541 -142 c121 -56 257 -208 334 -372 26 -56 32 -82 35 -160 4 -88 3 -96 -28 -158 -56 -115 -168 -180 -295 -172 -102 6 -195 58 -297 167 -136 145 -198 268 -206 407 -4 73 -1 88 23 143 43 94 124 160 225 182 58 12 131 -1 209 -37z m-4155 -55 c53 -20 328 -198 324 -209 -2 -4 -124 -181 -273 -393 -181 -259 -275 -386 -285 -383 -8 2 -75 45 -147 95 -139 96 -179 139 -209 223 -51 141 71 308 223 308 l32 0 -19 43 c-38 83 -19 181 50 261 74 84 179 103 304 55z m3603 -691 c101 -238 180 -435 175 -439 -4 -4 -39 -20 -78 -37 l-70 -29 -219 179 c-227 186 -242 197 -233 182 9 -14 186 -437 190 -452 3 -11 -110 -67 -150 -75 -13 -2 -386 859 -377 872 2 4 35 20 74 35 l70 27 223 -183 c123 -101 228 -187 234 -191 7 -4 -31 93 -83 216 -52 122 -99 232 -103 244 -8 20 -2 24 73 56 45 19 84 33 87 30 2 -2 86 -198 187 -435z m-2809 276 c127 -65 179 -163 154 -293 -8 -44 -242 -664 -256 -679 -2 -1 -42 12 -89 29 l-86 31 19 47 c257 644 257 645 202 701 -58 58 -142 48 -188 -23 -12 -17 -75 -167 -140 -332 -64 -165 -118 -301 -119 -303 -1 -1 -41 12 -88 29 -79 29 -85 33 -77 53 128 329 244 613 263 643 94 147 239 181 405 97z m626 -154 c110 -16 201 -32 203 -34 5 -5 -136 -939 -143 -945 -2 -2 -42 1 -89 8 -68 10 -85 16 -85 30 0 9 25 178 55 376 30 197 55 366 55 375 0 12 -25 19 -122 34 -174 25 -157 12 -142 109 8 45 14 83 14 85 0 2 12 1 28 -2 15 -3 117 -19 226 -36z m741 -38 c91 -46 161 -155 191 -296 20 -97 20 -312 -1 -390 -48 -182 -157 -278 -314 -280 -64 -1 -85 3 -132 27 -85 41 -85 42 -32 129 l46 76 36 -23 c113 -74 205 -7 233 169 32 207 -53 436 -161 436 -33 0 -88 -26 -114 -54 l-24 -26 -51 72 c-47 66 -50 73 -36 89 25 28 90 70 131 85 55 20 177 13 228 -14z"/>
    <path d="M4178 8867 c-57 -48 -73 -130 -53 -279 20 -151 56 -241 120 -296 78 -69 169 -26 196 92 22 101 -10 297 -69 413 -46 89 -134 121 -194 70z"/>
    <path d="M3272 8586 c-63 -30 -64 -17 14 -182 60 -128 56 -126 135 -82 71 39 92 124 51 204 -41 80 -113 101 -200 60z"/>
    <path d="M2564 8143 c-17 -10 -41 -26 -54 -35 l-23 -17 102 -131 102 -130 28 22 c53 44 66 69 66 130 0 48 -5 62 -31 95 -64 79 -127 101 -190 66z"/>
    <path d="M4165 6538 c-2 -7 -9 -30 -15 -50 -11 -38 -45 -72 -81 -83 -25 -8 -24 -32 1 -40 29 -9 25 -17 -30 -59 -47 -36 -59 -54 -44 -69 4 -3 27 12 53 34 69 61 78 64 94 32 8 -16 17 -40 21 -55 9 -40 24 -34 37 14 12 45 66 108 93 108 9 0 16 7 16 15 0 8 -7 15 -16 15 -27 0 -81 63 -93 108 -12 41 -28 55 -36 30z"/>
    <path d="M1332 6460 c-20 -12 -41 -38 -53 -64 -37 -84 -39 -82 101 -137 69 -27 130 -49 137 -49 15 0 43 84 43 129 0 105 -136 177 -228 121z"/>
    <path d="M5040 5280 c-11 -11 -20 -32 -20 -46 l0 -26 19 23 c23 28 21 29 45 -41 80 -239 310 -321 485 -175 31 27 43 74 19 76 -7 1 -49 1 -93 0 -106 -3 -175 12 -260 53 -82 41 -165 114 -143 127 7 5 23 9 36 9 13 0 20 4 17 10 -11 18 -84 11 -105 -10z"/>
    <path d="M8593 5562 l-283 -36 0 -36 c0 -19 11 -58 24 -87 19 -39 35 -58 72 -79 42 -25 61 -29 144 -32 223 -9 375 72 388 208 7 74 -3 100 -36 99 -15 -1 -154 -18 -309 -37z"/>
    <path d="M8656 4654 c-14 -36 -6 -129 14 -161 53 -87 183 -93 243 -11 23 31 42 139 26 149 -6 3 -63 11 -127 18 -64 7 -124 14 -133 17 -9 3 -19 -2 -23 -12z"/>
    <path d="M8316 3748 c-14 -39 -25 -72 -24 -73 7 -5 290 -36 294 -32 3 3 -195 148 -232 170 -7 4 -21 -20 -38 -65z"/>
    <path d="M7034 2331 c-63 -27 -82 -114 -46 -209 40 -106 185 -278 264 -315 20 -9 57 -17 83 -17 38 0 52 5 75 28 39 40 46 88 24 159 -32 103 -156 264 -250 326 -43 29 -116 42 -150 28z"/>
    <path d="M2985 2263 c-67 -17 -107 -90 -86 -156 11 -33 82 -96 126 -113 8 -3 39 31 79 87 36 51 66 95 66 98 -1 3 -24 22 -53 42 -53 37 -97 51 -132 42z"/>
    <path d="M2751 1913 c-20 -10 -43 -34 -54 -56 -17 -33 -18 -44 -8 -78 9 -31 24 -47 67 -76 31 -21 58 -32 63 -27 37 42 122 177 115 183 -82 68 -130 82 -183 54z"/>
    </g>
    </svg>
      </a>
  
    <script>
      function showModal() {
        //alert('Image clicked!');
        if (window.PERCS) {
          window.PERCS.openProductModal({{product.id}})
        }
      }
    </script>
  {% endif %}
  <!-- PERCS block: This is for the PERCS Engage Discount button. END -->

Step 6: Save and Publish After adding the custom liquid code snippet, make sure to save your changes and publish your modifications to make them live on your store.

Recording-2023-08-01-at-19.31.48-2i1h5

Customization Tips:

  1. To make the button match your brand, you can customize the CSS styles within the <style> tag. Adjust properties like background color, border radius, width, and height to fit your brand's color scheme and design.
  2. Replace the SVG code (inside the <SVG> tag) with your custom SVG icon or image to create a more personalized button that represents your brand or NFT community.

Remember to test your changes and ensure they appear as expected on different devices and screen sizes. Customizing your tokengated store's button will not only make your NFT community feel at home but also enhance the overall brand experience and encourage more engagement on your store!

Thank you for choosing PERCS, and if you have any questions please send us a message to [email protected] or to our Social Media channels.

Read more