How do I move the text "BEST SELLERS" to the right, and "VIEW ALL" to the left position, like CAINTÉ

[OneCap]

CAINTÉ: https://cainte.se/

This is currently mine: https://mdnzn6tes8a76khb-65734639831.shopifypreview.com

[OneCap]

Please, tell me what to do.

[PageFly-Henry]

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

h2.hometitle.h4-style.align-center.has-paging.cc-animate-init.-in.cc-animate-complete {

text-align: left !important;

}

.view-all.align-center.cc-animate-init.-in.cc-animate-complete {

text-align: right !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[OneCap]

Thanks! But now the “Best sellers” text is a little too much up, can you make it align with the “view all” text?

[PageFly-Henry]

Please try again with this code:

h2.hometitle.h4-style.align-center.has-paging.cc-animate-init.-in.cc-animate-complete {
margin-bottom: -20px !important;

}

[Made4uo-Ribe]

Hi @OneCap

Try this one to align.

• From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
• Find the theme that you want to edit and click on “Actions” and then “Edit code”.
• In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.hometitle {
     margin: 0px !important;
}
h2.hometitle.h4-style.align-center.has-paging.cc-animate-init.-in.cc-animate-complete h2 {
    margin: 0px !important;
}
.view-all.align-center.cc-animate-init.-in.cc-animate-complete {
    padding-bottom: 20px;
}

• And Save.
• Result:
• 

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[OneCap]

Thank you so much. I do have two more questions. How do I get that small space between the pictures like CAINTE has, and when you inspect on mobile, how do you get that kind of shopping bag icon?

[Made4uo-Ribe]

For the 1st question you can try this one.

Same Instruction.

.collection-listing .product-block {
    padding-left: 12px !important;
}

And Save.

Result:

For the 2nd question its a customize add to cart button you need a developer to do this design for you.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[OneCap]

One last question brother. Could you please send me the code to move the “VIEW ALL” text a little, little bit down and smaller, basically make it identical to how CAINTE has it.

This is mine

[OneCap]

One last question brother. Could you please send me the code to move the “VIEW ALL” text a little, little bit down and smaller, basically make it identical to how CAINTE has it.