Need help in adding a small section in shopify product page

RPTrix101
New Member
23 0 0

Hi i need help in creating this small section in shopify product page 

currently using Theme -  Dawn

this is the screenshot of the example, trying to achive something like this, please help

RPTrix101_0-1710319108407.png

 

Replies 8 (8)

Dan-From-Ryviu
Shopify Partner
7525 1451 1449

Hi @RPTrix101 

You can try to add icon with text section 

- Helpful? Like or Accept solution!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

JasmeetVT14313
Shopify Partner
96 18 23

Hello @RPTrix101 

Try using "Icon with Text" block and then choose the layout to "Vertical"

JasmeetVT14313_0-1710319843910.png


Please hit Like and mark it as solution if it helps.

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com

BrainStation23
Shopify Partner
260 43 41

Hi @RPTrix101 
You can follow these steps to achieve your result 
Go to online store->Customize->product page->add block->Add icon with text
And then click the icon with text and select Layout to Vertical

Screenshot 2024-03-13 145940.png

Screenshot 2024-03-13 150027.png

  



Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com

BrainStation23
Shopify Partner
260 43 41

Hi @RPTrix101 . You can add Icon with text block in product page of theme editor. You can view the following screenshot.

Capture.PNG

Also make first heading empty. Let us know if you need any help.

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com
BrainStation23
Shopify Partner
260 43 41

@RPTrix101. Also make the layout to Vertical. Here is another screenshot for you.

Capture.PNG

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com
RPTrix101
New Member
23 0 0

How to insert it in a small section , like a box ?

BrainStation23
Shopify Partner
260 43 41

Add the following code in your base.css or Custom Css of Theme Editor.

 

.product__info-wrapper .icon-with-text {
padding: 1rem;
background-color: #F2C;
}

 

Remember to change the background-color according to your need. Or you can tell us, we will update the code accordingly.

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com
RPTrix101
New Member
23 0 0

Actually its changing colors of all

Also need to decrease the font size and space between lines, so it does not takes up large area of viewport

RPTrix101_0-1710334764266.png

 

Another example of what i am trying to achieve

 

RPTrix101_1-1710334940135.png