How can I recreate a WordPress theme in Shopify successfully?

[pitchplan]

We currently have a WordPress site (https://pitchplan.com/startup-home/), the client wants to recreate this theme in Shopify and I've done a pretty good job so far (pitchplan.myshopify.com), I am just stuck with a few things and need someone to help provide some guidance.

1. I am trying to give the menu the same effect as WP theme, but for some reason the gradient linear css doesn't work very well in Shopify.  I had the same problem with the headers and buttons but as you can see, I was able to do it with some css coding.  However, I can't seem to correctly code the menu no matter what I do.  I can't even get it to remove the underline with .header__menu-item:active, .header__menu-item:hover.  I just need assistance with the active and hover code for the menu.

2. In WP, I can use widgets to create the number counter thing you see in the "about us" section of the WP link.  However, in Shopify, there isn't such a widget.  I found only 1 option and it was commercial for 4 numbers and I would need to pay monthly for impressions.  Does anyone know if or how I can achieve this animation in Shopify (without paying)?

3. I tried using the clients section template, it looks great but I can't animate it, or move the logo icons as I would in WP.  Is there a way to animate this?

4. I used a video as background, and I need to adjust the video to fill the section.  Again, I couldn't figure out how to amend this.

5. Lastly, I've seen videos of people being able to manually adjust the column sizes by simply dragging.  This doesn't seem to work for me.  I researched and discovered that it is due to my antivirus extension on my browser.  But even if I disable it, I still can't adjust the column width in the footer.  Do I need to code the column widths in the footer as well and if so, how can I make the 1st column 40% and the other 4 split 60% evenly?

Thank you in advance

[amorlett]

most likely you are putting your CSS in the wrong spot as far as the dawn theme goes, to recreate something like this you really have to understand which theme is actually being used in the code base otherwise nothing is going to work correctly. I really suggest you look up either coding phaze, uxhacks,weeklyhow or coding with jan  on youtube

[pitchplan]

I created a custom.css.  All the other code in it works fine.  Even the code for the menu I can change to any other colour but a linear one.

[amorlett]

liner codes work in my dev site maybe its the browser your using or polyfill ?

[Ahsan_ANC]

Hi @pitchplan these are a lot of changes. We will solve them one by one. please share your store address and the first change that you want.

[pitchplan]

That's very kind of you.  The store is https://pitchplan.myshopify.com/

We can start with gradient linear for the menu active and hover like the WP

[Ahsan_ANC]

please share preview password

[pitchplan]

ownewg

[Ahsan_ANC]

1. Go to Online Store-> Theme->Edit code
2. Asset-> base.css ->paste the below code at the bottom of the file.

.header__menu-item:hover span {
    text-decoration: none;
	background-position: right;
}
.header__active-menu-item{
   text-decoration: none;
}
.header__menu-item span {
    background-image: linear-gradient(-90deg,#5cc2ed 0,#5d62ee 25%,#c298d3 50%,currentColor 51%,currentColor 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    background-position: left;
    transition: background-position .6s ease;
}

[pitchplan]

OMG!!! It works.  You are amazing.  Is it possible to actually have it on active too and not just hover?

[pitchplan]

I added .header__menu-item span:active but I don't think Shopify recognises this

[Ahsan_ANC]

replace the previous code with this one

.header__menu-item .header__active-menu-item, .header__menu-item:hover span {
    text-decoration: none;
	background-position: right;
}
.header__active-menu-item{
   text-decoration: none;
}
.header__menu-item span {
    background-image: linear-gradient(-90deg,#5cc2ed 0,#5d62ee 25%,#c298d3 50%,currentColor 51%,currentColor 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    background-position: left;
    transition: background-position .6s ease;
}

[pitchplan]

Did that but unfortunately, no change. 😞

[Ahsan_ANC]

it is changed on my side

[pitchplan]

Amazing.  Cleared my cache now its showing.  Thank you.

The next problems are just about animated widgets.  I was looking for a number counter widget and a clients scrolling widget like is on my WP page.  Do you have any ideas?

[Ahsan_ANC]

these ones?

[pitchplan]

yes sir.  And the client logos underneath

[pitchplan]

any luck?

[Ahsan_ANC]

Working on it.

[Ahsan_ANC]

If you want you can add me as a collaborator so I can add code directly to your store.

[pitchplan]

you really are so kind. I've invited you as a staff.  Let me know if you need anything

[Ahsan_ANC]

Thanks.

I will create these sections tonight and let you know.

[pitchplan]

thank you

[Ahsan_ANC · Accepted solution]

Hi @pitchplan i have added these two sections.

[pitchplan]

OMG.  Thank you so much.  I am forever in your debt.  I really appreciate all your help