Home » CoDesigner » CoDesigner Customization » How can I design my shop page using the Shop Flip widget?

How can I design my shop page using the Shop Flip widget?

Create an attractive custom shop page using the “Shop Flip” widget of CoDesigner. This widget will apply an interactive effect to your product images, where the product image flips to reveal additional information when the user hovers over it. To design a shop page using this widget you have to follow the below steps:

1. First, Install and activate the CoDesigner plugin from the site Dashboard >> Plugins >> Add New Plugin.

CoDesigner Install

2. You’ll need the Pro version of CoDesigner to access the Shop Flip widget. To do this, Visit CoDesigner and choose a plan to purchase it

3. If you don’t have an account to purchase the pro version, it’s easy to create one. Enter your email address, fill in your first name, the last name, create a secure password, and provide payment information. That’s all you need to have the pro version. Install and activate the pro version on your website.

4. Go to CoDesigner >> Widgets, turn on the Shop Flip widget, and then select Save Settings.

  1. Shop flipNow, you have to

 

5. Next, you need to create a Shop template. Navigate to Templates and select the Add New button. In the drop-down menu, choose CoDesigner Product Archive. Then give your template a name and click the Create Template button to finalize it.

Create template for shop

6. From the Elementor Editor search for the Shop Flip widget and drag it into your preferred section.

Drag shop widget

7. Now customize your shop page according to your choices.

edit shop flip

8. Lastly, assign the template to your Shop page, when you’re done with your customization.

Note: In WooCommerce, make sure you go to the Settings >> Products section and set this shop page as the default.

set shop page in WooCommerce

If you encounter any issues while setting up your shop page, feel free to reach out to our support team.

Was this doc helpful?