Home » CoDesigner » CoDesigner Customization » How do I design My Shop Page using Shop Accordion widget?

Create an interactive custom shop page using CoDesinger Shop Accordion. To achieve accordion design, 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. Now please follow the steps below:

Step 1: After activating the pro license, go to the Widgets section from CoDesigner and enable Shop Accordion 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 drop-down. Provide your template a name and click on the Create Template button.

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

 

 

Step 4: Go to the Style tab to do the further customization. There are many options available to Customize Content section. Like changing Product Source, Custom text on View Details button, Show or hide Category on Products card and more.

Step 5: The Shop Accordion widget provides multiple design options to personalize your store. You can choose to display the first row expanded, and there are customizable settings for adjusting the margin and padding around each row.

Step 6: You can customize the product Heading, title, price, content wrapper, etc. to suit your needs. For the Content Wrapper, To customize the background color of the card, you have several options. You can change the background type to a gradient, where you can choose two different colors, set the gradient style such as linear or radial, and adjust the angle. You can apply a box shadow to the card to make it more visually appealing. If you’d like, you can also add a background image instead of a color.

Step 7: For the Cart button on your Shop page, you can customize various design elements such as the icon size, icon color, border, background, and area size. In the same way you can design Wishlist button and  View Details button. Once you’re satisfied with the changes, simply click the Publish or Update button to save them.

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.