How do you code your own colored boxes in general for a newbie?

Hello, I am brand new to coding, and am needing someone to point me in the right direction. Here are some custom boxes that they coded on some stores that I like, what is kind of the process/breakdown of creating boxes like this?

Do you know where I can learn coding specifically for shopify stores?

Thank you so much ,

Kirsten

:heart_eyes:

You’d need to know how to make those in html&css first if making from scratch.

One way if you have the mockup is to use a visual web design tool/service to visually recreate the mockup then export/study the html it generates. Webflow is one such service but html export is paywalled on the premium plan. https://www.google.com/search?q=webflow+alternative+free+html+export

Some visual design desktop software may have html generation for export like figma, sketch,etc either natively or through extensions or third party services.

Once you have that if the content of the html will be static in a shopify OS2.0 theme you can just add it directly into a custom-liquid section to output that html as is.

To make it dynamic requires much for effort and knowledge of liquid.

https://www.shopify.com/partners/blog/how-to-create-your-first-shopify-theme-section

Examples, most without styles, https://shopify.github.io/liquid-code-examples/

It looks like a reviews section which is common in some themes

The product-reviews-app sample has example code in it’s theme-app-extension folder

https://github.com/Shopify/product-reviews-sample-app/tree/main/theme-app-extension

Good hunting!

1 Like