Solved

How to recolor a background specifically for 1 of the text blocks from the "product info" section

DRAWandCARE
Pathfinder
116 0 15

Hello everyone!

 

I'm currently using Dawn theme version 13.0.1 for my website, and I'm wondering if it's possible to create a yellow background specifically for one of the text blocks from the "product information" section of the product page, similar to the features section below (please refer to the screenshot!)

 

My website: https://www.drawandcare.com

One of my product pades: Custom Watercolor Cat Portrait – DRAWandCARE (https://www.drawandcare.com/products/mini-custom-watercolor-cat-portrait-watercolor-pet-portrait)

 

So, I need this block from the Product Info section have a light yellow background:

 

Screenshot_17.png

 

... like this section have (but narrower, of course):

 

Screenshot_18.png

 

Any assistance on this matter would be greatly appreciated! Thanks!

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
7538 1454 1452

This is an accepted solution.

Hi @DRAWandCARE 

This is a Text block, so it is hard to add CSS to change the background color. I recommend you replace it with a Custom liqud block then add this code in it

<p style="margin-top: 25px;
    margin-bottom: 25px;
    background: rgb(255, 242, 215);
    padding: 10px calc(20px) 10px;"><strong>NEW OFFER: BUY 2 – SAVE 15%; BUY 3 OR MORE – SAVE 20%</strong></p>

Screenshot 2024-03-13 at 16.24.07.png

- Helpful? Like or Accept solution! - Buy me a coffee
- 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

View solution in original post

Replies 4 (4)

Dan-From-Ryviu
Shopify Partner
7538 1454 1452

This is an accepted solution.

Hi @DRAWandCARE 

This is a Text block, so it is hard to add CSS to change the background color. I recommend you replace it with a Custom liqud block then add this code in it

<p style="margin-top: 25px;
    margin-bottom: 25px;
    background: rgb(255, 242, 215);
    padding: 10px calc(20px) 10px;"><strong>NEW OFFER: BUY 2 – SAVE 15%; BUY 3 OR MORE – SAVE 20%</strong></p>

Screenshot 2024-03-13 at 16.24.07.png

- Helpful? Like or Accept solution! - Buy me a coffee
- 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

DRAWandCARE
Pathfinder
116 0 15

Thank you so much for such quick response! It worked to perfetion! 😍

tim_wilfreds
Tourist
11 0 1

LOVE your website, great job

 

The scrolling bar I've screenshotted - how did you do this??

 

 

Screenshot 2024-03-13 at 11.15.42.png

Thanks in advance

 

BW, 

Tim

 

wilfreds.shop

Tim Fisher, from wilfreds.shop
DRAWandCARE
Pathfinder
116 0 15

Hello, thank you very much for your kind words! 😊


Regarding the scrolling bar, I utilize the Section Store app, which offers a variety of both free and paid sections. Specifically, this section called Scrolling Features and I purchased it for a one-time fee of $9, with no additional monthly subscriptions required (all their paid sections can also be obtained for a one-time payment). This section offers several customization options, and the tech support team was incredibly helpful and responsive in providing me with all the extra details and features I needed for my site to customize. So check it out! 🙂

 

Screenshot_19.png