How do I fix my product names in mobile view? I want it to be similar as Cainte

My website: www.onecap.se

Cainte website: https://cainte.se/

Hi @OneCap

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file styles.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){

.innerer a.product-link {

flex-direction: column !important;

}

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

1 Like

Hi @OneCap

I am glad that my answer is your solution. Hope that this won’t bother you but I have to say that I love your store! It looks professional and really creative. But I have some suggestions which might be helpful to you to improve your CRO.

1/ Add countdown timer for promotion:
Use countdown timers for limited-time offers or flash sales to create a sense of urgency and drive conversions.

2/ Add images that models is wearing your products
A model can add a human element to the product, making it easier for potential customers to visualize how the hat might look on them. It helps create an emotional connection, making the product more relatable.

3/ Add hover state for CTA button

You can consider adding hover state for CTA buttons. Interactive elements with hover states are more engaging. When users see a button change when they hover over it, they are more likely to interact with it. This engagement can increase click-through rates and lead to higher conversion rates.

Have a fantastic year ahead! :blush:

Cheers,
Henry

1 Like

Hi Henry!

I am so grateful for your help and for taking the time to help me. I’m so glad you like my website, which I developed all by myself as just an 18-year-old boy, still going to school.

Your tips are truly amazing man! I am considering hiring models at the moment because it is very true about models and that they can show a greater emotional connection. Unfortunately, the theme I use does not include a timer feature, so I will have to check on that topic. I’ll see if I can find any apps that potentially can offer my website that feature. At last, I do agree with you about adding a hover state for the CTA button. I do want that on my website. I want to add it for those homepage buttons and the Add To Cart - button on my product pages. Maybe you know how to add that feature?

Hi @OneCap

I must say, your enthusiasm is truly inspiring! You’re making me feel a bit humbled here,lol :grinning_face_with_smiling_eyes: and I’m genuinely pleased to see that you value my suggestions.

Regarding your questions, here are a few more considerations:

  • Countdown Timer: Implementing a countdown timer can indeed be quite challenging from scratch. To simplify the process, you might want to explore the option of using a page builder app like Gempages, PageFly… These apps often offer user-friendly features for adding countdown timers, and many of them provide free plans to get you started.
  • Button Hover State: Creating a hover effect for buttons can also be simplified with the help of app builders. They typically allow you to customize button styles, including hover effects, with ease.
  • However, if you’re interested in the code side of things, you can refer to this example code:
a.btn.btn--primary {
 transition: transform 0.3s ease-in-out;
}
a.btn.btn--primary:hover {
 transform: scale(1.1); 
}
1 Like

Thank you for your kind words! I’m thrilled to help and appreciate your enthusiasm hahaha.

In response to your response to my questions, do you know any coding that can give you the same hover effect as this website CAINTE? https://cainte.se/collections/trending/products/black-watch and do you know how to code the same Sticky Add To Cart button they have when you scroll down? Or do I have to install an app or ask a Shopify developer for that kind of help?

???