Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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.
Hi @eilarva,
Do you have that page? Or is it just an idea?
I will help you check it
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.
Hi @eilarva,
Can you send me the page link? I will try to test it
https://www.bejoyly.com/pages/the-ultimate-50-multivitamin The two sections above reviews are my options. Thank you so much.
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%;
}
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.
Hi @eilarva,
you can change the color code here, it will display fine:
I want to recreate the concept of this FAQ
Hi @eilarva,
I don't understand, what does request mean
In the photo above it shows the circles in multiple rows. Plus a popup box for the answer. Is this possible?
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
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.
Hi @eilarva,
You can also email me the information, I will help you check everything 😊
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025