Home » CoDesigner » CoDesigner Customization » How do I design My Shop Page using Shop Curvy Horizontal Widget?

Create an eye-catching custom shop page using CoDesinger Shop Curvy Horizontal widget. First, You need to Install and activate the CoDesigner and CoDesigner Pro plugin from your website dashboard. If you haven’t purchase the CoDesigner Pro yet please visit CoDesigner and choose a plan to purchase it. Next follow the steps below:

Step 1: After activating the pro license, go to the Widgets section from CoDesigner and enable the Shop Curvy Horizontal and after that click on Save  Settings.

Step 2: Now, you need to create a Shop template. Head to the Templates >> Add New and select CoDesigner Product Archive from the popup. Provide your template a name and click on the Create Template button.

 Step 3: From the Editor, search for Shop Curvy Horizontal and drag it to the Elementor section.

 

 

Step 4: Customize your shop page to suit your preferences. For this, go to the style tab of the Elementor editor. If you want to add the source of your shop page products, you can do it from the Elementor content section. You can choose source type, how many products you want to showcase, include and exclude categories or products and many more. Make sure you have enabled the Product Query button.

Step 5:  The Shop Curvy Horizontal provides a range of design options to help you tailor the product cards. You can adjust the height of the cards, add a shadow for depth, and change the background to match your style. Additionally, you can control the spacing between rows and columns to ensure the layout looks neat and organized. These options allow you to create a professional design for your shop.

Step 6: You can easily customize basic style elements like the title typography, text size, font, and font-weight. The best part is that you also have full control over the product image settings, including image height, width, and the image box width. To further enhance the appearance of your product images, you can add margins, padding, and box shadows, giving them a more polished and professional look.

Step 7: For pagination on your Shop page, you can apply design changes like alignment of the pagination, adding a hover effect, changing background colors, etc. Finally, when your customization is complete, click on the Publish or Update button.

Step 8: When your customization is complete, assign your template to the Shop page.

Note: You must set this shop page to WooCommerce Settings > Products section as a default shop page.

If you face any difficulties setting up your shop page, don’t hesitate to reach out to our support.