Need to make a Text Circle with an informational button

Need to make a Text Circle with an informational button

eilarva
Shopify Partner
11 0 2

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.

 

text circle with informational button.png

Misty Eilar
Owner of Eilar Virtual Assistant
Replies 13 (13)

namphan
Shopify Partner
405 47 70

Hi @eilarva,

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

I will help you check it

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
eilarva
Shopify Partner
11 0 2

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. 

Misty Eilar
Owner of Eilar Virtual Assistant
namphan
Shopify Partner
405 47 70

Hi @eilarva,

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

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
eilarva
Shopify Partner
11 0 2

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

Misty Eilar
Owner of Eilar Virtual Assistant
namphan
Shopify Partner
405 47 70

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%;
}

 

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
eilarva
Shopify Partner
11 0 2

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.

Misty Eilar
Owner of Eilar Virtual Assistant
namphan
Shopify Partner
405 47 70

Hi @eilarva,

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

Screenshot.png

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
eilarva
Shopify Partner
11 0 2

I want to recreate the concept of this FAQ

Misty Eilar
Owner of Eilar Virtual Assistant
namphan
Shopify Partner
405 47 70

Hi @eilarva,

I don't understand, what does request mean

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
eilarva
Shopify Partner
11 0 2

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

Misty Eilar
Owner of Eilar Virtual Assistant
namphan
Shopify Partner
405 47 70

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

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
eilarva
Shopify Partner
11 0 2

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. 

Misty Eilar
Owner of Eilar Virtual Assistant
namphan
Shopify Partner
405 47 70

Hi @eilarva,

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

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com