Enabling a css element to be clickable - Shopify

anonymous
July 5, 2022
216 views
2 votes
4 Answers

I have a store area in Shopify, which has CSS elements

And I want to make them clickable this is my CSS code

I tried all sorts of tips written here And I did not succeed This is
for my store And I would love to get a solution
And I want to make them clickable this is my CSS code

Has anyone been able to solve this problem?

I have an area on the site And in this area there are icons Mouse over the icons has a moving animation I want the icons to be clickable And that they will link to the link within the site

#shopByBodyPart {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#shopByBodyPart * {
  margin: 0;
  padding: 0;
}

#shopByBodyPart dt {
  width: 100%;
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 60px;
}

#shopByBodyPart dd {
  width: 140px;
  height: 140px;
  color: #6a6a6a;
  font-weight: lighter;
  text-align: center;
  font-size: 14px;
  padding-top: 120px;
  margin: 0 40px 50px;
  cursor: pointer;
  position: relative;
  opacity: 0.6;
  transition: opacity 0.3s;
}

#shopByBodyPart dd:hover {
  opacity: 1;
}

#shopByBodyPart dd::before {
  content: "";
  width: 100px;
  height: 100px;
  display: block;
  position: absolute;
  top: 0;
  left: 20px;
  transform: scale(0.8);
  background: url("https://cdn.shopify.com/s/files/1/0032/9370/8323/files/massage-part-all-min.png?6661") no-repeat 0 0;
  background-size: 500px auto;
}

#shopByBodyPart dd:nth-of-type(1)::before {
  background-position: -300px 0
}

#shopByBodyPart dd:nth-of-type(2)::before {
  background-position: 0 0
}

#shopByBodyPart dd:nth-of-type(3)::before {
  background-position: -400px 0
}

#shopByBodyPart dd:nth-of-type(4)::before {
  background-position: -200px 0
}

#shopByBodyPart dd:nth-of-type(5)::before {
  background-position: -100px 0
}

#shopByBodyPart dd:nth-of-type(1):hover::before {
  animation: steps-8 1s steps(1) forwards;
}

#shopByBodyPart dd:nth-of-type(2):hover::before {
  animation: steps-8 1s steps(1) forwards;
}

#shopByBodyPart dd:nth-of-type(3):hover::before {
  animation: steps-6 0.6s steps(1) forwards;
}

#shopByBodyPart dd:nth-of-type(4):hover::before {
  animation: steps-13 1s steps(1) forwards;
}

#shopByBodyPart dd:nth-of-type(5):hover::before {}

@media screen and (max-width: 540px) {
  #shopByBodyPart dd {
    width: 120px;
    margin: 0 20px 20px;
  }
  #shopByBodyPart dd::before {
    left: 10px;
  }
}


/** animation part start */

@keyframes steps-8 {
  0% {
    background-position-y: 0;
  }
  12.5% {
    background-position-y: -100px;
  }
  25% {
    background-position-y: -200px;
  }
  37.5% {
    background-position-y: -300px;
  }
  50% {
    background-position-y: -400px;
  }
  62.5% {
    background-position-y: -500px;
  }
  75% {
    background-position-y: -600px;
  }
  87.5% {
    background-position-y: -700px;
  }
  100% {
    background-position-y: -800px;
  }
}

@keyframes steps-16 {
  0% {
    background-position-y: 0
  }
  6.25% {
    background-position-y: -100px
  }
  12.5% {
    background-position-y: -200px
  }
  18.75% {
    background-position-y: -300px
  }
  25% {
    background-position-y: -400px
  }
  31.25% {
    background-position-y: -500px
  }
  37.5% {
    background-position-y: -600px
  }
  43.75% {
    background-position-y: -700px
  }
  50% {
    background-position-y: -800px
  }
  56.25% {
    background-position-y: -900px
  }
  62.5% {
    background-position-y: -1000px
  }
  68.75% {
    background-position-y: -1100px
  }
  75% {
    background-position-y: -1200px
  }
  81.25% {
    background-position-y: -1300px
  }
  87.5% {
    background-position-y: -1400px
  }
  93.75% {
    background-position-y: -1500px
  }
  100% {
    background-position-y: -1600px
  }
}

@keyframes steps-13 {
  0% {
    background-position-y: 0
  }
  7.6923076923076925% {
    background-position-y: -100px
  }
  15.384615384615385% {
    background-position-y: -200px
  }
  23.076923076923077% {
    background-position-y: -300px
  }
  30.76923076923077% {
    background-position-y: -400px
  }
  38.46153846153846% {
    background-position-y: -500px
  }
  46.15384615384615% {
    background-position-y: -600px
  }
  53.84615384615385% {
    background-position-y: -700px
  }
  61.53846153846154% {
    background-position-y: -800px
  }
  69.23076923076923% {
    background-position-y: -900px
  }
  76.92307692307692% {
    background-position-y: -1000px
  }
  84.61538461538461% {
    background-position-y: -1100px
  }
  92.3076923076923% {
    background-position-y: -1200px
  }
  100% {
    background-position-y: -1300px
  }
}

@keyframes steps-6 {
  0% {
    background-position-y: 0
  }
  16.666666666666668% {
    background-position-y: -100px
  }
  33.333333333333336% {
    background-position-y: -200px
  }
  50% {
    background-position-y: -300px
  }
  66.66666666666667% {
    background-position-y: -400px
  }
  83.33333333333334% {
    background-position-y: -500px
  }
  100% {
    background-position-y: -600px
  }
}

<dl id="shopByBodyPart">
  <dt>SHOP BY BODY PART</dt>
  <dd><a href="https://www.naipo.co.il/collections/neck-and-shoulder">Neck &amp; Shoulder</a></dd>
  <dd><a href="https://www.naipo.co.il/collections/back-massager">Back</a></dd>
  <dd><a href="https://www.naipo.co.il/collections/back-massager">Waist</a></dd>
  <dd><a href="https://www.naipo.co.il/collections/leg-foot-massager
  ">Leg &amp; Foot</a></dd>
  <dd><a href="https://www.naipo.co.il/collections/full-body-massager">Full Body</a></dd>
</dl>

Tags: css shopify

Answers

- PsiKai
- July 5, 2022 at 1:16 am
- 0 votes
0
a tags can link to external sites, where you need to put the full url, but when linking to the same site, the relative path is appropriate.

Provide a relative path to your other html files where you want to navigate when the user clicks the icons.

Ex:
```
<dd><a href="https://www.naipo.co.il/collections/back-massager">Waist</a></dd>
```
Might be:
```
<dd><a href="./collections/back-massager.html">Waist</a></dd>
```
That all depends on where your html files are located. Change the path to match the folder structure. Read up on html file paths if you get stuck.
Login or Signup to reply.

You have put your <a> elements inside the <dd> elements. Just reverse them so that the <dd> is inside the <a>, like this:

#shopByBodyPart {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#shopByBodyPart * {
  margin: 0;
  padding: 0;
}

#shopByBodyPart dt {
  width: 100%;
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 60px;
}

#shopByBodyPart dd {
  width: 140px;
  height: 140px;
  color: #6a6a6a;
  font-weight: lighter;
  text-align: center;
  font-size: 14px;
  padding-top: 120px;
  margin: 0 40px 50px;
  cursor: pointer;
  position: relative;
  opacity: 0.6;
  transition: opacity 0.3s;
}

#shopByBodyPart dd:hover {
  opacity: 1;
}

#shopByBodyPart dd::before {
  content: "";
  width: 100px;
  height: 100px;
  display: block;
  position: absolute;
  top: 0;
  left: 20px;
  transform: scale(0.8);
  background: url("https://cdn.shopify.com/s/files/1/0032/9370/8323/files/massage-part-all-min.png?6661") no-repeat 0 0;
  background-size: 500px auto;
}

#shopByBodyPart dd:nth-of-type(1)::before {
  background-position: -300px 0
}

#shopByBodyPart dd:nth-of-type(2)::before {
  background-position: 0 0
}

#shopByBodyPart dd:nth-of-type(3)::before {
  background-position: -400px 0
}

#shopByBodyPart dd:nth-of-type(4)::before {
  background-position: -200px 0
}

#shopByBodyPart dd:nth-of-type(5)::before {
  background-position: -100px 0
}

#shopByBodyPart dd:nth-of-type(1):hover::before {
  animation: steps-8 1s steps(1) forwards;
}

#shopByBodyPart dd:nth-of-type(2):hover::before {
  animation: steps-8 1s steps(1) forwards;
}

#shopByBodyPart dd:nth-of-type(3):hover::before {
  animation: steps-6 0.6s steps(1) forwards;
}

#shopByBodyPart dd:nth-of-type(4):hover::before {
  animation: steps-13 1s steps(1) forwards;
}

#shopByBodyPart dd:nth-of-type(5):hover::before {}

@media screen and (max-width: 540px) {
  #shopByBodyPart dd {
    width: 120px;
    margin: 0 20px 20px;
  }
  #shopByBodyPart dd::before {
    left: 10px;
  }
}


/** animation part start */

@keyframes steps-8 {
  0% {
    background-position-y: 0;
  }
  12.5% {
    background-position-y: -100px;
  }
  25% {
    background-position-y: -200px;
  }
  37.5% {
    background-position-y: -300px;
  }
  50% {
    background-position-y: -400px;
  }
  62.5% {
    background-position-y: -500px;
  }
  75% {
    background-position-y: -600px;
  }
  87.5% {
    background-position-y: -700px;
  }
  100% {
    background-position-y: -800px;
  }
}

@keyframes steps-16 {
  0% {
    background-position-y: 0
  }
  6.25% {
    background-position-y: -100px
  }
  12.5% {
    background-position-y: -200px
  }
  18.75% {
    background-position-y: -300px
  }
  25% {
    background-position-y: -400px
  }
  31.25% {
    background-position-y: -500px
  }
  37.5% {
    background-position-y: -600px
  }
  43.75% {
    background-position-y: -700px
  }
  50% {
    background-position-y: -800px
  }
  56.25% {
    background-position-y: -900px
  }
  62.5% {
    background-position-y: -1000px
  }
  68.75% {
    background-position-y: -1100px
  }
  75% {
    background-position-y: -1200px
  }
  81.25% {
    background-position-y: -1300px
  }
  87.5% {
    background-position-y: -1400px
  }
  93.75% {
    background-position-y: -1500px
  }
  100% {
    background-position-y: -1600px
  }
}

@keyframes steps-13 {
  0% {
    background-position-y: 0
  }
  7.6923076923076925% {
    background-position-y: -100px
  }
  15.384615384615385% {
    background-position-y: -200px
  }
  23.076923076923077% {
    background-position-y: -300px
  }
  30.76923076923077% {
    background-position-y: -400px
  }
  38.46153846153846% {
    background-position-y: -500px
  }
  46.15384615384615% {
    background-position-y: -600px
  }
  53.84615384615385% {
    background-position-y: -700px
  }
  61.53846153846154% {
    background-position-y: -800px
  }
  69.23076923076923% {
    background-position-y: -900px
  }
  76.92307692307692% {
    background-position-y: -1000px
  }
  84.61538461538461% {
    background-position-y: -1100px
  }
  92.3076923076923% {
    background-position-y: -1200px
  }
  100% {
    background-position-y: -1300px
  }
}

@keyframes steps-6 {
  0% {
    background-position-y: 0
  }
  16.666666666666668% {
    background-position-y: -100px
  }
  33.333333333333336% {
    background-position-y: -200px
  }
  50% {
    background-position-y: -300px
  }
  66.66666666666667% {
    background-position-y: -400px
  }
  83.33333333333334% {
    background-position-y: -500px
  }
  100% {
    background-position-y: -600px
  }
}

<dl id="shopByBodyPart">
  <dt>SHOP BY BODY PART</dt>
  <a href="https://www.naipo.co.il/collections/neck-and-shoulder"><dd>Neck &amp; Shoulder</dd></a>
  <a href="https://www.naipo.co.il/collections/back-massager"><dd>Back</dd></a>
  <a href="https://www.naipo.co.il/collections/back-massager"><dd>Waist</dd></a>
  <a href="https://www.naipo.co.il/collections/leg-foot-massager
  "><dd>Leg &amp; Foot</dd></a>
  <a href="https://www.naipo.co.il/collections/full-body-massager"><dd>Full Body</dd></a>
</dl>

Use a <span> tag to include an icon.

Example:

I. HTML:

<dl>
    <dt>SHOP BY BODY PART</dt>
    <dd>
        <a href="/" id="example-link">
            <span id="example-icon"></span>
            Opt. 1
        </a>
    </dd>
</dl>

II. CSS:

a#example-link > span#example-icon::after {
    background: url("https://cdn.shopify.com/s/files/1/0032/9370/8323/files/massage-part-all-min.png?6661") no-repeat 0 0;
    background-size: 500px auto;
}

Make the icons internal to the a tags instead. Then they will be part of the link

#shopByBodyPart {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#shopByBodyPart * {
  margin: 0;
  padding: 0;
}

#shopByBodyPart dt {
  width: 100%;
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 60px;
}

#shopByBodyPart dd {
  width: 140px;
  height: 140px;
  color: #6a6a6a;
  font-weight: lighter;
  text-align: center;
  font-size: 14px;
  padding-top: 120px;
  margin: 0 40px 50px;
  cursor: pointer;
  position: relative;
  opacity: 0.6;
  transition: opacity 0.3s;
}

#shopByBodyPart dd:hover {
  opacity: 1;
}

#shopByBodyPart dd>a{
  display:inline-block;
  position:relative;
}

#shopByBodyPart dd>a::before {
  content: "";
  width: 100px;
  height: 100px;
  display: block;
  /*position: absolute;
  top: 0;
  left: 20px;*/
  transform: scale(0.8);
  background: url("https://cdn.shopify.com/s/files/1/0032/9370/8323/files/massage-part-all-min.png?6661") no-repeat 0 0;
  background-size: 500px auto;
}

#shopByBodyPart dd:nth-of-type(1)>a::before {
  background-position: -300px 0
}

#shopByBodyPart dd:nth-of-type(2)>a::before {
  background-position: 0 0
}

#shopByBodyPart dd:nth-of-type(3)>a::before {
  background-position: -400px 0
}

#shopByBodyPart dd:nth-of-type(4)>a::before {
  background-position: -200px 0
}

#shopByBodyPart dd:nth-of-type(5)>a::before {
  background-position: -100px 0
}

#shopByBodyPart dd:nth-of-type(1)>a:hover::before {
  animation: steps-8 1s steps(1) forwards;
}

#shopByBodyPart dd:nth-of-type(2)>a:hover::before {
  animation: steps-8 1s steps(1) forwards;
}

#shopByBodyPart dd:nth-of-type(3)>a:hover::before {
  animation: steps-6 0.6s steps(1) forwards;
}

#shopByBodyPart dd:nth-of-type(4)>a:hover::before {
  animation: steps-13 1s steps(1) forwards;
}

#shopByBodyPart dd:nth-of-type(5)>a:hover::before {}

@media screen and (max-width: 540px) {
  #shopByBodyPart dd {
    width: 120px;
    margin: 0 20px 20px;
  }
  #shopByBodyPart dd>a::before {
    left: 10px;
  }
}


/** animation part start */

@keyframes steps-8 {
  0% {
    background-position-y: 0;
  }
  12.5% {
    background-position-y: -100px;
  }
  25% {
    background-position-y: -200px;
  }
  37.5% {
    background-position-y: -300px;
  }
  50% {
    background-position-y: -400px;
  }
  62.5% {
    background-position-y: -500px;
  }
  75% {
    background-position-y: -600px;
  }
  87.5% {
    background-position-y: -700px;
  }
  100% {
    background-position-y: -800px;
  }
}

@keyframes steps-16 {
  0% {
    background-position-y: 0
  }
  6.25% {
    background-position-y: -100px
  }
  12.5% {
    background-position-y: -200px
  }
  18.75% {
    background-position-y: -300px
  }
  25% {
    background-position-y: -400px
  }
  31.25% {
    background-position-y: -500px
  }
  37.5% {
    background-position-y: -600px
  }
  43.75% {
    background-position-y: -700px
  }
  50% {
    background-position-y: -800px
  }
  56.25% {
    background-position-y: -900px
  }
  62.5% {
    background-position-y: -1000px
  }
  68.75% {
    background-position-y: -1100px
  }
  75% {
    background-position-y: -1200px
  }
  81.25% {
    background-position-y: -1300px
  }
  87.5% {
    background-position-y: -1400px
  }
  93.75% {
    background-position-y: -1500px
  }
  100% {
    background-position-y: -1600px
  }
}

@keyframes steps-13 {
  0% {
    background-position-y: 0
  }
  7.6923076923076925% {
    background-position-y: -100px
  }
  15.384615384615385% {
    background-position-y: -200px
  }
  23.076923076923077% {
    background-position-y: -300px
  }
  30.76923076923077% {
    background-position-y: -400px
  }
  38.46153846153846% {
    background-position-y: -500px
  }
  46.15384615384615% {
    background-position-y: -600px
  }
  53.84615384615385% {
    background-position-y: -700px
  }
  61.53846153846154% {
    background-position-y: -800px
  }
  69.23076923076923% {
    background-position-y: -900px
  }
  76.92307692307692% {
    background-position-y: -1000px
  }
  84.61538461538461% {
    background-position-y: -1100px
  }
  92.3076923076923% {
    background-position-y: -1200px
  }
  100% {
    background-position-y: -1300px
  }
}

@keyframes steps-6 {
  0% {
    background-position-y: 0
  }
  16.666666666666668% {
    background-position-y: -100px
  }
  33.333333333333336% {
    background-position-y: -200px
  }
  50% {
    background-position-y: -300px
  }
  66.66666666666667% {
    background-position-y: -400px
  }
  83.33333333333334% {
    background-position-y: -500px
  }
  100% {
    background-position-y: -600px
  }
}

<dl id="shopByBodyPart">
  <dt>SHOP BY BODY PART</dt>
  <dd><a href="https://www.naipo.co.il/collections/neck-and-shoulder">Neck &amp; Shoulder</a></dd>
  <dd><a href="https://www.naipo.co.il/collections/back-massager">Back</a></dd>
  <dd><a href="https://www.naipo.co.il/collections/back-massager">Waist</a></dd>
  <dd><a href="https://www.naipo.co.il/collections/leg-foot-massager
  ">Leg &amp; Foot</a></dd>
  <dd><a href="https://www.naipo.co.il/collections/full-body-massager">Full Body</a></dd>
</dl>

Please signup or login to give your own answer.

Click here to cancel reply.

Enabling a css element to be clickable – Shopify

Answers