What's your biggest current challenge? Have your say in Community Polls along the right column.

Redesign section "Text columns with images"

Redesign section "Text columns with images"

Kreamch
Excursionist
34 0 6

 

Dear Shopify Community,

I have a request for assistance with redesigning a section of my website (currently in my sandbox). Specifically, I’d like to update the "Text Column with Images" section. Below, you’ll find a picture showing the current layout and a design mockup illustrating the changes I’d like to make. I’ve outlined six specific edits; they are listed below and highlighted in red in the mockup image.

 

  • Button below Title: Move the button directly under the title (labeled “Step X”).
  • Collection Selectability: Make collections selectable; when a collection is selected, it should be highlighted with a larger image than the others.
  • Button Styling for Selected Collection: When a collection is selected, its “Capitalized Text” button should change to an “outlined button” style.
  • Consistent Button Sizing: Outlined button maintains a consistent size across all collections.
  • Text Display for Selected Collection: Display only the text associated with the selected collection.
  • Scrollbar Color: Change the scrollbar color to orange (#FF763D).

 

 

Currently, my primary concern is the mobile version, but I believe these edits could work well on the desktop version too, so I would like to keep that in mind. My theme is Pipeline, and you can find the preview here: Kream.ch 

I would really appreciate any support or suggestions you can offer. Thank you very much!

Screenshot 2024-11-14 at 17.01.57.pngScreenshot 2024-11-15 at 00.42.43.png

Replies 2 (2)

Moeed
Shopify Partner
6346 1721 2079

Hey @Kreamch 

 

Almost all of these would require some liquid and html changes in your section and theme files, so without the access I can only help you out only with the one that require CSS so,

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

 

<style>
.custom-scrollbar__track {
    background: #FF763D !important;
}
</style>

 

RESULT:

Moeed_0-1731601270478.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


Mehran_Ali
Shopify Partner
439 56 68

Hi @Kreamch 

 

The work you are asking for here needs professional help so I suggest you hire an expert.

I can also do it for you if you consider feel free to ask

-If this solution helps you, kindly LIKE THIS REPLY and MARK AS A SOLUTION OR

Buying Me A Coffee.

-If you need an expert Shopify developer for customization and development, feel free to contact me.


Email: Mehran.ali5300@gmail.com


WhatsApp: +92 343 0211536