Cine Collect
The One Stop Shop for Film Junkies: an ecommerce site for movie merchandise made on WordPress.
Project Overview
This is my second WordPress project, and because I’m reinforcing what I learned from the previous WordPress project, I’ve started to optimize my workflow and gain new insight. We were tasked this time to create an ecommerce site, and I chose to use the same concept as my WordPress content site. I made a one stop shop for movie related merchandise, posters, and records. While you can’t actually purchase any of the products listed, you can still get the full online shopping experience.
Challenges I Faced:
- I struggled with customizing the theme I used. The theme had a style set across various blocks, and when I added a product block the color was blending in with the background. The background I had changed, but I couldn’t figure out how to change the block’s color. I changed the site’s style to reflect the design I wanted, and it seemed to do the trick.
- I struggled with spacing elements with margins and padding. There were times I couldn’t get the content or products to look evenly spaced.
- I couldn’t figure how to add and edit variations like sizing the way I wanted it. It took a minute of playing around with the individual product variation to get a grasp of the concept.
What I’m Proud of:
- I’m proud of my overall layout as I took inspiration from a movie poster website that I liked. I was able to take advantage of customizing the color scheme and uploading my own font to create a design I loved and felt reflected an actual online movie merchandise store.
- I’m proud I was able to utilize a new skill set with WordPress, even if it’s not directly altering code. WordPress is a tad bit easier, and I’ll be able to continue to use it to create other sites, just like this one (my portfolio)
- I’m proud of how I utilized the WooCommerce plugin across my site, even creating a coupon code that only applies to a specific category of products, and works at checkout.
Let’s walk through the process
The home page includes the site’s logo and custom banner I designed on Canva. There’s three columns with each category the store offers. At the bottom of the homepage, there’s a FAQ section, including information about returns and refunds, to reflect a real website. In the footer, there’s a link to an actual returns and refunds page.
Another section on my homepage: to celebrate Record Day, I included a 15% off coupon applicable only on Records at checkout.
Navigate through the product selection all at once or by categories, depending on what you’re looking for. Not sure where it could be? That’s what the search bar is for. The product listing accurately displays what a product would look like on a real ecommerce site including description, quantity, size, and colors.
This is your cart, even showing you what products are currently new in store.
Things I Learned:
- I learned how to use the WooCommerce plugin, being able to display products using different patterns on my homepage and even editing them on the shop page.
- I learned, at least for me, to start with creating and editing my products and then begin to redesign my layout and features. It makes the process flow better to have my products all right there, so then I can create a cohesive design.
- I learned that if the block isn’t responding to any of my edits that it most definitely is a theme/style/template already set in to place, and I’ll have to edit from the source which is the site’s set styles.