BLOG

Step-by-Step Guide: Customizing Your Jewelry E-commerce Store with Divi from Scratch

 

Step 1: Install Divi on Your WordPress Site

  1. Download Divi:
    • Log in to your Elegant Themes account.
    • Download the Divi theme package (a .zip file).
  2. Install the Divi Theme:
    • Log in to your WordPress dashboard.
    • Go to Appearance > Themes.
    • Click Add New and then Upload Theme.
    • Upload the Divi .zip file and click Install Now.
    • Once installed, click Activate.

Step 2: Install and Set Up WooCommerce

  1. Install WooCommerce:
    • In the WordPress dashboard, go to Plugins > Add New.
    • Search for “WooCommerce” and click Install Now, then Activate.
  2. WooCommerce Setup Wizard:
    • After activation, WooCommerce will guide you through a setup wizard.
    • Configure your store’s location, currency, payment methods, and shipping options.

Step 3: Create Essential Pages

  1. Create Pages for Your Store:
    • Go to Pages > Add New.
    • Create essential pages like Shop, Cart, Checkout, and My Account.
    • Assign these pages in WooCommerce under WooCommerce > Settings > Advanced.
  2. Create a Homepage:
    • Create a new page named Home and set it as your homepage under Settings > Reading.

Step 4: Customize Your Store with Divi

  1. Activate the Divi Builder:
    • Edit any page (e.g., Homepage, Shop) and click on Use The Divi Builder.
  2. Choose a Layout:
    • When you first launch the Divi Builder, you can choose to Build From Scratch, Choose A Premade Layout, or Clone An Existing Page.
    • For a quick start, select Choose A Premade Layout and browse the e-commerce layouts.
  3. Customize the Layout:
    • Sections: These are the large blocks that divide your page. Click on the blue gear icon to customize background colors, images, or settings.
    • Rows: Inside sections, rows contain columns. You can adjust the number of columns and their layout.
    • Modules: Inside rows, modules are the content elements like text, images, or products. Use the grey gear icon on a module to edit its content, style, and advanced settings.
  4. Add Products:
    • Use the Shop module to display products from WooCommerce. Customize how products are displayed, including the number of products per row, categories, and sorting options.
  5. Customize Product Pages:
    • Go to Divi > Theme Builder and click Add New Template.
    • Select All Product Pages and start customizing using Divi’s builder.
    • You can add modules like Product Title, Product Gallery, Add to Cart Button, etc.

Step 5: Customize Global Styles

  1. Global Settings:
    • Go to Divi > Theme Options to set your site’s default styles, such as colors, typography, and header layout.
  2. Global Headers and Footers:
    • In the Divi Theme Builder, you can design a custom global header and footer.
    • Click Add Global Header or Add Global Footer and use the Divi Builder to create a header or footer layout that will be applied site-wide.

Step 6: Optimize for Mobile

  1. Responsive Design:
    • While customizing, click the mobile icon in the Divi Builder to switch to mobile view.
    • Adjust your design for mobile responsiveness, ensuring that your site looks good on all devices.

Step 7: Set Up and Customize Menus

  1. Create Menus:
    • Go to Appearance > Menus to create and customize your navigation menu.
    • Add links to essential pages like Shop, Cart, and Checkout.
  2. Assign Menus:
    • Assign your menu to the desired location (e.g., Primary Menu, Footer Menu).

Step 8: Final Touches and Testing

  1. Check for Consistency:
    • Ensure that all pages have a consistent look and feel, with uniform typography, colors, and design elements.
  2. Test the Checkout Process:
    • Test the entire shopping and checkout process to ensure everything works smoothly, from adding products to cart to completing the payment.
  3. Speed Optimization:
    • Use plugins like WP Rocket or W3 Total Cache for caching and optimizing your site’s performance.

Step 9: Launch Your Store

  1. Final Review:
    • Review your entire site, check for any issues, and ensure everything is functioning as expected.
  2. Launch:
    • Once satisfied, you can launch your store by promoting it on social media, Google Ads, or through email marketing.

By following these steps, you can effectively customize your jewelry e-commerce store using Divi, creating a unique and professional online shopping experience.

Scroll to Top