Need to make a Text Circle with an informational button

[eilarva]

I am working on a page where I need a White text box shaped as a circle with an informational black circle button with a white plus sign. It is to provide more information for multiple topics. Then a view more button. Basically recreate this image. It is made on a custom theme, but based off of Dawn Theme.

[namphan]

Hi @eilarva,

Do you have that page? Or is it just an idea?

I will help you check it

[eilarva]

Right now I have the rest of the page created, This is the only section I need. Right now we are using the icon section with no icon and just a title and information. So it needs to be created. 

We think it should be possible, maybe with a custom FAQ. I am working off someone else's custom setup, so it's a bit more difficult than normal. 

I tried other custom FAQ options that I knew about, but they were conflicting with what is already here. 

[namphan]

Hi @eilarva,

Can you send me the page link? I will try to test it

[eilarva]

https://www.bejoyly.com/pages/the-ultimate-50-multivitamin The two sections above reviews are my options. Thank you so much.

[namphan]

Hi @eilarva,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

#shopify-section-template--22988965839136__section_faq_QywrER .faq__item__question {
    width: 120px;
    height: 120px;
    border-radius: 100%;
    margin-left: 0;
    border: 1px solid var(--COLOR-BORDER);
    padding: 10px !important;
    min-width: 120px;
    text-align: center;
}
#shopify-section-template--22988965839136__section_faq_QywrER .faq__item__question .icon {
    top: 0px;
    background: #8dcbe9;
    border-radius: 100%;
}

[eilarva]

Thank you. I love the circles. Is there a way to make them a horizontal line instead of vertical? I updated with the colors I need except the circle buttons attached. You can see what I am trying to do in the photo above. I am so close thanks to your help.

[namphan]

Hi @eilarva,

you can change the color code here, it will display fine:

[eilarva]

I want to recreate the concept of this FAQ

[namphan]

Hi @eilarva,

I don't understand, what does request mean

[eilarva]

In the photo above it shows the circles in multiple rows. Plus a popup box for the answer. Is this possible?

[namphan]

Hi @eilarva,

Please add code:

#shopify-section-template--22988965839136__section_faq_yNJ7cA .faq__nav > div {
    display: flex;
}

For popups, it will be a complex request and will require a lot of changes in the code. Therefore, I cannot guide you in detail for it.

If you want, you can hire a professional or I will help you check it

[eilarva]

Thank you! That helped a lot. Sorry to be such a pain. If I had been the main designer, this would have been much easier. Any help is appreciated. I might have to hire a more seasoned coder to help get to the final step. This is the last of what is needed. 

[namphan]

Hi @eilarva,

You can also email me the information, I will help you check everything 😊